使用 ajax ASP.NET 发布答案

【问题标题】：Post with ajax ASP.NET使用 ajax ASP.NET 发布
【发布时间】：2018-02-04 14:22:53
【问题描述】：

控制器

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(Contact contact)
    {
        using (LawContext DB = new LawContext())
        {
            if (ModelState.IsValid)
            {
                DB.Contact.Add(contact);
                DB.SaveChanges();
                return Json("OK");
            }

            return View();
        }
    }

查看

                @using (Html.BeginForm("Index", "Contact", FormMethod.Post))
                {
                        @if (!ViewData.ModelState.IsValid)
                        {
                                @Html.ValidationSummary("", new { @class = "alert-danger" })
                        }
                        @Html.AntiForgeryToken()
                            @Html.TextBoxFor(m => m.Lastname, new { @class = "form-control margin-bottom10", @placeholder = "Name" })

                            @Html.TextBoxFor(m => m.Mail, new { @class = "form-control margin-bottom10", @placeholder = "Mail" })

                            @Html.TextBoxFor(m => m.Phone, new { @class = "form-control margin-bottom10", @placeholder = "Phone" })

                            @Html.TextAreaFor(m => m.Message, new { @class = "form-control margin-bottom10", @placeholder = "Message", @rows = "3" })

                            <input type="submit" value="Submit" class="btn btn-darkgray" id="btn_contact" />
                }

JavaScript

$(document).ready(function () {
    $("#btn_contact").click(function () {

        $.ajax(
            {
                type: "POST",
                url: "Contact/Index", 
                data: { 
                    Lastname: $("#Lastname").val(),
                    Mail: $("#Mail").val(),
                    Phone: $("#Phone").val(),
                    Message: $("#Message").val()
                },
                dataType: "json",
                async: true,
                processData: false,
                cache: false,
                contentType: "application/json; charsetset=utf8",
                success: function (data) {
                    alert('success');
                },
                failure: function (data) {
                    alert('failure');
                },
                error: function (data) {
                    alert('error');
                }
            });
    });
});

我不明白为什么会这样平时不需要提醒吗？我怎样才能正确地做到这一点？我需要你的帮助。我研究了很多例子。我想我已经失去了不问就可以做到的希望。

我想好好工作。

【问题讨论】：

您现在的做法是使用表单提交按钮在ContactController 上调用index 操作，这将返回视图，这就是为什么空页面正常的原因。如果您想使用 ajax 调用相同的操作，请尝试使用普通按钮，将其 id 为btn_contact。其余的代码看起来不错。我还没有测试过，但它应该可以工作（弹出警报）。
您同时进行了 ajax 调用和正常提交。您需要取消默认提交 - $("#btn_contact").click(function (e) { e.preventDefault; $.ajax(.... 或添加 return false; 作为方法中的最后一行代码。作为旁注，无需将@Html.ValidationSummary() 包装在if 块中
此外，return View(); 没有任何意义，因为您永远不会对返回的视图做任何事情
@StephenMuecke 没查的时候，给的样式好像是空的
附带说明，只需使用data: $('form').serialize(), 并删除contentType: "application/json; charsetset=utf8",（当您进行ajax POST 时，您的POST 方法中的模型甚至不会与您当前的代码绑定）。您也可以删除async: true,（这是默认设置）

标签： javascript asp.net asp.net-mvc asp.net-ajax

【解决方案1】：

尝试将您的提交按钮更改为：
<input type="button" value="Submit" class="btn btn-darkgray" id="btn_contact" />

或者您可以保持原样并在您的 Ajax 调用中执行以下操作：

$(document).ready(function () {
    $("#btn_contact").click(function (event) {
        event.preventDefault();

        $.ajax(
            {
                type: "POST",
                url: "Contact/Index", 
                data: { 
                    Lastname: $("#Lastname").val(),
                    Mail: $("#Mail").val(),
                    Phone: $("#Phone").val(),
                    Message: $("#Message").val()
                },
                dataType: "json",
                async: true,
                processData: false,
                cache: false,
                contentType: "application/json; charsetset=utf8",
                success: function (data) {
                    alert('success');
                },
                failure: function (data) {
                    alert('failure');
                },
                error: function (data) {
                    alert('error');
                }
            });
    });
});

这是为了防止提交类型按钮的默认行为将表单发送到您没有的操作 url (<form action="contact/index" method="POST" ...)。

【讨论】：