考虑这个场景:

我想为 Northwind 数据库构建一个 MVC 应用程序。我想要一个列出一些订单的 View ,我想创建 CustomerID 和 EmployeeID 的链接以及 [OrderDetails] 的详细信息链接,以便当用户单击这些链接中的任何一个时,相关数据将显示在同一页面中。

我的问题是如何将这些相互关联的数据解耦到在页面中显示相关数据的 View 和 Controller ,以及负责信息各个部分的 Controller 。

另外,我如何为这个示例配置路由?

<table width="500px">
    <tr>
        <th></th>
        <th>
            OrderID
        </th>
        <th>
            CustomerID
        </th>
        <th>
            EmployeeID
        </th>
        <th>
            OrderDate
        </th>
        <th>
            RequiredDate
        </th>
        <th>
            ShippedDate
        </th>
        <th>
            ShipVia
        </th>
        <th>
            OrderDetails
        </th>
    </tr>

<% foreach (var item in Model) { %>

    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.OrderID }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=item.OrderID })%> |
            <%: Html.ActionLink("Delete", "Delete", new { id=item.OrderID })%>
        </td>
        <td>
            <%: item.OrderID %>
        </td>
        <td>
            <%: item.CustomerID %>
        </td>
        <td>
            <%: item.EmployeeID %>
        </td>
        <td>
            <%: String.Format("{0:g}", item.OrderDate) %>
        </td>
        <td>
            <%: String.Format("{0:g}", item.RequiredDate) %>
        </td>
        <td>
            <%: String.Format("{0:g}", item.ShippedDate) %>
        </td>
        <td>
            <%: item.ShipVia %>
        </td>
        <td>
            <%: Html.ActionLink("OrderDetails", "GetOrderDetails", new { id = item.OrderID })%>
        </td>
    </tr>

<% } %>

</table>

<p>
    <%: Html.ActionLink("Create New", "Create") %>
</p>

<div>
    <p>
        <% Html.RenderPartial("GetOrderDetails"); %>
    </p>
    <%--<uc1:GetOrderDetails ID="GetOrderDetails1" runat="server" />--%>
</div>

和订单详细信息部分 View :
<table>
    <tr>
        <th></th>
        <th>
            OrderID
        </th>
        <th>
            ProductID
        </th>
        <th>
            UnitPrice
        </th>
        <th>
            Quantity
        </th>
        <th>
            Discount
        </th>
    </tr>

<% foreach (var item in Model) { %>

    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.OrderID }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=item.OrderID })%> |
            <%: Html.ActionLink("Delete", "Delete", new { id=item.OrderID })%>
        </td>
        <td>
            <%: item.OrderID %>
        </td>
        <td>
            <%: item.ProductID %>
        </td>
        <td>
            <%: String.Format("{0:F}", item.UnitPrice) %>
        </td>
        <td>
            <%: item.Quantity %>
        </td>
        <td>
            <%: item.Discount %>
        </td>
    </tr>

<% } %>

</table>

<p>
    <%: Html.ActionLink("Create New", "Create") %>
</p>

global.asax:
public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");



        routes.MapRoute(
            "Default2", // Route name
            "{controller}/{action}/{OrderId}/{CustomerID}", // URL with parameters
            new { controller = "NorthwindOrders", action = "Index", OrderId = UrlParameter.Optional, CustomerID = UrlParameter.Optional } // Parameter defaults
        );

        routes.MapRoute(
            "Default", // Route name
            "{controller}/{action}/{id}", // URL with parameters
            new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
        );
    }

鉴于这种结构;当单击任何 OrderDetails 链接时,如何在订单列表下显示订单详细信息?

而且,为什么当我单击 OrderDetails 链接时 URL 显示为这样:
http://localhost:49444/NorthwindOrders/GetOrderDetails?id=10250

我希望 URL 以这种方式显示:
http://localhost:49444/NorthwindOrders/GetOrderDetails/10250

最佳答案

对于您的路由问题:

如果您设置这样的路线:

    routes.MapRoute(
        "orderdetails", // Route name
        "{controller}/{action}/{id}", // URL with parameters
        new { controller = "NorthwindOrders", action = "GetOrderDetails", id = UrlParameter.Optional, CustomerID = UrlParameter.Optional } // Parameter defaults
    );

它将以您想要的方式构建 URL。

(或者,您可以将 GetOrderDetails 操作的参数重命名为 string OrderId,它会找到按照您希望的方式格式化 URL 的路由。)

至于你的主要问题:

如何根据对链接的点击“动态”加载页面上的内容?

有两种方法可以解决这个问题:
  • 回贴页面。
  • AJAX/动态加载页面 HTML 中的数据和元素。

  • 在回传场景中:

    在这种情况下,您的链接将全部转到构建模型的操作,该模型包含来自主页的订单列表,对于您单击的特定订单的详细信息,您将使用该订单的详细信息填充您的模型。然后您的 ActionResult 返回是相同的 View (或至少看起来相同的 View ),并且您的 View 将使用 PartialView Html 帮助程序来呈现详细信息。

    订单 View 模型:
    public class OrderViewModel
    {
      public IList<Order> Orders {get;set;}
      public OrderDetail Details {get;set;}
    }
    

    订单 View .aspx:
    <%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<OrderViewModel>" %>
    <%:Html.DisplayFor(m=>m.Orders)%> <%-- Displays the Table above listing orders --%>
    <%:Html.DisplayFor(m=>m.Details)%> <%-- Displays your custom view of the details --%>
    

    订单 Controller :
    ...
    public ActionResult List()
    {
      var model = new OrderViewModel { Orders = GetAllOrders(), Details = null };
      return View("OrderView", model);
    }
    
    public ActionResult GetOrderDetails(string OrderId)
    {
      var model = new OrderViewModel { Orders = GetAllOrders(), Details = GetOrder(OrderId) };
      return View("OrderView", model);
    }
    ...
    

    在 Ajax 场景中:

    Ajax 场景本质上是相同的,只是你在 ajax 调用中隐藏了服务器往返,然后重新加载页面,或者只是一个 div,在 ajax 的返回数据中包含你想要的 html(或 JSON)内容称呼。

    Ajax 方法的优点是您可以在不同的 Controller 上为要更新的页面的各个部分指定不同的操作。

    关于asp.net-mvc - 如何解耦关系MVC数据,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6010908/

    10-10 23:27
    查看更多