New View or Partial View

Question

This is the situation:

I have an ASP.NET MVC 4 application. When I run the application I go to a page and the Index - action on the controller takes a Guid as id - parameter. With that id I get a list of items from a database and put it into a ViewModel. This ViewModel is passed to a View which lists all of the items as an ActionLink (could be changed if necessary). When I click one of the items I want to get a list of other items, based on the id of the selected link, and show this new list right next to the first list.

But this is my question (and where I've been stuck for 2 days): What is the best way to do this? Go to a new page or use a partial view. Because I have been trying a bit of both and clearly I must've done some things wrong because none seemed to work. I don't need any AJAX-stuff or helpers like that, only a correct way to get this done... :)

Thanks in advance!

Update: the code that I already have

View

@foreach (var order in Model.Orders)
{
    <p>@Html.ActionLink(order.Name,
                        "OrderItems",
                        "OrdersController",
                        new { id = order.Id },
                        null)
    </p>
}

@if (Model.Detail != null)
{
    @Html.Partial("_OrderItemsByOrder", Model)
}

Controller

public ActionResult Index(Guid id)
{
    var orders = Services.GetOrders(id);
    var viewModel = new OrdersViewModel { Orders = orders };
    return View(viewModel);
}

public ActionResult OrderItems(Guid id, OrdersViewModel model)
{
    var orderItems = Services.GetOrderLines(id);
    var viewModel = new OrdersViewModel
    {
        Orders = model.Orders,
        Detail = new OrderDetailViewModel { OrderItems = orderItems }
    };
    return PartialView(viewModel);
}

Answer 1

There are several ways you could achieve a master/detail page like this, there really is no best way to do this. AJAX may be the most elegant and user friendly, but it's by no means the "right" answer.

Looking at the code you posted, the simplest thing you could do is have one action method and one view.

public class OrdersViewModel
{
    public IEnumerable<Order> Orders { get; set; }
    public OrderItems SelectedOrderItems { get; set; }
}

public ActionResult Orders(Guid id, Guid? orderId)
{
    var model = new OrdersViewModel();
    model.Orders = Services.GetOrders(id);

    if (orderId != null)
    {
        model.SelectedOrderItems = Services.GetOrderLines(orderId);
    }

    return View(model);
}

The drawback with this rather basic approach is that you'll have possibly 2 Guids dirtying up your Url and this example doesn't verify that the orderId is actually owned by the (user?) Id - whatever the first Guid represents. You could handle this with a few lines of code though.

A more elegant way of handling this, if you don't mind your Url changing, is to stick with the second action method. I would hope you can determine the "owner" of an order detail from the detail itself, or in some way that wouldn't require you to pass this into the action method. This helps ensure that your view only shows details from the right master.

public ActionResult OrderDetails(Guid id /*the id of the order*/)
{
    var orderLines = Services.GetOrderLines(id);

    var model = new OrdersViewModel();
    //ideally you could get to the "owner id" of the order from the order lines itself
    //depending on how your domain model is set up
    model.Orders = Services.GetOrders(orderLines.Order.OwnerId); 
    model.SelectedOrderItems = orderLines;

    return View("Orders", model); //render the same view as the Orders page if like
}

Your view as listed in your question can largely stay the same. Render the action links that represent all of the orders. Then render the order details if there is one in the model:

@if (Model.SelectedOrderItems!= null)
{
    /* markup here or a render partial call */
}

If you are rendering the order details on other pages, you'll want to put your order details in a partial view so you don't duplicate any of your markup. If it's only rendered here, then there's really no reason why you couldn't have your markup right in this view.

Answer 2

I would suggest something like this:

1. You have a controller with an action. The action takes two parameters, one with your guid and one optional with some other id
2. You have your "mainview" that lists your items
3. In your controller, add one other action, this time with only one parameter, an id
4. Add another view, but this time, a partial view, that lists your other items

Action 1 puts a list with items in the viewmodel, and an optional id to render some other items.

Action 3 puts a list with some other items in the viewmodel

Action 1 renders view 2 and action 3 renders view 4. View 2 renders, if the viewmodel says so, action 3.

Basically, when no specific item is selected then execution chain will be like this: 1 => 2 => Done

But when an item is selected the chain will be like this: 1 => 2 => 3 => 4

(Of course, this is just one way of doing things..)

Answer 3

You'll likely (for user usability) want to use AJAX and pull down the list of the "other items" from an AJAX response (JSON likely, or Partial HTML page if you really want to avoid javascript)

If you really don't want to use AJAX, you could pull all of the items, and all of the "other items" and store them in "hidden" fields initially and do two select boxes.

http://www.plus2net.com/javascript_tutorial/dropdown-list.php

Example: http://www.plus2net.com/javascript_tutorial/dropdown-list-demo.php

I would honestly go with the AJAX option though unless people will be using each of the dropdowns often, or if the amount of options is very limited.

Ajax: http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php

And just want to point out, it doesn't need to be dropdown boxes that are used to select / populate, you'd just have to change the code around to populate a div or whatever element you want :)