ASP.NET MVC 2 Cookbook

1. The first step for us to get a product displayed on a page is to create a new view page. To do this, open the Views folder and then open the home folder. Right-click on the home folder and select Add | View. When the Add View window pops up, enter Product in the View name box. Then click on Add.

2. Once we have our new view page in place, we need to open the Home controller and add a new Product action so that we can handle requests for our Product view. To do this, open the Controllers folder and then open the HomeController.cs file. Just inside the class, you can create your new Product action method.

Controllers/HomeController.cs:

public class HomeController : Controller
{
public ActionResult Product()
{
return View();
}
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
...
}

3. Now hit F5 to verify that your Product action is correctly wired to your Product view.

If you see the Debugging Not Enabled pop-up, go ahead and click on OK!

4. Then add Home/Product to the end of the URL. Your URL should look something like this: http://localhost:63241/Home/Product.

5. Now let's quickly wire up a product and throw it out to the view. To start, you can close the browser window. Click on the square icon in Visual Studio to stop the debugging process. Then go back to your home controller and Product action. Add these using statements to the top of your HomeController.cs file.

Controllers/HomeController.cs:

using FizzWare.NBuilder;
using WorkingWithTheView.Models ; WorkingWithTheView.Models;

6. Then in your Product action you can add this line.

Controllers/HomeController.cs:

public ActionResult Product()
{
ViewData["ProductName"] = Builder<Product>
.CreateNew()
.Build()
.ProductName;
return View();
}

7. With this code in place you can now switch to your Views/Home/Product.aspx file. In here, all you need to do is render the ProductName to the view. Add this code to your view.

Views/Home/Product.aspx:

...
<h2>Product</h2>
<%= ViewData["ProductName"] %>
...

8. Now you should be able to hit F5 again and see the generated product name rendered in the view.

1. The first thing that we need to do is open the Views/Home folder and then open the Product.aspx file.

2. Now we will modify the Inherits page attribute. We need to change our view so that it inherits from System.Web.Mvc.ViewPage<Product>. By doing this we are telling the view that it will be working with an instance of Product. In order for us to gain access to this Product instance, the MVC framework will provide us with a Model property that exposes the Product instance, which is passed down to the view by the controller.

Views/Home/Product.aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<Product>" %>
<%@ Import Namespace="{project name}.Models" %>

Also notice that the previous listing has an Import statement to reference our Product class.

3. Now you can go to your HomeController. In the Product action we will change from passing a Product instance into ViewData and the ViewData out to the view. Instead, we will just pass that Product instance directly to the view. Do this by creating a Product variable (p) and remove the property reference to ProductName.

Controllers/HomeController.cs:

public ActionResult Product()
{
Product p = Builder<Product>
.CreateNew()
.Build();
//remove the reference to the ProductName here!
return View(p);
}

4. With that completed, you can switch back to your Product.aspx view. We now need to change the way we refer to the data that is passed to the view by the controller. Instead of using the built-in ViewData dictionary directly, we will now reference the Model property that is exposed by a strongly typed view.

Views/Home/Product.aspx:

<h2>Product</h2>
<%= Model.ProductName %>

When typing this you should now have full blown IntelliSense to the specified Model of your strongly typed view.

5. You should now be able to hit F5 and build and run your site. It should look identical to the previous recipe.

1. The first thing we are going to do is create a simple Category class in the Models directory.

Models/Category.cs:

public class Category
{
public string Name { get; set; }
public int Id { get; set; }
}

2. Next we need to create a view model. Generally, a view model is named for the view that uses it. In this case, we will be passing the view model out to our Product view, so we will call this view model the ProductView (or we can call it ProductViewModel). It will be responsible for carrying our Product and Category objects. Create a new ProductView class in the Models directory.

Models/ProductView.cs:

public class ProductView
{
public Product CurrentProduct { get; set; }
public Category CurrentCategory { get; set; }
}

3. With these two new classes created, we can open up our Product.aspx view page. We need to update it so that the view page inherits from the System.Web.Mvc.ViewPage<ProductView>.

Views/Home/Product.aspx:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ProductView>" %>
<%@ Import Namespace="{project name}.Models" %>

4. Next, we need to update our Product.aspx view so that, instead of trying to display the ProductName directly off of the view's Model, we instead call the Product class in the Model and then the ProductName. Then we can output the current category's name too.

Views/Home/Product.aspx:

<h2><%= Model.CurrentCategory.Name %></h2>
<%= Model.CurrentProduct.ProductName %>

5. Finally, we need to wire up the data that will be passed from our HomeController to our view. Do this by opening up the HomeController.cs file. Then add code to instantiate a new Category. After this, add the new Category and Product to a new instance of a ProductView object and return that ProductView instance to the view.

Controllers/HomeController.cs:

public ActionResult Product()
{
Product p = Builder<Product>
.CreateNew()
.Build();
Category c = Builder<Category>
.CreateNew()
.Build();
ProductView pv = new ProductView();
pv.CurrentCategory = c;
pv.CurrentProduct = p;
return View(pv);
}

6. Now you can hit F5 and see your site open up and display the current category and current product.

1. First, we need to go into the Views/Home folder and create a new folder called DisplayTemplates.

2. Next, we need to create a partial view that will hold the display logic for the product's cost property. Right-click on the DisplayTemplates folder in the Views/Home folder and select Add View.

3. Name your view Product.Cost and then select the Create a partial view (.ascx) checkbox.

4. Now open up your new partial view and add some code to format the cost of a product (a Double). The Model reference in this code will be whatever value you feed this snippet later.

Views/Home/DisplayTemplates/Product.Cost.ascx:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%= String.Format("{0:C}", Model)%>

5. Now open up your Product.aspx view page. Under the place where the ProductName is currently displayed, we will display the Cost property and specify with a hint which template we want to use.

Views/Home/Product.aspx:

<h2><%= Model.CurrentCategory.Name %></h2>
<%= Model.CurrentProduct.ProductName %>
<%= Html.DisplayFor(Double=>Model.CurrentProduct.Cost, "Product.Cost") %>

6. Hit F5 and see your cost property formatted appropriately!

1. Start by creating a new MVC application.

2. Then we will create a quick (simple) object model that will contain a Cart, Address, Product, Account, OrderHeader, and LineItem, which we will use to populate a cart display page.

Models/Cart.cs:

public class Cart
{
public OrderHeader Header { get; set; }
public List<LineItem> Items { get; set; }
public double Total
{
get { return Items.Sum(i => i.SubTotal); }
}
}

Models/Address.cs:

public class Address
{
public string Street1 { get; set; }
public string Street2 { get; set; }
public string City { get; set; }
public int Zip { get; set; }
public string State { get; set; }
}

Models/Product.cs:

public class Product
{
public double Price { get; set; }
public string Name { get; set; }
public double Tax { get; set; }
}

Models/Account.cs:

public class Account
{
public string Username { get; set; }
public string Email { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}

Models/OrderHeader.cs:

public class OrderHeader
{
public Account Account { get; set; }
public Address Billing { get; set; }
public Address Shipping { get; set; }
}

Models/LineItem.cs:

public class LineItem
{
public Product Product { get; set; }
public int Quantity { get; set; }
public double SubTotal
{
get
{
return ((Product.Price * Product.Tax) + Product.Price) * Quantity;
}
}
}

3. With this model created, we are now ready to create some fake data. We will do this by creating a CartFactory class, which we will use to generate the data and create a fully populated instance of our Cart object. We will create a GetCart method where we will create an instance of all the classes that we need to display in our cart.

Models/CartFactory.cs:

public Cart GetCart()
{
Cart c = new Cart();
c.Header = new OrderHeader();
c.Header.Account = new Account()
{
Email = "asiemer@hotmail.com",
FirstName = "Andrew",
LastName = "Siemer",
Username = "asiemer"
};
c.Header.Billing = new Address()
{
City = "Lancaster",
State = "CA",
Street1 = "Some Street",
Street2 = "Apt 2",
Zip = 93536
};
c.Header.Shipping = new Address()
{
City = "Fresno",
State = "CA",
Street1 = "This street",
Street2 = "Front step",
Zip = 93536
};
List<LineItem> items = new List<LineItem>();
for (int i = 0; i < 10; i++)
{
Product p = new Product();
p.Name = "Product " + i;
p.Price = 2*i;
p.Tax = .0875;
LineItem li = new LineItem();
li.Product = p;
li.Quantity = i;
items.Add(li);
}
c.Items = items;
return c;
}

4. Now that we have our model and a factory class to generate the data that we need, we are ready to start creating the partial views we need. While we could manually create views for each of our objects, there is a much quicker way—we can create actions in our HomeController that returns an instance of an object from which we can generate a View. By doing this, we can quickly generate the markup that is required to display each of our Cart classes. To do this, open up the HomeController and add an Address() ActionResult. In this method, we will return a new instance of Address.

Controllers/HomeController.cs:

public ActionResult Address()
{
return View(new Address());
}

5. Then we can generate a new partial Address details view that is strongly typed, based on the Address model.

Views/Home/Address.ascx:

<fieldset>
<legend><%: ViewData["AddressType"] %></legend>
<div class="display-label">Street1</div>
<div class="display-field"><%: Model.Street1 %></div>
<div class="display-label">Street2</div>
<div class="display-field"><%: Model.Street2 %></div>
<div class="display-label">City</div>
<div class="display-field"><%: Model.City %></div>
<div class="display-label">State</div>
<div class="display-field"><%: Model.State %></div>
<div class="display-label">Zip</div>
<div class="display-field"><%: Model.Zip %></div>
</fieldset>

6. Now we can do the same thing for a list of Cart items. We will add an action called Items in the HomeController that returns a List<LineItem>.

Controllers/HomeController.cs:

public ActionResult Items()
{
return View(new List<LineItem>());
}

7. Then we can generate another strongly typed partial view called Items that will be based on an enumerable list of LineItem. We will also add a couple of columns to the generated view to display the name and price.

Views/Home/Items.aspx:

<table style="width:600px;">
<tr>
<th></th>
<th>
Name
</th>
<th>
Price
</th>
<th>
Quantity
</th>
<th>
Sub Total
</th>
</tr>
<% foreach (var item in Model) { %>
<tr>
<td>
Delete
</td>
<td>
<%: item.Product.Name %>
</td>
<td>
<%: String.Format("{0:C}", item.Product.Price) %>
</td>
<td>
<%: item.Quantity %>
</td>
<td>
<%: String.Format("{0:C}", item.SubTotal) %>
</td>
</tr>
<% } %>
</table>

8. With our partial views created and the ability to get a populated Cart class, we are now ready to display our shopping cart and all of its complexity. We will start by adding another ActionResult called DisplayCart. This result will return a new instance of a Cart, which we will get from our CartFactory class that we created earlier.

Controllers/HomeController.cs:

public ActionResult DisplayCart()
{
Cart c = new CartFactory().GetCart();
return View(c);
}

9. Then we can generate a strongly typed empty view called DisplayCart. Inside of this view we will display the user's first and last name, as well as their e-mail address. We will then load the Address partial view and pass in the billing address. Next we will load the Address partial view and pass in the shipping address. The last view we will load is the Items partial view, which we will pass in the collection of LineItems. At the end of this view, we will display the total cost of the shopping cart.

Views/Home/DisplayCart.aspx:

<h2>Display Cart</h2>
<div>
<%: Model.Header.Account.FirstName %>
<%: Model.Header.Account.LastName %><br />
<%: Model.Header.Account.Email %>
</div><br />
<table style="width:600px">
<tr>
<td>
<% Html.RenderPartial("Address", Model.Header.Billing, new ViewDataDictionary() {new KeyValuePair<string, object>("AddressType", "Billing")}); %>
</td>
<td>
<% Html.RenderPartial("Address", Model.Header.Shipping, new ViewDataDictionary() {new KeyValuePair<string, object>("AddressType", "Shipping")}); %>
</td>
</tr>
</table>
<% Html.RenderPartial("Items", Model.Items); %>
<br />
<div>
<b>Total:</b> <%: String.Format("{0:C}", Model.Total ) %>
<div>

10. You are now ready to run the application. You can then navigate to the /Home/DisplayCart view, where you should see something of this nature:

1. Create a new MVC application.

2. Then we will create a quick model to play with. We need two distinctly different models to be able to demonstrate why we would need to render one action from within another. We will create a Post class to represent some blog posts. And we will create a Product class to represent a list of suggested products, which we will display next to our blog posts.

Models/Post.cs:

public class Post
{
public DateTime Created { get; set; }
public string Title { get; set; }
public string Body { get; set; }
}

Models/Product.cs:

public class Product
{
public string Name { get; set; }
public string Description { get; set; }
public double Cost { get; set; }
}

3. Then we need to create a couple of service classes from which we will generate a list of our new object models. We will create a ProductService class and a BlogService class. Each of these classes will have Get methods on them to get a list of the specific objects we need.

Models/BlogService.cs:

public class BlogService
{
public List<Post> GetPosts(int count)
{
List<Post> result = new List<Post>();
for (int i = 0; i < count; i++)
{
Post p = new Post();
p.Created = DateTime.Now;
p.Title = "A really great post";
p.Body = @"Lorem ipsum dolor sit amet, ...";
result.Add(p);
}
return result;
}
}

Models/ProductService.cs:

public class ProductService
{
public List<Product> GetProducts(int count)
{
List<Product> result = new List<Product>();
Random r = new Random();
for (int i = 0; i < count; i++)
{
Product p = new Product();
p.Cost = r.Next(5, 50);
p.Name = "Really great product";
p.Description = @"Lorem ipsum ...";
result.Add(p);
}
return result;
}
}

4. Now that we have the ability to generate a list of working data, we can next turn our attention to creating two controllers to handle views for each of our two object types. We will create a BlogController and a ProductController. The BlogController will expose an Index action to show a list of recent blog posts. The ProductController will have a SuggestedProducts action that will return a list of products.

Models/BlogController.cs:

public class BlogController : Controller
{
public ActionResult Index()
{
return View(new BlogService().GetPosts(5));
}
}

Models/ProductController.cs:

public class ProductController : Controller
{
public ActionResult SuggestedProducts()
{
return View(new ProductService().GetProducts(7));
}
}

5. The next thing for us to do is to generate a view for each of our controllers. We will start with the ProductController, as its view is the easiest. For this controller, we will generate a strongly typed partial view based on a Product using the details view. Once the view is generated, we have to change the model from a single instance of Product to a List of Product. Then we need to wrap the details view that was generated with a loop.

Views/Product/SuggestedProducts.aspx:

<%@ Page Title="" Language="C#" Inherits= "System.Web.Mvc.ViewPage<List<MvcApplication1.Models.Product>>" %>
<%@ Import Namespace="MvcApplication1.Models" %>
<fieldset>
<legend>Suggested Products</legend>
<% foreach (Product p in Model) { %>
<div class="display-field"><b><%: p.Name%></b></div>
<div class="display-field">
<i><%: String.Format("{0:C}", p.Cost)%></i>
</div>
<div class="display-field"><%: p.Description%></div>
<% } %>
</fieldset>

6. Now we need to generate our primary view, which will be responsible for showing a list of blog posts. In addition to displaying blog posts, we will also render the list of suggested products. Similar to our previous view, we will start by generating the view from the Index action of the BlogController. This will be a strongly typed details view based on the Post class. Once it is generated, we will need to wrap the generated view code with a table so that the list of blog posts can sit next to a list of suggested products. I also added a bit of styling to get things to line up a bit better.

Views/Blog/Index.aspx:

<h2>My Blog</h2>
<table style="width:800px;">
<tr>
<td style="width:200px;vertical-align:top;">
<!-- Suggested products... -->
</td>
<td style="vertical-align:top;">
<fieldset>
<legend>Recent Posts</legend>
<%
foreach (Post p in Model)
{ %>
<div class="display-field"><b><%: p.Title%></b></div>
<div class="display-field"><i>
<%: String.Format("{0:g}", p.Created)%></i></div>
<div class="display-field"><%= p.Body%></div>
<% } %>
</fieldset>
</td>
</tr>
</table>

7. Now that we have our primary view created, we can turn our attention to rendering a list of suggested products. All that we need to do is add a call to Html.RenderAction where we currently have this comment <!-- Suggested products...-->. In order to make this call, we only need to specify the name of the action and the controller that we want to render.

Views/Blog/Index.aspx:

...
<td style="width:200px;vertical-align:top;">
<% Html.RenderAction("SuggestedProducts", "Product"); %>
</td>
...

8. Now you can run the application. Navigate to /Blog/Index and you should see a list of blog posts. Next to that you should also see a list of suggested products. Notice that our blog controller didn't have to know anything about products in order for it to use the SuggestedProducts view. This is the power of the RenderAction helper method.

1. The first step to this project could be a number of things! Let's get started by adding a reference to the NVelocity library (NVelocity.dll) in the dependencies folder.

2. Next we need to set up a quick database to use in the steps ahead. Do this by right-clicking on the App_Data folder in your project and select Add a new item. Choose a SQL Server database. I named my database Templates.

3. Now in your Server Explorer window you should see under the Data Connections section a Templates.mdf entry. Expand that entry. Right-click on the tables folder and add a new table.

4. Then we will add LINQ to SQL to our project. Do this by right-clicking on the Models folder and select Add new item. Select the LINQ to SQL Classes entry and name it Template.dbml.

5. When the design surface opens, drag your Template table from the server explorer onto the design surface. Save that file and close it. Then build your project (this builds the TemplateDataContext class for you, which we will need in the following steps).

6. Right-click on the Templates.mdf entry in the server explorer and select Properties. In the Properties window, select and copy the entire connection string entry. It should look something like this:

Data Source=.\SQLEXPRESS;AttachDbFilename={driveLetter}:\{pathToFile}\Templates.mdf;Integrated Security=True;User Instance=True

7. Now create a new class in the Models directory called TemplateRepository.cs. In this class, we will create a method called GetTemplateByViewName, which will be responsible for getting a template from the database by the template's name.

Models/TemplateRepository.cs:

public class TemplateRepository
{
public string GetTemplateByViewName(string ViewName)
{
string connectionString = @"Data Source=.\SQLEXPRESS;AttachDbFilename= {FilePathToDataBase}\Templates.mdf;Integrated Security= True;User Instance=True";
string result = "";
using(TemplateDataContext dc = new TemplateDataContext(connectionString))
{
Template template = (from t in dc.Templates where t.ViewName == ViewName select t).FirstOrDefault();
result = template != null ? template.TemplateContent : "The requested template was not found for view " + ViewName;
}
return result;
}
}

8. Now we can create a class that will work with NVelocity to parse our template. Right-click on the Models folder and add a new class called TemplateService.cs. This class will have a method called ParseTemplateByViewName. This method will be responsible for interacting with the NVelocity view engine to parse a passed in template.

Models/TemplateService.cs:

public class TemplateService
{
public string ParseTemplateByViewName(string template, Dictionary<string,object> viewParams)
{
VelocityContext vc = new VelocityContext();
foreach (var v in viewParams)
{
vc.Put(v.Key, v.Value);
}
//create the engine
VelocityEngine ve = new VelocityEngine();
ve.Init();
//the output stream
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
//merge the template
ve.Evaluate(vc, sw, string.Empty, template);
return sb.ToString();
}
}

9. Now we need to add some code to our HomeController. Let's start by creating a new action called AnotherProduct(). Inside this action, we will still utilize the creation of a Product and a Category. And we will use our ViewModel as our transport object, which will carry the Product and Category instance for us. Then we need to create a dictionary that will take the variables we used in the parsing of our template. Lastly, we will call our TemplateService to parse out the template that the TemplateRepository locates for us.

Controllers/HomeController.cs:

public ActionResult AnotherProduct()
{
Product p = Builder<Product>
.CreateNew()
.Build();
Category c = Builder<Category>
.CreateNew()
.Build();
ProductView pv = new ProductView();
pv.CurrentCategory = c;
pv.CurrentProduct = p;
//define the variable context
Dictionary<string, object> variableParams = new Dictionary<string,object>();
variableParams.Add("ProductView", pv);
ViewData["content"] = new TemplateService()
.ParseTemplateByViewName(new TemplateRepository().GetTemplateByViewName("AnotherProduct"), variableParams);
return View();
}

10. Then you can create the AnotherView view. This will be an empty view that simply renders the content from within ViewData.

Views/Home/AnotherProduct.aspx:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%= ViewData["content"] %>

11. Lastly, before anything will actually come together, we need to add an entry into our database. The TemplateContent entry will look like this:

<html><head><title>$ProductView.CurrentProduct.ProductName</title></head><body><h2>$ProductView.CurrentProduct.ProductName</h2>Hello world from an NVelocity template!</body></html>

The ViewName will be AnotherProduct to match our AnotherProduct action.

12. Now you can start debugging by hitting F5 and see the results of our database-driven view.

1. First, make sure you have a good copy of the JSON.NET libraries in the dependencies folder. Then add a reference to it from your project.

2. Then open up your HomeController. Add an action called ProductJson. This method will generate some JSON for you, using your existing Product and Category data. Then enter the following code (notice that this is almost identical to the previous recipes except for the highlighted JsonConvert call).

Controllers/HomeController.cs:

public ActionResult ProductJson()
{
Product p = Builder<Product>
.CreateNew()
.Build();
Category c = Builder<Category>
.CreateNew()
.Build();
ProductView pv = new ProductView();
pv.CurrentCategory = c;
pv.CurrentProduct = p;
ViewData["ProductView"] = JsonConvert.SerializeObject(pv);
return View();
}

3. Now you need to add a new view in the Views/Home folder that this action will pass its data down to. Name this view ProductJson.aspx to correspond to the action that you just created.

4. Open up the new view and then add a call into the ViewData for the ProductView JSON that you just created.

Views/Home/ProductJson.aspx:

<%= ViewData["ProductView"] %>

5. Next you need to make sure that you have a reference to jQuery in your master page. Open the Views/Site.Master file. Then locate the jquery script file in the Scripts directory, and drag it into the head of your master page.

6. Now, focus on the rendering side of this problem. Open up the Product.aspx view—in there you will need to add a new div tag to output your JSON to. Then you will need to add some JavaScript to make a request for your ProductView JSON and output it to the div tag.

Views/Home/Product.aspx:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="result"></div>
<script>
$(document).ready(
$.getJSON('http://localhost:6324/home/productjson', function (data) {
$('#result').html('<p>' + data.CurrentProduct.ProductName + '</p>');
}
)
);
</script>
</asp:Content>

7. Hit F5 and see the result!