使用Ajax ASP.NET發布

Question

調節器

    [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');
                }
            });
    });
});

我不明白為什么會這樣？通常不需要提醒嗎？ 如何正確執行此操作？ 需要您的幫助。 我研究了很多例子。 我想我沒有希望就可以做到的希望了。

我想工作順利。

Answer 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');
                }
            });
    });
});

這是為了防止提交類型按鈕的默認行為，該按鈕會將表單發送到操作網址（ <form action="contact/index" method="POST" ... ），在您的情況下，您沒有。