使用Ajax ASP.NET发布

Question

Controller

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

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

I do not understand why this is happening Do not normally have to be alerted? How can I do this properly? I would like your help. I have studied many examples. I guess I lost hope I could do without asking.

I would like to work well.

Answer 1

Try changing your submit button to:
<input type="button" value="Submit" class="btn btn-darkgray" id="btn_contact" />

Or you can leave it as is and in your Ajax call, do:

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

This is so as to prevent the default behaviour of the submit type button which sends the form to the action url ( <form action="contact/index" method="POST" ... ) which in your case you don't have.