Лучшая стратегия для частичного рендеринга HTML на основе нескольких раскрывающихся значений

Question

У меня есть представление, которое отображает что-то вроде этого:

«Элемент 1» и «Элемент 2» являются <tr> элементами таблицы.

После того, как пользователь изменил «Значение 1» или «Значение 2», я хотел бы вызвать контроллер и поместить результат (некоторый фрагмент HTML) в div, помеченный как « Результат из ... * 1011». *».

У меня есть смутные представления о JQuery. Я знаю, как связать с событием onchange элемента Select и вызвать, например, функцию $.ajax().

Но мне интересно, может ли это быть достигнуто более эффективным способом в ASP.NET MVC2.

Answer 1

Вот пример метода, который я использую с большим успехом:

В представлении:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Namespace.Stuff>>" %>

<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
     $(document).ready(function(){
        $("#optionsForm").submit(function() {
            $("#loading").dialog('open');
            $.ajax({
                type: $("#optionsForm").attr("method"),
                url: $("#optionsForm").attr("action"),
                data: $("#optionsForm").serialize(),
                success: function(data, textStatus, XMLHttpRequest) {
                    $("#reports").html(data); //replace the reports html.
                    $("#loading").dialog('close'); //hide loading dialog.
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $("#loading").dialog('close'); //hide loading dialog.
                    alert("Yikers! The AJAX form post didn't quite go as planned...");
                }
            });
            return false; //prevent default form action
        });
    });
    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <div id="someContent">
        <% using (Html.BeginForm("Index", "Reports", FormMethod.Post, new{ id = "optionsForm" }))
          { %>

          <fieldset class="fieldSet">
            <legend>Date Range</legend>
            From: <input type="text" id="startDate" name="startDate" value="<%=ViewData["StartDate"] %>" />
            To: <input type="text" id="endDate" name="endDate" value="<%=ViewData["EndDate"] %>" />
            <input type="submit" value="submit" />
          </fieldset>

        <%} %>
    </div>

    <div id="reports">
        <%Html.RenderPartial("ajaxStuff", ViewData.Model); %>
    </div>

    <div id="loading" title="Loading..." ></div>
</asp:Content>

В контроллере:

public ActionResult Index(string startDate, string endDate)
{
    var returnData = DoSomeStuff();

    if (Request.IsAjaxRequest()) return View("ajaxStuff", returnData);
    return View(returnData);
}

Приведенный выше код описывает основные стратегии. Вы, конечно, захотите настроить его для нескольких частичек и нескольких форм.