MVC3：如何正确地调用Ajax更新PartialView

Question

我有2个动作在我的控制器：

// GET: /Directory/ 
public ActionResult Index() 
{ 
    ViewModels.DirectoryIndex model = new ViewModels.DirectoryIndex(); 
    return View(model); 
} 

// POST: /Directory/Filter/[viewModel] 
[HttpPost] 
public ActionResult Filter(ViewModels.DirectoryIndex viewModel) 
{ 
    int distance = 0; 
    string state = string.Empty; 

    if (viewModel.SelectedDistance > 0) 
     distance = viewModel.SelectedDistance; 
    else if (viewModel.SelectedState > 0) 
     state = viewModel.States.Where(a => a.Value == viewModel.SelectedState.ToString()).FirstOrDefault().Text; 

    // TODO: Add filter activities here... 

    return PartialView("IndexPartial", viewModel); 
} 

我有一个观点和一个PartialView（注：我没有使用剃刀）

的视图的样子：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RainWorx.FrameWorx.MVC.ViewModels.DirectoryIndex>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> 
    <div class="Column12"> 
     <div class="Shadow"></div> 
     <h2 class="h2row"><%= Model.PageTitle %></h2> 

     <% using (Ajax.BeginForm("Filter", new AjaxOptions { UpdateTargetId = "filteredList" })) { %> 
     <div class="searchDirectory"> 
      <label title="State">State:&nbsp;</label> 
      <%= Html.DropDownListFor(a => a.SelectedState, Model.States, "-- Select One --", new { @id = "ddlStates" })%> 
      &nbsp;&nbsp;-or-&nbsp;&nbsp; 
      <label title="ZipCode">Zip Code within:&nbsp;</label> 
      <%= Html.DropDownListFor(a => a.SelectedDistance, Model.Distance, "-- Select One --", new { @id = "ddlDistance" })%> 
      <input type="text" id="myZip" name="myZip" /> 
      <input type="submit" value="Filter" /> 
     </div> 
     <% } %> 

     <div id="filteredList" class="businessCard"> 
      <% { Html.RenderPartial("IndexPartial", Model); } %> 
     </div> 

     <div style="height: 200px;"></div> 
    </div> 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server"> 
    <link type="text/css" href="Content/css/directory.css" rel="Stylesheet" /> 
    <script src="Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript" /> 
    <title><%= Model.PageTitle %></title> 
</asp:Content> 

的PartialView样子：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<RainWorx.FrameWorx.MVC.ViewModels.DirectoryIndex>" %> 

<% foreach (var d in Model.Dealers) { %> 
<div class="businessCard Outline"> 
    <div class="businessCard Logo"> 
     <img src="<%= Url.Content("~/Content/Images/Directory/logo01_150wide.png") %>" alt="Logo" /> 
    </div> 
    <div class="businessCard Info"> 
     <div class="businessCard Name"><%= d.Name %></div> 
     <div class="businessCard Address"><%= d.Address %></div> 
     <div class="businessCard City"><%= d.City %>, <%= d.State %> <%= d.ZipCode %></div> 
     <div class="businessCard Phone"><%= d.Phone %></div> 
    </div> 
</div> 
<% } %> 

现在，由于某种原因，当我选择一个要使用的过滤器并且提交时，它确实会调用第二个操作。但是，它不刷新PartialView，而是将PartailView呈现为全视图。在URL中：

1. 我开始于http://mysite.com/Directory - 选择我的过滤器，点击提交。
2. 我在http://mysite.com/Directory/Filter结束时，我预计结束在http://mysite.com/Directory！

我明显错过了一些简单的东西。我之前在Razor做过这件事（对这种混乱的爱剃刀）顺便说一下，这一切都在那里工作。

注意：这是我正在扩展的第三方产品，因此没有将所有内容都转换为剃须刀的奢侈品。

Answer 1

您需要在html中引用以下两个文件。我认为有一个jQuery替代方案...但引用这两个JavaScript文件（可能已经在您的MVC解决方案中）应该可以解决您的问题。

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>