Typed and Untyped Views

Published on by Inno Design

Hey Guys,

Howz  u doing ?

Now Lets Move Further…

In an ASP.NET MVC application, you pass data from a controller to a view by using view data and you have learnt about that in the last post of asp.net mvc..

you learned how to add items to the view data dictionary. There are two ways that you can use view data. First, you can use view data as an untyped dictionary. For example, the controller in Listing 1  returns a collection of products in its Index() action. And, the view in Listing 2 displays the collection by iterating through each item in the collection.

Listing 1 – Controllers\ProductController.cs


using System.Collections.Generic;
using System.Web.Mvc;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
public class ProductController : Controller
{
//
// GET: /Product/

public ActionResult Index()
{
// Create list of products
var products = new List<Product>();
products.Add(new Product(“Laptop computer”, 344.78m));
products.Add(new Product(“Bubble gum”, 2.00m));
products.Add(new Product(“Toothpaste”, 6.99m));

// Add products to view data
ViewData["products"] = products;

// Return view
return View();
}

}
}


Listing 2 – Views\Product\Index.aspx

 


<%@ Page Title=”" Language=”C#” MasterPageFile=”~/Views/Shared/Site.Master” Inherits=”System.Web.Mvc.ViewPage” %>
<%@ Import Namespace=”System.Collections.Generic” %>
<%@ Import Namespace=”MvcApplication1.Models” %>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
<% foreach (var item in (List<Product>)ViewData["products"])
{ %>
<li> <%= item.Name %> </li>
<% } %>

</asp:Content>


The view in Listing 2 is an untyped view. Notice that the products item from view data must be cast to a collection of product items before you can do anything with it.

 

Instead of using an untyped view, you can use a strongly-typed view. The controller in Listing 3 also returns a collection of products. However, in this case, the collection is assigned to the ViewData.Model property.

Listing 3 – Controllers\Product2Controller.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
public class Product2Controller : Controller
{
//
// GET: /Product2/

public ActionResult Index()
{
// Create list of products
var products = new List<Product>();
products.Add(new Product(“Laptop computer”, 344.78m));
products.Add(new Product(“Bubble gum”, 2.00m));
products.Add(new Product(“Toothpaste”, 6.99m));

// Add products to view data
ViewData.Model = products;

// Return view
return View();
}

}
}


Listing 4 – Views\Product2\Index.aspx

 


<%@ Page Title=”" Language=”C#” MasterPageFile=”~/Views/Shared/Site.Master” Inherits=”System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Product>>” %>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>

<% foreach (var item in Model)
{ %>
<li> <%= item.Name %> </li>
<% } %>

</asp:Content>


In Listing 3, the products are assigned to the ViewData.Model property. As an alternative to explicitly assigning data to the ViewData.Model property, you can pass the data to the View() method. In other words, the following two code blocks are equivalent :


// Assign products to Model

ViewData.Model = products;
return View();

// Assign products to Model

return View(products);


The view in Listing 4 is a typed view. In Listing 4, the Model property represents the collection of products as a collection of products. In other words, you don’t need to cast the view data to a collection of product items before you use the Model property.

The advantage of assigning a value to the ViewData. Model property is that you can cast the Model property automatically in a view. In a view, you can specify the type of object that the Model represents with the <%@ Page %> directive Inherits attribute.

This Inherits attribute casts the ViewData. Model property to an IEnumerable of Product.For this reason, in the body of the view, you do not need to cast the ViewData. Model property before looping through its items.

Creating Strongly Typed Views

Providing the proper value for the Inherits attribute for a typed view can be tricky.Because you don’t get any Intellisense for the Inherits attribute, you can easily make amistake, and your view generates an error.

Instead of creating a strongly typed view by hand, you can take advantage of the Visual Studio Add View dialog to create a strongly typed view automatically (see below Figure). You open this dialog by right-clicking a controller action and selecting the menu option Add View. Alternatively, you can right-click a folder located in the Views folder and select the menu option Add, View.

The Add View dialog includes a check box labeled Create a Strongly Typed View. If you check this check box, you can specify the view data class and the view content.

Note : The View Data Class drop-down list will be empty until you successfully build your application. It is a good idea to select the menu option Build, Build Solution before openingthe Add View dialog.

The View Data Class drop-down list enables you to pick a class from your project. The Inherits directive uses this class. For example, you can pick the Product class.

The View Content drop-down list enables you to pick the type of view that you want to create. Your options are Create, Details, Edit, Empty, and List. If you pick List, your viewdata model is cast to an IEnumerable of Products. Otherwise, if you pick any of the other options, your view data model is cast to a Product.

So We are done with the Typed and untyped Views….You Got the concept ?

If you have any Queries , Let us know…we would try our best to clarify it..

Hope this helps..

Published on ASP.NET MVC

Comment on this post