如何在 ASP.NET MVC 5 中使用 AJAX 创建模型

Question

目前我可以定期创建模型（通过 SettingProfile/Create）

但是当我尝试使用 AJAX 发送包装在 settingProfile JS 对象中的数据时，它返回 HTTP 500 Internal Server Error 错误，我相信问题出在数据类型上。在 AJAX 中调用 Create 方法的正确方法是什么？

我的代码：

型号：

    public class SettingProfile
    {
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int ID { get; set; }
        public string Name { get; set; }
        public long? UserId { get; set; }
        public string Url { get; set; }
    }

查看（JS）：

function saveSettingProfile() {
        var name = prompt("Please enter profile name", "");
        var url = $("form").serialize(); // Not AJAX url, its a variable in model

        var settingProfile = {
            Name: name,
            Url: url
        };

        jQuery.ajax({
            url: "@Url.Action("Create", "SettingProfile")",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            method: "POST",
            data: settingProfile
        }).done(function (response) {
            alert("Profile saved successfully");
        }).fail(function () {
            alert("Could not save profile");
        });
    }

控制器：

        [HttpPost]
        //[ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "Name,Url")] SettingProfile settingProfile)
        {
            settingProfile.UserId = 8; // TODO: get user id from session
            if (ModelState.IsValid)
            {
                db.SettingProfiles.Add(settingProfile);
                db.SaveChanges();
                return Json(new { success = true });
            }
            return Json(new { success = false });
        }

Answer 1

500 错误意味着，您的服务器代码正在崩溃。这可能有很多原因。我注意到的一件事（可能导致 500 错误）是您发送数据的方式。

您将 contentType 指定为 "application/json" 。但是您正在按原样发送 javascript 对象。因此，您的请求负载将被发送为类似

Name=SomeNameValue&Url=SomeUrlValue 并且使用您当前的服务器代码，模型绑定器无法将其映射到 SettingProfile 的对象。

解决方案是发送您的 javascript 对象的字符串化版本。您可以使用JSON.stringify 方法来执行此操作。

 jQuery.ajax({
                url: "@Url.Action("Create", "SettingProfile")",
                contentType: "application/json; charset=utf-8",
                method: "POST",
                data: JSON.stringify(settingProfile)
        }).done(function (response) {
            alert("Profile saved successfully");
        };

现在您的客户端代码将发送一个请求负载，例如

{"Name":"SomeName","Url":"SomeUrl"}

模型绑定器将能够正确映射它。

如果是简单的数据，可以简单的不提自定义contentType，直接发送js对象。 jQuery 将使用默认的 contentType 值，即“application/x-www-form-urlencoded”，并且模型绑定将起作用。

所以下面的代码可以正常工作。

  jQuery.ajax({
                url: "@Url.Action("Create", "SettingProfile")",
                method: "POST",
                data:settingProfile
        })

您还可以检查浏览器的网络选项卡并查看从服务器返回的对该 ajax 调用的响应。如果发生异常，您可以在此处查看详细信息。