MVC3: как правильно вызвать Ajax для обновления PartialView

У меня есть 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);
}

У меня есть View и PartialView (ПРИМЕЧАНИЕ: я не использую Razor!)

Вид выглядит так:

<%@ 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 (люблю Razor за этот беспорядок, кстати), и там все работает.

ПРИМЕЧАНИЕ. Это сторонний продукт, который я расширяю, поэтому не позволяйте себе роскошь конвертировать все в Razor.


person Keith Barrows    schedule 06.09.2011    source источник


Ответы (1)


В вашем html должны быть ссылки на оба следующих файла. Я думаю, что есть альтернатива jQuery ... но ссылка на оба этих файла JavaScript (которые, вероятно, уже есть в вашем решении MVC) должна решить вашу проблему.

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
person David Spence    schedule 06.09.2011
comment
Интересно. Я добавил эти 2 ссылки, и все работает. Могу поклясться, что где-то читал, что все, что вам нужно, это: ‹script src = Scripts / jquery.unobtrusive-ajax.min.js type = text / javascript› ‹/script› - person Keith Barrows; 07.09.2011
comment
Я не использовал MVC3, но в любом случае это то, что я сделал в MVC2. Посмотрел в Google после вашего ответа. Согласно это, похоже, если вы используя ненавязчивый скрипт jQuery, вам нужно включить его в web.config. - person David Spence; 07.09.2011
comment
Я почти уверен, что включил его, но, учитывая скорость, с которой я собираюсь участвовать в этом проекте, я, возможно, пропустил это. Когда у меня будет несколько минут, я поиграю с настройками web.config. Кроме того, в моем файле web.config сейчас всего 1177 строк. :) - person Keith Barrows; 07.09.2011