4

MVC を使用して、フォーム送信の結果を特定の DIV にロードしようとしています。以下は私のフォームのコードです：

<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions {            UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnBegin = "return loadingBar();" }, new { @name = "AirOptionSegment_Air" }))     
   { %>

<%
    Html.RenderPartial("AirOneWay", Model);
%>
<br/>
<div class="agent-actions">
    <a href="" class="btn blue" style="margin-right: 25px;">Load Original Data</a>
    <input type="submit" class="btn green" id="a1"  name="SearchAir" value="Search" />
</div>
<% } %>
</div>

必要な js ファイルをサイト マスターに含めました。

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>

しかし、どういうわけか、AirOption/ShopByAirCriteria アクション メソッドによってレンダリングされる部分ビューは、DynamicAirOptions div ではなく、新しいページに読み込まれています。

問題が何であるかについて何か考えはありますか？html.BeginForm ヘルパーを使用していたときは正常に機能していましたが、結果を特定の div にロードする必要があるため、代わりに ajax ヘルパーを使用するように変更しました。html ヘルパーで TargetID を指定する方法はありますか?

4

3 に答える 3

4

を使用しないように注意しAjax.BeginFormます。これは Web フォームから少し引き継がれたものであり、私の謙虚な意見では、どのような状況でも使用すべきではありません。それはロジックを隠しているため、開発者は必然的にあなたのような状況に陥ります. 明示的は常に暗黙的よりも優れています。AJAX 呼び出しを制御すると、それが機能する理由と機能しない理由が常にわかります。

そのため、通常のイベントを使用Html.BeginFormしてから、カスタム JavaScript を使用して送信イベントに結び付けます。AJAX 呼び出しを行ってイベント ハンドラーでフォームを送信し、結果の応答を目的の div 内のページにレンダリングします。すでに jQuery を使用しているため、これは非常に簡単です。

$('#YourForm').on('submit', function (evt) {
    evt.preventDefault();
    $.post('/some/url', $(this).serialize(), function (response) {
        $('#YourDiv').html(response); // assuming response is HTML
    });
});

このアプローチの副次的な利点は、標準のフォームを無効にしないことです。これはまだ通常の古いフォームであるため、JavaScript が無効になっている場合、またはまったく使用できない場合 (視覚障害者に使用される多くのスクリーン リーダーなど)、フォームは標準の古い方法で送信し、結果を含む新しいページを返すことができます。

于 2013-10-21T15:07:12.350 に答える
0

jquery.unobtrusive-ajax.js の前に jquery を含めましたか? JavaScript エラーの可能性もあります。ブラウザの開発者ツールでコンソールを確認してください。コードを空白の mvc4 アプリに貼り付けましたが、期待どおりに動作します。

主人：

<script src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>

意見：

<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions { UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }, new { @name = "AirOptionSegment_Air" }))     
   { %>
    <div id="DynamicAirOptions">
    </div>
<br/>
    <input type="submit" class="btn green" id="a1"  name="SearchAir" value="Search" />
<% } %>
</div>
于 2013-10-22T08:58:44.340 に答える