javascript - 通过ajax mvc从jquery对话框获取数据

Question

已经进行了大量搜索，但我不确定为什么这不起作用。我有一个 jquery 对话框，在其中显示部分 View 。当我将数据传递回 Controller 时，它会显示一个空白模型。

Controller :

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

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

        return Json(null);
    }

部分 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>

脚本:

$(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;
        });

    });
});

我尝试将数据硬编码到脚本中，但也没有通过。

感谢您的帮助。

Answer 1

javascript 区分大小写，因此在应该小写的对象属性上使用 wordcase 时需要更加小心

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

应该是

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

此外，在没有成功和错误处理程序的情况下使用 ajax 也不是一个好主意。您的请求可能会失败，而用户永远不会知道