Displaying tabular data in a grid

In this recipe, we are going to tackle the usually quite complex task of displaying grid data for a collection of data objects. Rather than using a looping structure and manually configuring how the data should be displayed, we will instead use the MvcContrib grid. This gets us close to the traditional style of the ASP.NET grid.

How to do it...

  1. Start by creating a new empty ASP.NET MVC application.
  2. Then add references to MvcContrib and NBuilder.
  3. Next, we need to create a model to work with. In this case, we will work with the concept of a product. Add a new class to the Models directory called Product. Then add the following properties to represent our product.

    Models/Product.cs: 

    public class Product {
public Guid ProductID { get; set; }
public string ProductName { get; set; }
public double Price { get; set; }
}
  4. Then we need to add a new action to our HomeController called ListProducts. This action will be responsible for creating a collection of products with NBuilder and returning that collection to the view.

    Controllers/HomeController.cs: 

    public ActionResult ListProducts() {
List<Product> products = Builder<Product>.CreateListOfSize(10).Build().ToList();
return View(products);
}
  5. Build the project so that when we add our new view, we can create a strongly typed view of type Product. Then right-click on the new ListProducts action and add a view. Make this a strongly typed empty view based on Product. Change the Inherits declaration to be a list of products rather than just a Product.
    How to do it...
  6. Now we can drop in the grid from MvcContrib. Do this by importing MvcContrib.UI.Grid. Then drop a call to the grid.

    Views/Home/ListProducts.aspx: 

    ...
<%@ Import Namespace="MvcContrib.UI.Grid" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
ListProducts
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>ListProducts</h2>
<%= Html.Grid(Model) %>
</asp:Content>
  7. Next, we need to configure the columns and their data for the given model. In this case, we want to display the product's price, name, and ID.
    ...
<%= Html.Grid(Model).Columns
(c=>
{
c.For(m => m.Price);
c.For(m => m.ProductName);
c.For(m => m.ProductID);
}
) %>
...
  8. Now click, build, and run your application. Then navigate to Home/ListProducts to see the new grid.
    How to do it...

How it works...

MvcContrib extends an already robust framework with some great functionality. The Grid is no exception, simple but effective. The Grid extension helper iterates through a collection and outputs a table. What I really like a lot about this helper and the direction of .NET projects in general, is its fluent approach—the grid is created in the first method, and columns (using lambda expression) are applied in the second.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset