web-dev-qa-db-ja.com

Ajaxフォームからasp.netmvcのドロップダウンリストを送信するにはどうすればよいですか

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

次の質問によると： asp.net mvcでドロップダウンリストを送信するにはどうすればよいですか 、Html.BeginFromの内部から、onchange = "this.form.submit"を設定し、ドロップダウンの投稿を元に戻すことができます。

ただし、次のコードを使用します（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内の領域のみを呼び出す正しい方法は何ですか？

asp.net-mvcdrop-down-menuajax.beginform
22
Gene

OK、ほぼ2年後、あなたはおそらくもう気にしないでしょう。誰が知っているか：たぶん他の人（私のような;-)は知っています。

したがって、これが（非常に単純な）解決策です。

Html.DropDownList(...)呼び出しで、変更します

_new { onchange = "this.form.submit()" }
_

に

_new { onchange = "this.form.onsubmit()" }
_

あなたは違いを見つけることができますか？ ;-)

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

41
Serge Wautier

ドロップダウンで置き換えます

this.form.submit()

に

$(this.form).submit();
5
Bonomi

あなたがこれをやろうとすることができること（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!") });
});
3
Strelok

私も同じ問題を抱えていました。部分ビューにいくつかのドロップダウンリストがあり、それらを個別に更新できましたが、「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」は、同じページのさまざまなコントロールにアクセスするための単なる変数です。それが役に立てば幸い。

2
Francisco

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()" }
1
Carbosound1

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);
}
1
Stelloy

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

Html.RenderPartial("viewname");

コントローラ内：

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

0
Adam