基于多个下拉值HTML部分呈现最好的策略 [英] Best strategy for HTML partial rendering based on multiple dropdown values

问题描述

我有一个观点，即呈现这样的：

I have a View that renders something like this:

项目1和项目2＆LT; TR方式＆gt; 从表元素

"Item 1" and "Item 2" are <tr> elements from a table.

在用户变值1或值2，我想打电话给一个控制器，并把结果（一些HTML片段）的标记为 DIV 的结果... 的。

After the user change "Value 1" or "Value 2" I would like to call a Controller and put the result (some HTML snippet) in the div marked as "Result of...".

我有JQuery的一些模糊概念。我知道如何绑定到选择元素的的onchange 事件，并调用 $阿贾克斯（）的功能，例如

I have some vague notions of JQuery. I know how to bind to the onchange event of the Select element, and call the $.ajax() function, for example.

但我不知道这是否可以在ASP.NET MVC2更有效的方式来实现。

But I wonder if this can be achieved in a more efficient way in ASP.NET MVC2.

推荐答案

下面是我取得了巨大成功使用的方法的例子：

Here is an example of the method I use with great success:

在View：

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

以上code概括的基本策略。你当然会想调整它多泛音和多种形式。

The above code outlines the basic strategy. You will, of course want to tweak it for multiple partials and multiple forms.

这篇关于基于多个下拉值HTML部分呈现最好的策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！