0

ページをリロードせずに Ajax で送信しようとしているフォームがあります。

Ajax 呼び出しはサーバーにヒットしていますが、関数を呼び出しているようには見えません。$.postと の両方を試しました$.ajax。どちらも機能していないようです。数週間前に非常によく似た機能がありましたが、今では複製できません。(最終的な目標は、検証を確認するために、モデルを部分ビューとして返すことです。)

Firefox を使用すると、コントローラー メソッドがすぐにヒットします。Chrome を使用すると、ブラウザのタブがロックされるようです。遅れてコントローラーにヒットすることがあります。（モデル情報は正確に伝わっています。）

ここで何が間違っていますか？

ここに私の部分的な見方があります：

<% 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>
<% } %>

コントローラ：

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

そして最後に、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
        });
4

4 に答える 4

1

Ajax.*ヘルパーと を混ぜてはいけませんjQuery.ajax。Ajax.BeginForm ヘルパーを使用する場合は、jquery.unobtrusive-ajax.jsスクリプト (ASP.NET MVC 3) またはスクリプト (ASP.NET MVC 2) をMicrosoftAjax.js含めて、 .MicrosoftMvcAjax.jsAjaxOptions

jQuery.ajax を手動で使用する場合は、標準の Html.BeginForm を使用します。

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

その後：

$(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;
    });
});
于 2012-04-26T06:01:14.330 に答える
0

あなたはすでに を使用してAjax.BeginFormいますが、ajax を実行するために jQuery スクリプトが必要なのはなぜですか?

含まれていjquery.unobtrusive-ajax.jsますか？

于 2012-04-25T22:03:52.177 に答える
0

マイクロソフトの ajax と検証をカスタム jquery ajax と混合することに関して、ここに同様のスレッドがあります: Mixing Microsoft MVC ajax and validation helpers with native jquery ajax

于 2012-04-30T08:31:40.223 に答える
0 
$.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.

于 2012-04-25T21:56:08.107 に答える