这个jQuery表单帖子有什么问题？

Question

I have a form which I am trying to submit with Ajax / without reloading the page.

The Ajax call is hitting the server, but it doesn't seem to be calling the function. I've tried both $.post and $.ajax . Neither seem to work. I had something extremely similar working a few weeks back, but now I can't replicate it. (The end goal is to return the model as a partial view, in order to see the validation.)

Using Firefox, the controller method is immediately hit. Using Chrome, the browser tab seems to lock up. It sometimes hits the controller after a delay. (The model information is coming over accurately.)

What am I doing wrong here?

I have my partial view here:

<% using (Ajax.BeginForm("CreateSimpleReport", "Main", new AjaxOptions { HttpMethod="POST" }, new { id="CreateSimpleReport" })){ %>
   <%: Html.ValidationSummary(false, "Report creation was unsuccessful. Please correct the errors and try again.", new { @class = "validation_summary" })%>
   <% Html.EnableClientValidation(); %>
   <div class="col">
<div class="row">
    <div class="label">
        <%: Html.LabelFor(m => m.Name)%>
    </div>
    <div class="field">
        <%: Html.TextBoxFor(m => m.Name, new { @class = "input texbox" })%>
        <%: Html.ValidationMessageFor(m => m.Name, "*")%>
    </div>
</div>
<div class="row">
    <div class="label">
        <%: Html.LabelFor(m => m.Description)%>
    </div>
    <div class="field">
        <%: Html.TextBoxFor(m => m.Description, new { @class = "input texbox" })%>
        <%: Html.ValidationMessageFor(m => m.Description, "*")%>
    </div>
</div>
<div class="row">
    <div class="label">
        <%: Html.LabelFor(m => m.Quantity)%>
    </div>
    <div class="field">
        <%: Html.TextBoxFor(m => m.Quantity, new { @class = "input texbox" })%>
        <%: Html.ValidationMessageFor(m => m.Quantity, "*")%>
    </div>
</div>
<div class="right"><input type="submit" class="button" value="Create Report" /></div>
</div>
<% } %>

Controller:

[HttpPost]
public string CreateSimpleReport(SimpleReportModel model)
{
    if (ModelState.IsValid)
    {
        // do something
        return "success";
    }
    else
    {
        return "failure";
    }
}

And finally, the jQuery:

        $('#CreateSimpleReport').on('submit', function (e) {
            var $this = $(this);
            $.post((this), (this), function(data) {
                alert('finish');
            });
//            $.ajax({
//                type: 'POST',
//                url: (this),
//                data: (this),
//                success: function () {
//                    alert('success');
//                },
//                error: function (jqXHR, textStatus, errorThrown) {
//                    alert('error');
//                }
//            }); // end ajax call
        });

Answer 1

You should not be mixing Ajax.* helpers with jQuery.ajax . If you use the Ajax.BeginForm helper then simply include the jquery.unobtrusive-ajax.js script (ASP.NET MVC 3) or the MicrosoftAjax.js and MicrosoftMvcAjax.js scripts (ASP.NET MVC 2) and subscribe to a success callback in the AjaxOptions .

If you decide to use jQuery.ajax manually then use a standard Html.BeginForm:

<% using (Html.BeginForm("CreateSimpleReport", "Main", FormMethod.Post, new { id = "CreateSimpleReport" })) { %>

and then:

$(function() {
    $('#CreateSimpleReport').on('submit', function() {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
                alert('AJAX success');
            }
        });

        // make sure you return false to cancel the default event
        return false;
    });
});

Answer 2

$.post((this), (this)

This (no pun intended) makes no sense. You cannot POST to a DOM element with the arguments being a DOM element, too. Besides that you need to e.preventDefault(); (or return false; ) to avoid a regular form submission. So when your callback would fire, the page has already been reloaded.

The easiest way to submit a form via AJAX is by using the jQuery form plugin .

Answer 3

You are already using Ajax.BeginForm , why do you need jQuery script to do ajax?

Have you included jquery.unobtrusive-ajax.js ?

Answer 4

关于将Microsoft Ajax和验证与自定义jquery ajax混合在一起，我在这里有一个类似的线程： 将Microsoft MVC ajax和验证助手与本机jquery ajax混合在一起