Getting data from jquery dialog via ajax mvc

Question

have done a lot of searching, and I am not sure why this is not working. I have a jquery dialog in which I am displaying a partial view. When I pass the data back to the controller, it shows up with a blank model.

Controller:

    public ActionResult AddIngredient()
    {
        return PartialView();
    }

    public JsonResult AddIngredientJson(Ingredient model)
    {
        Ingredient newIngredient = model;

        return Json(null);
    }

Partial View:

     <form id="AddIngredientForm" class="AddIngredientForm">
         <div class="logincontent">
              <label>Name:</label>
              @Html.TextBoxFor(x => x.Name, new { @class = "logintextbox" })
         </div>
         <div class="logincontent">
              <label>Category:</label>
              @Html.EnumDropDownListFor(x => x.Category, new { @class = "logintextbox" })
         </div>
     </form>

Script:

$(document).ready(function () {
    function addIngredient() {
        $.ajax({
            url: "AddIngredientJson",
            Data: $('#AddIngredientForm').serialize(),
            Type: "POST"
        });
    }

    $(function () {
        $('#modalDialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true,
            buttons: {
                "Save": function () {
                    addIngredient();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });


        $('#openDialog').click(function () {
            $('#modalDialog').load("@Url.Action("AddIngredient")", function () {
                $(this).dialog('open');
            });
            return false;
        });

    });
});

I have tried hardcoding in data into the script, and that does not get passed either.

Thanks for the help.

AJAX MVC? Which one? Please be specific & provide as much detail as possible so we can help troubleshoot your issue. — metaColin
– metaColin, Commented Apr 25, 2015 at 22:50

charlietfl · Accepted Answer · 2015-04-25 22:55:14Z

1

javascript is case sensitive so you need to be more careful when using wordcase on object properties that should be lowercase

$.ajax({
    url: "AddIngredientJson",
    Data: $('#AddIngredientForm').serialize(),
    Type: "POST"
});

should be

$.ajax({
    url: "AddIngredientJson",
    data: $('#AddIngredientForm').serialize(),
    type: "POST"
});

Also it's not a good idea to use ajax without success and error handlers. Your request could fail and user would never know

edited Apr 25, 2015 at 22:55

answered Apr 25, 2015 at 22:50

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mayiko Over a year ago

Thanks. This was the problem. And I am planning on adding success and error handlers, just wanted to get this figured out first.

Collectives™ on Stack Overflow

Getting data from jquery dialog via ajax mvc

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related