asp.net-mvc 如何从 Ajax 表单提交 asp.net mvc 中的下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/367349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you submit a dropdownlist in asp.net mvc from an Ajax form
提问by Serge Wautier
How do you submit from a dropdownlist "onchange" event from inside of an ajax form?
您如何从 ajax 表单内部的下拉列表“onchange”事件提交？
According to the following question: How do you submit a dropdownlist in asp.net mvc, from inside of an Html.BeginFrom you can set onchange="this.form.submit" and changing the dropdown posts back.
根据以下问题：如何在 asp.net mvc 中提交下拉列表，从 Html.BeginFrom 内部，您可以设置 onchange="this.form.submit" 并将下拉列表更改回。
However, using the following code (inside an Ajax.BeginFrom):
但是，使用以下代码（在 Ajax.BeginFrom 中）：
<% using (Ajax.BeginForm("UpdateForm", new AjaxOptions() { UpdateTargetId = "updateText" })) { %>
<h2>Top Authors</h2>
Sort by: <%=Html.DropDownList("sortByList", new SelectList(ViewData["SortOptions"], new { onchange = "this.form.submit()" })%>
<%= Html.TextBox("updateText")%>
<% } %>
Posts back to the controller action, but the entire page is replaced with the contents of the "updateText" text, rather than just what is inside the "updateText" textbox.
回发到控制器操作，但整个页面被替换为“updateText”文本的内容，而不仅仅是“updateText”文本框内的内容。
Thus, rather than replacing just the area inside the Ajax.BeginForm, the entire page is replaced.
因此，不是只替换 Ajax.BeginForm 内的区域，而是替换整个页面。
What is the correct way for the dropdownlist to call this.form.submit such that only the area inside the Ajax.BeginForm?
下拉列表调用 this.form.submit 以便只有 Ajax.BeginForm 内的区域的正确方法是什么？
回答by Serge Wautier
OK, nearly 2 years later, you probably don't care anymore. Who knows: Maybe others (such as me ;-) do.
好吧，将近 2 年后，你可能不再关心了。谁知道：也许其他人（例如我 ;-) 会这样做。
So here's the (extremely simple) solution:
所以这是（非常简单的）解决方案：
In your Html.DropDownList(...)call, change
在你的Html.DropDownList(...)电话中，改变
new { onchange = "this.form.submit()" }
to
到
new { onchange = "this.form.onsubmit()" }
Can you spot the difference? ;-)
您看得出来差别吗？;-)
The reason is that Ajax.BeginForm()creates a form with an onsubmit()handler to submit the form asynchronously. By calling submit(), you bypass this onsubmit()custom handler. Calling onsubmit()worked for me.
原因是Ajax.BeginForm()创建一个带有onsubmit()处理程序的表单以异步提交表单。通过调用submit()，您可以绕过此onsubmit()自定义处理程序。打电话onsubmit()对我有用。
回答by Bonomi
in your dropdown replace
在您的下拉列表中替换
this.form.submit()
to
到
$(this.form).submit();
回答by Strelok
What you can try to do it this (jQuery required):
你可以尝试这样做（需要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!") });
});
回答by Francisco
I had the same problem too. I had several dropdown lists in partial views so they could refresh independently, but setting the "onchange" attribute kept refreshing the entire page.
我也有同样的问题。我在部分视图中有几个下拉列表，因此它们可以独立刷新，但设置“onchange”属性会不断刷新整个页面。
I noticed that "this.form.submit()" always referred to the main form, outside the partial view. So instead I added a submit button inside the AJAX form and referred to that:
我注意到“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 />
My "Model.IdIdex" is just a variable to access different controls in the same page. Hope it helps.
我的“Model.IdIdex”只是一个访问同一页面中不同控件的变量。希望能帮助到你。
回答by Stelloy
If you are using MVC then probably the best way is with jQuery...
如果您使用的是 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>
Your controller would be something like:
您的控制器将类似于：
public JsonResult UpdateForm(string sortBy)
{
string result = "Your result here";
return Json(result);
}
回答by Carbosound1
I had a button like this in my AJAX.BeginForm
我的 AJAX.BeginForm 中有一个这样的按钮
<button id="submitButton" type="submit" class="btn" style="vertical-align: top"><i class="icon"></i> replace</button>
And onsubmit or the solution from Francisco didn't work (I still don't know why)
并且 onsubmit 或来自弗朗西斯科的解决方案不起作用（我仍然不知道为什么）
So I created an alternative:
所以我创建了一个替代方案：
new { onchange = "document.getElementById('submitButton').click()" }
回答by Adam
Can we see your Controller code? You can use Request.IsMvcAjaxRequest() in your controller to return only a portion of data if it is an Ajax Request instead of an entire View. In your View move your form to a PartialView and call
Html.RenderPartial("viewname");
我们可以看到您的控制器代码吗？如果是 Ajax 请求而不是整个视图，则可以在控制器中使用 Request.IsMvcAjaxRequest() 仅返回部分数据。在您的视图中将您的表单移动到 PartialView 并调用
Html.RenderPartial("viewname");
In your Controller:
在您的控制器中：
if (Request.IsMvcAjaxRequest())
{
return PartialView("viewname");
}
else
{
//Non Ajax code here.
}
if (Request.IsMvcAjaxRequest())
{
return PartialView("viewname");
}
else
{
//Non Ajax code here.
}
