Welcome back, this is part 3 of the MVC 3 / Razor storefront series. I have decided to make a change to the agenda. Instead of building out the entire storefront application, I will concentrate in building parts of it, noting that the real purpose of this exercise is to understand how to implement the various functionalities described in Part-1 of this series. In this post, we will do the following
§ Add a custom template, stylesheet and use the RenderSection method.
§ Add some data validation at the model level and have that reflected in the view.
§ Add localization support to the data validation.
§ Create a partial view for “New” products on the home page
§ Localizing this view
§ Creating an editor to edit an existing product (exercising the data validation defined at the model)
Add a custom template, stylesheet and RenderSection method
First, we are going to create, what is the Master Page in classic ASP.NET and is referred to as Layouts here in MVC land. We also have an associated site.css stylesheet to go with this Layout. The Layout template and css have been derived from the work done by http://www.nodethirtythree.com (Thanks AJ!!!). The attached download will have the necessary files.
Running the application will give you this
There are a few other things to note here.. mainly:
We are using 2 Html helpers @RenderBody() and @RenderSection(…) to provide the sort of functionality that content placeholders did in ASP.NET. We have a few sections defined. The @RenderBody() placeholder is where the main content coming from the views will be rendered; The @RenderSection(“LogonSection”) is where the logon partial control will be rendered when you click on log on and @RenderSection(“ProductSection”) is where a list of all new products will be displayed.
Displaying Products
Now, it is time to display the products on the home page. To do this, we first create a ViewModel which is basically a plain C# class that has a Products property that is of the generic type List<> which inherits from System.Collections.Generic IEnumerable. This allows for us to cycle through the products and display them on our homepage. We have decided to create a partial view for the products as this may be used in more places other than the home page. The ViewModel class, ProductsViewModel looks like this.
Now, the main View, Index is created for the HomeController and to it we pass the stongly typed ProductsViewModel as shown below
Now, right-clicking on the ActionResult, Index(), we add a strongly typed View called Index having it derive from the master layout, _Layout.cshtml
You will notice that within the Index View, we are rendering the Products into the placeholder within our master Layout page called ProductSection. To create this partial view, you can use the same view creation but will check the Partial View option and de-select the inheritance from any Master Layouts (this could lead into an interesting endless loop). This partial view is shown below.
Now when you run the application, you should see…
Notice that the main content (Index) is shown in the main area and the Product Listing (Lily Pond) is the partial view rendered in the placeholder for products. Also, notice there are two renderings of the _LogOnPartial View one on the side bar to the right and the other in the main Welcome message. This shows how convenient it is to have partial views that can be rendered in multiple places using the DRY spirit.
… … to be continued
