Introduction

In essence, there is more than that. ASP.NET MVC Beta has also created a new kind of ASP.NET Web Pages technology which includes a set of helper methods that are useful for adding commonly used functionality to views and controllers. ASP.NET MVC 3 supports using these helper methods within controllers and views (where appropriate). These methods are contained in the System.Web.Helpers assembly. With these helpers, ASP.NET MVC 3 tends to close that gap in the helpers area compared with other popular MVC frameworks.

This article aims to introduce the two commonly-used new helper controls – WebGrid and Chart using relevant examples.

The WebGrid Helper

In this section, we are more concerned about the WebGrid helper. Concretely, WebGrid provides paging and sorting functionality, as well as other goodies. This section will introduce how to use it in the ASPX view engine environment.

Create a sample project sketch

Suppose you've installed ASP.NET MVC 3 Beta. Now, start up your Visual Studio 2010 IDE to create an ASP.NET MVC 3 web application, naming it Mvc3WebGridTest_AspxVersion.

Add the ADO.NET Entity Data Model item template

Now, you will learn to how to use the Entity Data Model Wizard to generate an .edmx file, which contains a conceptual model, a storage model, and mapping information.

1. Right click Models, and then select New |New Item...

2. In then "Add New Item" dialog, from the Installed Templetes choose Data, and then from the right select ADO.NET Entity Data Model.

3. Type NorthwndModel.edmx for the model name and click Add. Then the Entity Data Model Wizard is displayed.

4. Select "Generate from database" in the "Choose Model Contents" dialog box. Then click Next.

5. If your Data Source is not ready, then click the "New Connection" button to select your data source. In my machine, I just need to select the target data source – zxzcom.Northwind.dbo from the "Choose Your Data Connections" dialog box.

6. Ensure that "Save entity connection settings in App.Config as:" is checked and the value is set to NORTHWNDEntities. Then click "Next". Afterwards, the "Choose Your Database Objects" dialog box is displayed.

7. Select the Products table and ensure that the value of Model namespace is NorthwindModel. Now, click the "Finish" button, and then the wizard will perform all the rest actions for you.

Till now, you have successfully generated the conceptual, storage, and mapping content for the NorthwindModel model in the Mvc3WebGridTest_AspxVersion project. Next, you will use action to create queries against the CLR objects that represent our interested entities and possible associations in the model.

Create an action in the Home controller

Now, let's create an action in the Home controller (this is for simplicity, you can create or select other controllers on the fly). But first of all, we should add the necessary namespace reference like the following:

Then, we set up a simple action named ListProducts, as shown in Listing 1.

Here, we first create an instance of the class NorthwindEntities which generally encapsulates the typical CRUD operations around the entity object Products and other related stuff. Then, we return a ViewResult, with the default view name parameter being the same as that of the action and the model parameter as a list of all product records.

Create the view

Now right click the preceding action ListProducts and select "Add View..." dialog box. Then in the "Add View" dialog box, set the name of the view to ListProducts. Note in the View engine related listbox control, the default is ASPX (C#). In this case, just keep all the other options as default, shown in Figure 1.

Figure 1: Create a view ListProducts using the default ASPX view engine

After clicking the "Add" button, you will notice the system automatically add a view named ListProducts.aspx under the subfolder Views\Home and opens it. In our case, we modified the view like the following.

The above code defined a grid in support of both pagination and sorting.

Moreover, there are still some points worth noticing. First, we've not utilized a strongly-typed class, but called the following:

Second, note the first parameter source of the helper WebGrid is of type Model. Here, the mysterious Model property, together with the above Inherits invocation, indicates to the MVC engine that the target model comes from NorthwindModel. In the later Chart helper related section you'll see another interesting topic relevant to the Model property.

Now, press Ctrl+F5 to start up the project and then in the address bar fill in the following url (the port number may differ in your machine) and press ENTER:

http://localhost:1700/home/listproducts

You will see something like Figure 2.

Figure 2: The WebGrid helper in action

More about the WebGrid helper

Let's look at the constructor of the WebGrid helper:

Listing 1: The WebGrid helper declaration

On the whole, the most commonly-used parameters in this helper are:

1. source: represents the data source.

2. columnNames: represents the displayed columns related names.

3. defaultSort: specifies the default sort means.

4. rowsPerPage: specifies the row number of data to be shown per page.

5. canPage: specifies whether to sort the records or not.

Till now, we've only scratched the surface of the strong WebGrid helper. So, all the rest deeper exploit of this great tool rests upon your readers. In the next section, we are going to introduce another helper – Chart.

The Chart Helper

As is well known, using the Chart web control in an ASP.NET WebForms application is easy to accomplish. Also, it's not difficult to achieve this in the ASP.NET MVC environment. One typical way is to use the ASP.NET Server control Chart defined in the System.Web.UI.DataVisualization.Charting namespace typically defined in the assembly C:\Program Files\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.0\System.Web.DataVisualization.dll. Of course, you can simply drag a Chart control onto the MVC .aspx view page. But it's not recommended to do so. A pretty decent approach to use the Chart control is found by Scott Mitchell in his article "Using Microsoft's Chart Controls In An ASP.NET Application: Using the Chart Controls with ASP.NET MVC" (see url http://www.4guysfromrolla.com/articles/092210-1.aspx). Another article by Michael Ceranski brought a similar way like Scott Mitchell's.

The Chart helper

To further simplify the above operations with the Chart control in an ASP.NET MVC Application, Microsoft introduced a new Chart helper bearing the similar features as the <asp:Chart> control in ASP.NET 4 – except now using view helper methods. In this section, we are just going to delve into it.

Like the ASP.NET Chart control, the Chart helper can render an image that displays data in a variety of chart types. It supports many options for formatting and labeling. The Chart helper can render more than 30 types of charts, including all the types of charts that you might be familiar with from Microsoft Excel or other tools - area charts, bar charts, column charts, line charts, and pie charts, along with more specialized charts like stock charts. Moreover, the Chart helper can take data source from a common array, an XML file, and database.

Now, let's take a look at the definition of the helper Chart disassembled using Object Browser.

Listing 2: Definition of the class Chart in Object Browser

Seen from above, the Chart helper provides strong support for output. As for detailed styled and legend related stuff, there is less support. Hence, you'd better refer to the ASP.NET Chart control related sub controls to get yourselves quickly familiar with the Chart helper.

Sample 1

Let's now look at a simple case in using the Chart helper. The sample ASP.NET MVC 3 project here is called MVC3ChartTest.

First, let's create a controller named ChartsController, as shown below.

Next, right click the action BasicChart to create a non-strongly-typed view data and non-master page supported view with the same name. After that, alter its content with the following.

Please note the code block inside the second @{} where we instantiated the Chart helper with two simple parameters. Note the subsequent three methods – AddTitle, AddSeries and Write related calling is something special, isn't it? No semicolon at the end of each statement! This is helper specific simplified method call syntax.

Obviously, this example exhibits to you a non-real case - we've provided data directly from inside the view. Another point worth noticing is the Write method. Let's say nothing but look at its definition first:

Till now, I would not say anything. If you are familiar with the BinaryWrite method and traditional ASP.NET image rendering approaches, then you have got the answer.

Next, let's look at the running-time snapshot, as shown in Figure 3 below.

Figure 3: A simple Column Chart in action

Cute readers may find that in the above figure, the layout page (master page) related stuff has not appeared. In fact, this can be easily achieved in another view named BasicChartWithMasterPage.

Obviously, the key above lies in the line below:

It's also easy to comprehend. Have seen the following in your former ASP.NET programming experience?

So, you've got the right answer – all the inner workings are quite similar.

Next, let's look at the running-time snapshot, as shown in Figure 4 below.

Figure 4: A Column Chart with the Master page

Sample 2

In this section, we are going to research into another example with the Chart helper which is very close to reality.

1. Set up Model

As with the case in the WebGrid section, we should also set up an ADO.NET Entity model. For this, take the following steps:

(1) Open the sample project MVC3ChartTest. Under the folder Models, create a model file named NorthwindModel.edmx.

(2) Remember in the related "Choose Your Database Objects" dialog box Select the view Category_Sales_for_1997 and ensure that the value of the Model namespace is NorthwindModel.

(3) Right click the Models folder to create a higher-layer model class named NorthModel. Below is the main code of this model.

First, note the view Category_Sales_for_1997 (from the classical database Northwind) is a simple view including only two fields – CategoryName (of string type) and CategorySales (of decimal type). Here it becomes an entity related to this view. Figure 5 illustrates its related schema in the .edmx designer.

Figure 5: The schema of the view Category_Sales_for_1997

Second, we create an only public property PieChart of type Chart. By invoking another helper method BuildServerPieChart, we want the property to return a Chart type which both serves the controller action and related view.

Third, to simplify the programming, we've created a helper class PieChartData.

Now, let's look at the helper method BuildServerPieChart related coding.

Apparently, the core of the above code is mainly around another method BindChartData. Please notice that how we set up the instance of the helper Chart, call its related methods, and specifies the pie type of chart related properties.

2. Create the action method

With the model in hand, now it's time for us to create a relevant action. For simplicity, we utilized the default controller HomeController, inside which we created the action Index.

Now, the above code is easy to understand. The action returns a view named Index, with the instantiation of the model class NorthModel as the parameter.

3. Create the view

Right click the above action Index and add a new view with the default name Index. Note we should select the strongly-typed class MVC3ChartTest.Models.NorthModel as the view model. The final appearance of the view Index looks like this:

As introduced in the article "Experience ASP.NET MVC 3 Beta -the Razor View Engine", the @model directive is a good invention of ASP.NET MVC 3 Beta which greatly helps to simplify the model invocation.

Now, the focus shifts to the following line:

Since we've leveraged the strongly-typed class invocation ahead of time, the Model property here should refer to the instance of the model class NorthModel. Easily seen, here the public property PieChart of the model related method Write is called, as a result of which the pie chart will be rendered on the client-side screen. Figure 6 indicates the related running-time snapshot.

Figure 6: The Pie Chart gets rendered

Summary

This article shows you the elementary usage of the two newly-introduced helpers, WebGrid and Chart, in ASP.NET MVC 3 Beta with relevant examples. As pointed out in the article, we've scratched the surface of the two helpers - there are still numerous properties and methods worthy to be deeply delved into. In the next installment, we are going to introduce the other three important helpers - Crypto, WebImage, and WebMail.

About Xianzhong Zhu

I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS... This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.