通过Ajax MVC从jQuery对话框获取数据

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.

Answer 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