Ajax.BeginForm替换整个页面平变化一个下拉列表

的我有一个简单的表列名单（在一个局部视图），并且上述含这些名字一个DropDownList。目的是根据在下拉列表中选择的名称来过滤表格。只要下拉列表中的所选值发生更改，过滤就会发生，并且应该仅再次显示局部视图。

问题

当我选择在下拉列表的值，则局部视图没有在其他视图中呈现，但被显示为一整页。然而，当我包括我的Ajax.BeginForm块一个提交按钮，并触发提交按钮的动作，它的功能如预期...

代码

控制器

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

查看

@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")

管窥

@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>

那么为什么我的SearchResult所表未呈现为局部视图？

我已经列入我_layout鉴于这些脚本：

<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>

来源

2012-05-12 Peter

在您的下拉菜单代替：

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

有：

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

也摆脱所有MicrosoftAjax*.js脚本。这些都是完全遗留的，不应该用在ASP.NET MVC 3和更新的应用程序中。如果您从旧版本迁移，则仅为兼容性原因提供它们。 jQuery.js和jquery.unobtrusive-ajax.js就足够了。

来源

2012-05-12 21:40:23

+1是的..很好的解决方案 – shashwat

这真的很愚蠢..我只失去了2小时只为这大声笑。谢谢 –

不知道如果我的理解是正确的，但如果提交按钮的工作原理确定为什么不只是这样做：

@Html.DropDownList("filterName", new SelectList(ViewBag.Names), "Select a name", new { onchange = "clickMe('mybuttonId')" })

，写小脚本

function clickMe(id) { 
    $('#' + id).click() // where id is id of button that should submit the form. 
}

如果你不想按钮显示然后只是隐藏它。这是一个黑客，如果它不符合您的需求，我们可以进一步调查。

来源

2012-05-12 21:34:42

Ajax.BeginForm替换整个页面平变化一个下拉列表

回答

相关问题