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>