2

MVC アプリケーションに Ajax 機能を追加しようとしています。フォームを非同期でポストバックしたい。フォームコードは次のとおりです。

using (Ajax.BeginForm("SetInterviewee", "Date", routeValues, new AjaxOptions { UpdateTargetId = "divInterviewee" }))

ドロップダウンリストの選択した値が変更されたときに自動的にポストバックするようにします:

<%= Html.DropDownList("interviewees", Model.interviewees.intervieweeLists.intervieweesList, "-- select employee --", new { @class = "ddltext", style = "width: 200px", onchange = "this.form.submit();" })%>

ただし、これを試してみると、プログラムは期待どおりの部分的なポストバックではなく、正常にポストバックします。問題は次のとおりです。 onchange = "this.form.submit();" ドロップダウンリストで。

これにより、非同期ポストバックではなく、通常のポストバックが何らかの形で発生すると思います。

form タグの HTML 用に MVC が生成するものは次のとおりです。

<form action="/SetInterviewee/2011-1-26/2011-1/visit" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: &#39;divInterviewee&#39; });">

「this.form.submit()」では「onsubmit」イベントハンドラが呼び出されていないと思います。問題は、理由がわかりません。「onsubmit」は、フォームを送信するイベントをキャッチしませんか?

更新：私はjqueryに行きました。

        $(function () {
        $('#interviewees').change(function () {
            var form = $('#intervieweeForm');
            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function (result) {
                    $('#selectedInterviewee').val(result);
                }
            });
        });
    });

これにより、次のような多くの問題が発生しています。

-- 非同期ポストバックはまだ行われていないようです。私のコントローラ アクション メソッドには、次のコードがあります: "if (Request.IsAjaxRequest())" は false を返します。

-- もうモデル バインディングを行うことができないようです。私のルートは次のようになります：

http://localhost:1986/Interviews/2011-2-25/2011-2/visit

しかし、どうやら送信されてしまうルートは

http://localhost:1986/SetInterviewee/2011-2-25/2011-2?
Count=5&Keys=System.Collections.Generic.Dictionary`2+KeyCollection
[System.String,System.Object]
&Values=System.Collections.Generic.Dictionary`2+ValueCollection
[System.String,System.Object]

モデルバインディングが機能しない原因 - 「訪問」は「モード」パラメーターであるはずですが、そこにないため、「モード」はデフォルトで「電話」になり、アップルカート全体が混乱します。

これを引き起こしているのはシリアライズコマンドですか？メソッドが POST のときにクエリ文字列に追加する理由がわかりません。

他にもあります - その中には、アクションが ViewResult を返さなければならないという事実があります。そのため、ajax を使用して必要な文字列を返すにはどうすればよいでしょうか。 /拘束具がまっすぐになりました！

更新:「SetInterviewee」は実際に投稿する正しいルートですが、routeValues パラメーターは現在のビューからルート値をコピーする必要があります。フォームのコードは次のとおりです。

RouteValueDictionary routeValues = ViewContext.RouteData.Values;
using (Html.BeginForm("SetInterviewee", "Date", routeValues, FormMethod.Post, new { id = "intervieweeForm" }))
4

2 に答える 2

1

ですから、これはかなり古い質問だと思いますが、私は同様の問題をいじり回しており、将来役立つ可能性のある回避策に到達しているようです。

フォーム内に送信ボタンを追加します。何かのようなもの：

<input type="submit" name="submit" value="save" style="display: none;" />

この場合は重要と思われるので、name属性を指定していることを確認してください。これが私が持っているコードで、現在完全なモデルバインディングで動作しています。

<% using (Ajax.BeginForm("SaveStatus", "Finding", new { FindingId = Model.FindingId },
       new AjaxOptions {
           HttpMethod = "Post",
           InsertionMode = InsertionMode.Replace,
           UpdateTargetId = "StatusWindow",
           OnBegin = "function(){ jQuery('#SaveStatusForm').block({ Message: 'Saving' }); }",
           OnComplete = "function(){ jQuery('#SaveStatusForm').unblock(); }",
           OnFailure = "HandleMSAjaxFail",
       }, new { id = "SaveStatusForm" })) { %>
<div>
    <%: Html.DropDownListFor(Status => Status.SelectedTagId, Model.AvailableStatuses, null, new Dictionary<string, object> { { "onchange", "jQuery('#SaveStatusForm').submit();" } })%>
    <input type="submit" name="submit" value="save" style="display: none;" />
</div>
<% } %>

確かにこれは私のコードであり、あなたの例に結び付けられていませんが、何が起こっているのかからアイデアを得ることができます。もともと私はドロップダウンリストに送信を行っていましたが、それが起動すると、完全な同期ポストバックを含む、あらゆる種類の風変わりな応答が返されていました。送信ボタンを追加すると、MSajaxコードはうまく機能しているようです。試してみます！

于 2011-11-30T05:30:22.757 に答える
0

jquery を使用して、すべてのAjax.*ヘルパーとMSAjaxスクリプトを削除することをお勧めします。

そう：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<% using (Html.BeginForm("SetInterviewee", "Date", routeValues, FormMethod.Post, new { id = "myform" })) { %>
    ...
<% } %>

<%= Html.DropDownList(
    "interviewees", 
    Model.interviewees.intervieweeLists.intervieweesList, 
    "-- select employee --", 
    new { id = "interviewees", @class = "ddltext", style = "width: 200px" }
)%>

次に、別のJavaScriptファイルで：

$(function() {
    $('#interviewees').change(function() {
        var form = $('#myform');
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            success: function(result) {
                 $('#divInterviewee').html(result);
            }
        });
    });
});

これで、HTML マークアップを JavaScript から分離することに成功しました。目立たないjavascriptです。

于 2011-01-26T08:28:40.100 に答える