Drag and Drop Categorized Item List with jQuery and ASP.NET MVC – Part 3

Views and Partial Views

This is part 3 of a series. In this post I’ll go through each of the Views (and the List controller). In part 4 I’ll go through the controller classes and how to use jQuery and AJAX to update the database.

We already have the three repository classes in the Models folder. Now we need to add three controller classes to the Controllers folder: ListController.cs, SectionController.cs (for categories) and ItemController.cs.

Next we’ll create a proper View for individual list records. For now we’ll continue to use the single hardcoded list record, so we’ll redirect from the Home controller/Index action to the List controller/Details action with the ID of 1. The List controller code is simply:

using CategorizedItemsListDemo.Models;

namespace CategorizedItemsListDemo.Controllers
{
    public class ListController : Controller
    {
        private ListRepository listRepo = new ListRepository();

        public ActionResult Details(long id)
        {
            List singleList = listRepo.GetById(id);
            return View(singleList);
        }
    }
}

For now we don’t need to code up anything in the Section and Item controller classes, so we’ll move on to the views. The parent view we’ll use is the List/Details view. Since we’ll be looping through to add child Section records to the List record, and child Item records to each Section record, we’ll create two “partial views” (one for individual sections, one for individual items). This way user interface markup can be encapsulated without being repetitive (remember DRY – don’t repeat yourself).

Coming from an ASP.NET WebForms background, I equate partial views to the MVC way of doing user controls. They in fact use the same .ascx extension. I also added them to the /Views/Shared folder so the MVC engine can easily locate them. To sum it up, here are the three views added and the containing code:

/Views/List/Details.aspx

<% for (int i = 1; i <= 4; i++) { %>
    <div class="grid_3 listColumn" id="col_<% =i %>">
        <% foreach (Section sec in Model.Sections.Where(s => s.ColumnNum == i).OrderBy(s => s.SortOrder)) { %>
            <% Html.RenderPartial("SingleSection", sec); %>
        <% } %>
    </div>
<% } %>

Here the outside loop is simply going through each of the four columns setting the id attribute to the record id for use in jQuery. The inner loop is going through each Section in the List record (referenced by “Model” since the view is bound to the List model class). It simply uses a Lambda expression to render the Sections in the correct columns in the correct order. Then it passes off each individual Section to the SingleSection partial view.

/Views/Shared/SingleSection.ascx

<div class="secBox" id="section_<%= Model.SectionId %>">
    <div class="secHeader">
        <h2 class="secName"><%= Html.Encode(Model.SectionName) %></h2>
    </div>

    <div class="itemBox">
        <ul class="itemList">
            <% foreach (Item item in Model.Items.OrderBy(i => i.SortOrder)) { %>
                <% Html.RenderPartial("SingleItem", item); %>
            <% } %>
        </ul>
    </div>
</div>

Here we’re basically applying the same format from the List view to the Section partial view. Each Section is surrounded by a div with the id attribute set to the record id. “Model” is now bound to the Section model class, which we then use to display the Section name and loop through child Item records. We display Items in the correct sort order using a Lambda expression, then pass off each Item record to another partial view.

/Views/Shared/SingleItem.ascx

<li class="itemRow" id="item_<%= Model.ItemId %>">
    <span class="itemName"><%= Html.Encode(Model.ItemName) %></span>
</li>

This partial view is the simplest (for now). Again the id attribute is set to the record id. After that we simply render the item name.

That’s it. Now the app is rendering real data using MVC views. Nothing is hardcoded. To get things looking like they did in the initial layout, I populated the SQL database with sample data.