Introduction

The ASP.NET MVC Framework allows building a Web application
as a composition of three roles: Model, View, and Controller. The View role can be implemented in several ways. The popular view engines used in the ASP.NET
MVC 3 Framework are the Razor
View Engine and the Web Forms (ASPX) view engine. Other than that a
View can be implemented by accessing Controller
methods using jQuery. This article illustrates all these ways of implementation of Views in
an MVC application.

Creating the MVC application

First let’s create an MVC application and develop the Model and Controller parts. Create an empty MVC3 application.
Set the “View engine” as ASPX.

A project with the following folder structure will be created:

Creating the Model part

In order to create the Model, add the following class under the “Model” folder:

The method returns an ActionResult. Every method in a controller class returns an
ActionResult by default. An ActionResult is a return type of a controller
method, also called an action method. ActionResult encapsulates the result of an action method and is used to perform a framework level operation
on behalf of the action method.

Let’s modify the action method in order to return a list of Products using the Product model:

Once we are done with the Controller implementation, we are ready for routing the result to some view interface. Before that we need to
understand the routing construct of the MVC Framework.

Action methods, action results, and routing

Action methods and the routing system work together in every MVC application. MVC does this by using a set of conventions, defined as
routing patterns, in the global.asax.cs file. These patterns connect HTTP requests with controllers and action methods. As an HTTP Request enters the
routing system, it determines which controller should serve data to which view (if any).

In our example, the controller name is “Product” and the action name is “ProductList”. Our controller or action method doesn’t have
any parameters. So the URL for routing the result should be “Product/ProductList”.

Approach 1 - Implementing a View using the ASPX engine

As we are done with the Model and Controller implementation, now it’s time to implement the View. Build the project. Right
click in the Controller method and select “Add View”:

Let the View name be “ProductView”. Check “Create a strongly-typed view”. Select the model as
Product from the View data class dropdown. Don’t forget to
build the project before adding the View. Otherwise the View data classes would not be populated.

Select “View Engine” as ASPX(C#). Select “View Content” as “List”.

Through this screen, the ASP.NET MVC Framework helps us to implement the classic MVC design pattern in our application. We are passing the model as
the “View data
class” for the relevant view. Besides, we are getting the scope to selecting a “View Engine” in order to render the result returned by the Controller method.
In addition to that we can mention the representation structure for the View (List, Detail, etc.) in the “View content” section.

Click “Add” in order to add the View.

A new folder will be created with the controller name (Product), and the View file (“ProductView.aspx”) will be added in the same.

Modify the controller method in order to serve data to the newly created View “ProductView.aspx”.

Open the View file “ProductView.aspx”. As we have given the responsibility for rendering View to the ASPX engine, the layout has been developed using
ASP.NET’s existing .ASPX markup syntax, using <%= %> blocks:

Now that we are done with the View implementation, it’s time to develop an anchor page and access the View through its routing logic. Create an “aspx” page named
“default.aspx” under root and access the View through it. This page needs to be handled in a different way than normal ASPX pages. In order to achieve
MVC Framework behavior, the page is required to be handled by a special HttpHandler MvcHttpHandler.

Here we are getting the scope to select a different “View Engine” other than ASPX in order to render the result returned by the Controller method. As we have
chosen the Razor(CSHTML) engine, our View will be handled by the Razor View engine.

Click “Add” in order to add the View.

A new folder will be created with the controller name (Supplier) and the View
file (“SupplierView.cshtml”) will be added in the same. The View page is no more an
.aspx page but a .cshtml page.

Modify the controller method in order to serve data to the newly created View “SupplierView.aspx”.

Open the View file “SupplierView.cshtml”. As we have given the responsibility for rendering
the View to the Razor engine, the layout has been developed using Razor’s markup syntax, using
a @ character. Unlike <% %> code nuggets, Razor does not require you to explicitly close the code-block:

As per the routing pattern defined in Global.asax ("{controller}/{action}/{id}") the routing
URL for the Suppliers view page would be “Supplier/SupplierList”.s

Add a link in the default.aspx page in order to access the view using its routing construct as follows:

Set the “default.aspx” as the startup page and run the application.

Click the link in order to view the suppliers list rendered by the Razor View engine.

Approach 3 - Implementing a View using jQuery

In this section, we will implement the View role using jQuery. The View will be handled by
the ASPX engine, but we will not be using <% %> code nuggets for manipulating
the representation. Rather, we will access the Controller method using a jQuery/Ajax call and manipulate the values returned by the Controller method in the front-end.

In
order to create a Controller method, right click on the “Controller” folder,
then select Add - >Controller. Name the controller as OrderController.
Add a new action method GetOrderList in the controller.

The
method will return a list of orders using the Order model. In this case we will
wrap the returned result into JSON format. Hence the return type of the
Controller method is JsonResult. Also the Suppliers list object is being
passed into the Framework method Json. The method serializes the list
object into JSON format.

Right
click in the Controller method and select “Add View”. Set the View name as
“OrderView”. Un-check “Create a strongly-typed view”.

Select
“View Engine” as ASPX(C#). Set “View Content” as “Empty”.

In
the earlier implementations, we had passed a specific model to the View and
made our View strongly typed. But here we will access the Controller method
using an AJAX call from jQuery. So we are not required to pass any model.

Also,
in the earlier implementations we had selected “View content” as “List”.
Actually, we had selected a representation format and allowed ASPX or the Razor
View engine to manipulate the presentation layer with their native syntax (<%
%> or @). But here we will implement the presentation layer manually using
simple HTML.

A
new folder will be created with the controller name (Order), and the View file
(“OrderView.aspx”) will be added in the same.

Modify
the controller method in order to serve data to the newly created View “OrderView.aspx”.

public ActionResult OrderList()
{
return View("OrderView");
}

Now,
in order to call the controller method GetOrderList, we need to initiate
an AJAX call from the “OrderView.aspx” page. We will implement the AJAX call
using jQuery. First include the jQuery library. The “Script” folder in the
project consists of the jQuery library. Include the path of the “Script” folder in
order to get access to the jQuery library:

<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js">

The
Controller method GetOrderList will return the list of orders in JSON
format. We are required to parse the values from JSON and represent it using
an HTML table. For this we need to write a function using jQuery. Let’s write a
function CreateHTMLTableFromJSON in a separate
script file JQScript.js under the “Script” folder. Also, include the script
file in the “OrderView.aspx” page.

In
the above code the Controller method GetOrderList is being called by
the jQuery AJAX call. The JSON response returned by the method is being parsed to an
HTML table, by the client side function CreateHTMLTableFromJSON written in
jQuery. At the end, the
HTML table is appended to a “div” named “OrderGrid”.

As
per the routing pattern defined in Global.asax ("{controller}/{action}/{id}"), the routing
URL
for the Product view page would be “Order/OrderList”.

The
default.aspx page should have a link to access the View using its routing
construct as follows:

Set
“default.aspx” as the startup page and run the application.

Click
the link in order to view the orders list fetched using jQuery:

Sometimes in Internet Explorer, a few consecutive
refreshes are required for getting results from the jQuery AJAX call. In this case, please
try Firefox.

I
have tried to explore three different approaches for implementing the View role
in an MVC application. A specific approach between these should be adopted in
order to develop a robust View in the application.

Hi Sudeep,
I got the same error. But i fixed it.
It seems that the article is wrong in naming action result as "ProductList" when it must be same as view name "ProductView.aspx"

Please don't choose webform from the "Add new item" . Instead Choose "MV3 View Page" and name it as Default.aspx.
Moreover the article says to add code in load event of the Defalut.aspx.page. No need to add> because the MVC view page does not have code behind page.
In the Porductcontroller , Name the actionresult as "ProductView" instead of ProductList.
In the Global.asax , Please make the action value as "ProductView"

Please change "Productlist" as Productview in the Default.aspx as the following:

I see you are using JPEG and GIF images. GIF images suffer from dithering due to a limitation of 256 colors and JPEG images suffer from compression artifacts due to the fact that JPEGs use lossy compression (especially visible in screenshots with sharp edges and text).

For screenshots, I recommend using the PNG image file format. It uses lossless compression, can use 32-bit color (way more than 256 colors), and it the file size is comparable to GIF.