How to split relational MVC data

Question

Consider this scenario:

I want to create an MVC application for the Northwind database. I want to have a view that lists some orders, and I want to create links for CustomerID and EmployeeID and a link to details for [OrderDetails] so that when a user clicks on any of these links, related data appears on the same page.

My problem is how to separate this data, which is interconnected with the views and controllers that show the related data on the page, and the controllers responsible for individual pieces of information.

Also, how do I configure routing for this sample?

<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> 

and partial view of the order detail:

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

Given this structure; How can I display order details in the order list when I click any of the OrderDetails links?

And why the url is displayed like this when I click on OrderDetails links:

 http://localhost:49444/NorthwindOrders/GetOrderDetails?id=10250 

I want the url to display as follows:

 http://localhost:49444/NorthwindOrders/GetOrderDetails/10250 

Answer 1

For your routing question:

if you configured this route:

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

It will create the url in the form you want.

(Alternatively, you can rename the parameter in the GetOrderDetails action to string OrderId , and it will find a route that formats the URL the way you want.)

Regarding your main question:

How can I “dynamically” load content on a page based on clicks on links?

There are two ways to approach this:

• Send back pages.
• AJAX / Dynamically load data and elements into HTML on your page.

In the scenario after feedback:

In this case, your links will be directed to the actions that create the model, which includes a list of orders from your main page, and for the details of the specific order that you clicked, you fill out your model with the specification for this order. Then your ActionResult response is the same view (or one that looks at least), and your view will use the PartialView Html helper to display the details.

OrderViewModel:

 public class OrderViewModel { public IList<Order> Orders {get;set;} public OrderDetail Details {get;set;} } 

OrderView.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 --%> 

OrderController:

 ... 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); } ... 

In an Ajax script:

The Ajax script is essentially the same, except that you hide the server callback in the ajax call and then reload the page or just the div with the content you want from html (or JSON) in the returned data of the ajax call.

The advantage of the Ajax approach is that you can specify a different action on a different controller for different parts of the page that you want to refresh.

Answer 2

Nima
you can do this using partial views or visualization actions, and json to display data
an example is an example: http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs

or a very popular option is the mapping action for the task in jquery.dialog ()

it's up to you how you want to continue pho

---

Revision:

My bad. From a logical point of view, this is so: It depends only on you how you want to go. (From my point of view)

Benefits of splitting logic:

• just to understand, since the controller is only associated with actions, for example: orders
• Can be used in other places if you need
• It is easy to test only small items, for example, one test test / device for the controller for orders only.
• Useful for more complex projects.

On the other hand,

• Store everything in one controller and separate the logic by region.
• All together, it is easy to see other methods and what they do.

Hope this is what you were looking for
CPO

Answer 3

Create URLs inside your list using Url.Action. This will build the links according to your routing configuration, so when you change the configuration, you will not get broken links.

As for appearing on the same page, you can use some form of ajax. Using jquery, you have something like this in your list displaying a list connected to the client, click:

 <script type="text\javascript"> $('#result').load('<%= Url.Action("CustomerDetails", "Customer", new { customerId = ViewModel["customerId"] }) %>'); </script> <div id="result"/> 

Without ajax, you need a parameter for your order list controller, for example, "displayCustomerId =", which will display the order list view to visualize the customer details:

 <% if(ViewData["displayCustomerId"] != null) %> <% Html.RenderAction("CustomerDetails", "Customer", new { customerId = ViewData["displayCustomerId"] }) %> <% } %> 

Both methods allow you to use a separate controller to service related data within the view for listing orders.