Ajax.BeginForm替换整页的onchange一个DropDownList的 [英] Ajax.BeginForm replaces whole page onchange of a dropdownlist
问题描述
目的
我有一个简单的表格列出名称（在局部视图），它包含以上这些名字一个DropDownList。的目的是为了筛选基于将其在DropDownList选择的名字的表。过滤应尽快发生，因为在DropDownList中所选的值，并且应该再次渲染只有局部视图。
问题
当我在DropDownList选择一个值，局部视图不会在其他视图渲染，但显示为一整页。 然而，当我包括我的Ajax.BeginForm块提交按钮，并触发提交按钮的动作，它的功能如预期...
的code
控制器的
公共PartialViewResult过滤器（串FILTERNAME）{
VAR名称=由对在db.People
选择磷;
如果（！String.IsNullOrEmpty（FILTERNAME））
{
名称= names.Where（P =＆GT; p.Name.Equals（FILTERNAME））;
}
返回PartialView（_ PersonsTable，名称）;
}
查看的
@model IEnumerable的＆LT; Sandbox.Models.Person＆GT;
＆LT; H2＆GT;指数＆LT; / H＆GT;
＆其中p为H.;
@ Html.ActionLink（新建，创建）
＆所述; / P＆GT;
@using（Ajax.BeginForm（过滤器，人，新AjaxOptions {
HttpMethod =获取，UpdateTargetId =SearchResult所，InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace}））
{
@ Html.DropDownList（FILTERNAME，新的SelectList（ViewBag.Names），选择一个名字，新{的onchange =this.form.submit（）}）
}
@ Html.Partial（_ PersonsTable）
部分海景的
@model IEnumerable的＆LT; Sandbox.Models.Person＆GT;
＆LT;表ID =SearchResult所＆GT;
＆其中; TR＆GT;
＆LT;第i个
名称
＆LT; /第i个
＆LT;第i个
年龄
＆LT; /第i个
百分位＆GT;＆LT; /第i个
＆LT; / TR＆GT;
@foreach（以模型的VaR项）{
＆其中; TR＆GT;
＆LT; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Name）
＆LT; / TD＆GT;
＆LT; TD＆GT;
@ Html.DisplayFor（modelItem =＆GT; item.Age）
＆LT; / TD＆GT;
＆LT; TD＆GT;
@ Html.ActionLink（编辑，编辑，新{ID = item.ID}）|
@ Html.ActionLink（细则，细则，新{ID = item.ID}）|
@ Html.ActionLink（删除，删除，新{ID = item.ID}）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
}
＆LT; /表＆gt;
那么，为什么它是我的SearchResult表未呈现为局部视图？
我已经包含在我_layout认为这些脚本：
＆LT;脚本的src =/脚本/ jQuery的-1.7.2.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ Modernizr的-1.7.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ jquery.unobtrusive-ajax.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ MicrosoftAjax.debug.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ MicrosoftMvcAjax.debug.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
在您的下拉替换：
新{的onchange =this.form.submit（）}
与
新{的onchange =$（this.form）.submit（）; }
也摆脱所有 MicrosoftAjax的* .js 脚本。这些都是完全的遗产，应该在ASP.NET MVC 3和更新的应用程序无法使用。它们仅提供了兼容性的原因，如果你是从旧版本迁移。 的jquery.js 和 jquery.unobtrusive-ajax.js 就足够了。
The purpose
I have a simple table listing names (in a partial view), and above it a dropdownlist containing those names. The purpose is to filter the table based on the name which was selected in the dropdownlist. The filtering should happen as soon as the selected value in the dropdownlist changes, and should render only the partial view again.
The problem
When I select a value in the dropdownlist, the partial view isn't rendered in the other view but is displayed as a whole page. However, when I include a submit button in my Ajax.BeginForm block, and trigger the action on the submit button, it does function as expected...
The code
Controller
public PartialViewResult Filter(string filterName) {
var names = from p in db.People
select p;
if (!String.IsNullOrEmpty(filterName))
{
names = names.Where(p => p.Name.Equals(filterName));
}
return PartialView("_PersonsTable", names);
}
View
@model IEnumerable<Sandbox.Models.Person>
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
@using (Ajax.BeginForm("Filter", "Person", new AjaxOptions {
HttpMethod = "Get", UpdateTargetId = "SearchResults", InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace }))
{
@Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new { onchange = "this.form.submit()" })
}
@Html.Partial("_PersonsTable")
Partial View
@model IEnumerable<Sandbox.Models.Person>
<table id="SearchResults">
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</table>
So why is it that my searchResults table isn't rendered as a partial view?
I have these scripts included in my _Layout view:
<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
In your dropdown replace:
new { onchange = "this.form.submit()" }
with:
new { onchange = "$(this.form).submit();" }
Also get rid of all MicrosoftAjax*.js scripts. Those are completely legacy and shouldn't be used in ASP.NET MVC 3 and newer applications. They are provided only for compatibility reasons if you are migrating from older versions. jQuery.js and jquery.unobtrusive-ajax.js are enough.
这篇关于Ajax.BeginForm替换整页的onchange一个DropDownList的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
