22

ajaxフォーム内からドロップダウンリストの「onchange」イベントからどのように送信しますか?

次の質問によると、Html.BeginFrom の内部からasp.net mvc でドロップダウンリストを送信するにはどうすればよいですか?

ただし、次のコード (Ajax.BeginFrom 内) を使用します。

<% using (Ajax.BeginForm("UpdateForm", new AjaxOptions() { UpdateTargetId = "updateText" })) { %>
    <h2>Top Authors</h2>

    Sort by:&nbsp;<%=Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"], new { onchange = "this.form.submit()" })%>

    <%= Html.TextBox("updateText")%>
<% } %>

コントローラー アクションにポスト バックしますが、ページ全体が「updateText」テキスト ボックスの内容だけでなく、「updateText」テキストの内容に置き換えられます。

したがって、Ajax.BeginForm 内の領域だけを置き換えるのではなく、ページ全体を置き換えます。

ドロップダウンリストがthis.form.submitを呼び出して、Ajax.BeginForm内の領域のみを呼び出す正しい方法は何ですか?

4

7 に答える 7

41

OK、ほぼ 2 年後、おそらくもう気にしないでしょう。誰が知っているか: 多分他の人 (私のような ;-) はそうするでしょう.

だからここに（非常に単純な）解決策があります：

Html.DropDownList(...)通話中に変更

new { onchange = "this.form.submit()" }

に

new { onchange = "this.form.onsubmit()" }

違いがわかりますか？;-)

その理由は、フォームを非同期的に送信するハンドラーをAjax.BeginForm()使用してフォームを作成するためです。onsubmit()を呼び出すことで、このカスタム ハンドラsubmit()をバイパスします。onsubmit()通話onsubmit()はうまくいきました。

于 2010-12-01T15:50:20.703 に答える
3

これを行うためにできること（jQueryが必要）：

$("#yourDropdown").change(function() {
  var f = $("#yourForm");
  var action = f.attr("action");
  var serializedForm = f.serialize();
  $.post(action, serializedForm,
    function () { alert("Finished! Can do something here!") });
});
于 2008-12-15T03:25:10.350 に答える
2

私も同じ問題を抱えていました。部分ビューにいくつかのドロップダウン リストがあり、個別に更新できましたが、「onchange」属性を設定すると、ページ全体が更新され続けました。

「this.form.submit()」は常に部分ビューの外側のメイン フォームを参照していることに気付きました。代わりに、AJAX フォーム内に送信ボタンを追加し、それを参照しました。

<%=Html.DropDownList("data", ViewData["data"] as SelectList
, new { onchange = "$(\"#button" + Model.IdIndex + "\").click();" })%>


<input type="submit" id="button<%=Model.IdIndex %>" style="display: none"  /><br />

私の「Model.IdIdex」は、同じページ内のさまざまなコントロールにアクセスするための単なる変数です。それが役に立てば幸い。

于 2009-06-09T16:55:59.767 に答える
1

AJAX.BeginForm にこのようなボタンがありました

  <button id="submitButton" type="submit"  class="btn" style="vertical-align: top"><i class="icon"></i> replace</button>

そして、onsubmit または Francisco のソリューションは機能しませんでした (理由はまだわかりません)。

だから私は代替案を作成しました：

  new { onchange = "document.getElementById('submitButton').click()" }
于 2012-05-18T03:02:35.180 に答える
1

MVC を使用している場合、おそらく最良の方法は jQuery を使用することです...

<%= Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"]) %> 
<%= Html.TextBox("updateText") %>

<script>
$("#sortByList").change(function() {
    $.ajax({
        url: <%= Url.Action("UpdateForm")%>,
        type: "POST",
        data: { 'sortBy': $(this).val() },
        dataType: "json",
        success: function(result) { $('#updateText').text(result); },
        error: function(error) { alert(error); }
    })

});
</script>

コントローラーは次のようになります。

public JsonResult UpdateForm(string sortBy)
{
    string result = "Your result here";
    return Json(result);
}
于 2009-12-16T12:24:01.620 に答える
0

コントローラコードを確認できますか？コントローラーでRequest.IsMvcAjaxRequest（）を使用すると、ビュー全体ではなくAjaxリクエストの場合、データの一部のみを返すことができます。ビューでフォームをPartialViewに移動し、

Html.RenderPartial("viewname");

コントローラ内：

if (Request.IsMvcAjaxRequest())
{
return PartialView("viewname");
}
else
{ //Non Ajax code here. }

于 2008-12-21T03:00:58.940 に答える