ASP. net mvc Tip #8-auxiliary method for creating ASP. net mvc GridView

ASP. net mvc Tip #8-auxiliary method for creating ASP. net mvc GridView

Address: http://weblogs.asp.net/stephenwalther/archive/2008/06/24/asp-net-mvc-tip-8-create-an-asp-net-mvc-gridview-helper-method.aspx

Translation: Anders Liu

Abstract: In this Tip, you will learn how to expand the ASP. net mvc framework and create a new helper method to display an HTML table for database data.

Currently, the ASP. net mvc Framework does not contain anything that is directly equivalent to the ASP. NET Web Forms GridView control. Every time you need to display data, you must write all HTML and Inline code. In this Tip, I will show you the graph and add a GridView () Extension Method for The HtmlHelper class.

An extension method is a method added by one class for another class. You can use the extension method to add more functions for existing classes. Here, we will add a new GridView () method for the HtmlHelper class-the class you commonly use in the MVC view page to present an HTML table for the database data. The extension methods in Visual Basic. NET and C # are somewhat different. To create an extension method in Visual Basic. NET, you need to create a module, and then add Features. To create an extension method in C #, you must create a static class and use the this keyword to declare the first parameter of each extension method of the static class.

Listing 1 lists the code for the GridView () Extension Method.

Listing 1-GridExtensions. cs

<Br/> using System; <br/> using System. text; <br/> using System. collections. generic; <br/> using System. linq; <br/> using System. data. linq. mapping; <br/> using System. data. linq; <br/> using System. web. UI; <br/> using System. web. mvc; <br/> using System. web; </p> <p> namespace Tip8.Helpers <br/> {<br/> public static class GridExtensions <br/>{< br/> public static string GridView (this HtmlHelper htmlHelper, ITa Ble table) <br/>{< br/> return GridView (htmlHelper, table, null, new GridViewOptions ()); <br/>}</p> <p> public static string GridView (this HtmlHelper htmlHelper, ITable table, string [] headers) <br/>{< br/> return GridView (htmlHelper, table, headers, new GridViewOptions ()); <br/>}</p> <p> public static string GridView (this HtmlHelper htmlHelper, ITable table, bool cannot delinks) <br/>{< br/> ret Urn GridView (htmlHelper, table, null, includeLinks); <br/>}</p> <p> public static string GridView (this HtmlHelper htmlHelper, ITable table, string [] headers, bool includeLinks) <br/>{< br/> var options = new GridViewOptions (); <br/> if (! Delinks) <br/>{< br/> options. showViewButton = false; <br/> options. showEditButton = false; <br/> options. showDeleteButton = false; <br/>}< br/> return GridView (htmlHelper, table, null, options ); <br/>}</p> <p> public static string GridView (this HtmlHelper htmlHelper, ITable table, string [] headers, GridViewOptions options) <br/> {<br/> // Show edit column? <Br/> bool showEditColumn = options. showViewButton | options. showEditButton | options. showDeleteButton; </p> <p> // Get identity column name <br/> string identityColumnName = GridExtensions. getIdentityColumnName (table); </p> <p> // Get column names and headers <br/> var columnNames = GridExtensions. getColumnNames (table); <br/> if (headers = null) <br/> headers = columnNames; </p> <p> // Open table <br/> var sb = new StringBuilder (); <br/> sb. appendLine ("<br/> <table>"); </p> <p> // Create Header Row <br/> sb. appendLine ("<thead>"); <br/> sb. appendLine ("<br/> <tr>"); <br/> if (showEditColumn) <br/> sb. append ("<th> </th> <p>"); <br/> foreach (String header in headers) <br/> sb. appendFormat ("<th >{0 }</th> <p>", header); <br/> sb. appendLine ("</tr> <p>"); <br/> sb. appendLine ("</thead> <p>"); </p> <p> // Create Data Rows <br/> sb. appendLine ("<br/> <tbody>"); <br/> sb. appendLine ("<br/> <tr>"); <br/> foreach (Object row in table) <br/>{< br/> if (showEditColumn) <br/>{< br/> int identityValue = (int) DataBinder. getPropertyValue (row, identityColumnName); <br/> sb. append ("<td> <small>"); <br/> if (options. showViewButton) <br/>{< br/> sb. append (htmlHelper. actionLink (options. viewButtonText, options. viewAction, new {Id = identityValue}); <br/> sb. append (""); <br/>}< br/> if (options. showEditButton) <br/>{< br/> sb. append (htmlHelper. actionLink (options. editButtonText, options. editAction, new {Id = identityValue}); <br/> sb. append (""); <br/>}< br/> if (options. showDeleteButton) <br/>{< br/> sb. append (htmlHelper. actionLink (options. deleteButtonText, options. deleteAction, new {Id = identityValue}); <br/>}< br/> sb. append ("</small> </td> <p>"); <br/>}< br/> foreach (string columnName in columnNames) <br/>{< br/> string value = DataBinder. getPropertyValue (row, columnName ). toString (); <br/> sb. appendFormat ("<td >{0} </td> <p>", HttpUtility. htmlEncode (value); <br/>}< br/> sb. appendLine ("</tr> <p>"); <br/>}< br/> sb. appendLine ("</tbody> <p>"); </p> <p> sb. appendLine ("</table> <p>"); <br/> return sb. toString (); <br/>}</p> <p> public static string [] GetColumnNames (ITable table) <br/> {<br/> return table <br/>. context <br/>. mapping <br/>. getequalype (table. elementType) <br/>. persistentDataMembers. select (m => m. name) <br/>. toArray (); <br/>}</p> <p> public static string GetIdentityColumnName (ITable table) <br/>{< br/> return table <br/>. context <br/>. mapping <br/>. getequalype (table. elementType) <br/>. DBGeneratedIdentityMember <br/>. name; <br/>}< br/>

Listing 1 contains multiple versions of the GridView () method. Each version of The GridView () method accepts a set of different parameters. For example, the first version of the GridView () method accepts a LINQ to SQL table and presents all columns and rows from the table. Other versions of the GridView () method allow you to customize the header and edit link of the GridView.

The MVC view in Listing 2 shows multiple ways to call the GridView () method to display data table content.

Listing 2-Index. aspx

<Content id = "indexContent" contentplaceholderid = "MainContent" runat = "server"> <br/> Simple GridSimple Grid without LinksSimple Grid with Custom HeadersSimple Grid with Custom Links <p> </ content>

The view in Listing 2 generates the HTML page shown in Figure 1. This page contains four separate data grids (only the first three are shown in the figure ).

Figure 1-Index View

Note that ViewData. Model is passed to the GridView () auxiliary method. ViewData. Model contains a LINQ to SQL table. The code-behind file in the Index view specifies the strong type System. Data. Linq. ITable for the model. The model is passed to the view through the Controller code shown in listing 3.

Listing 3-HomeController. cs

<Br/> using System; <br/> using System. collections. generic; <br/> using System. linq; <br/> using System. web; <br/> using System. web. mvc; <br/> using Tip8.Models; </p> <p> namespace Tip8.Controllers <br/>{< br/> public class HomeController: controller <br/>{< br/> private MovieDataContext _ db = new MovieDataContext (); </p> <p> public ActionResult Index () <br/>{< br/> return View (_ db. movies); <br/>}< br/>

I am not very satisfied with the GridView () auxiliary method in the Tip. The problem is that it is difficult to customize the appearance of columns in the GridView using the extension method. For example, I may want to be able to format the cash and date columns. It would be better to have the function equivalent to the template column. In tomorrow's Tip, I will introduce a completely different way to encapsulate the GridView when using the ASP. NET MVC framework.

Download the source code here: http://weblogs.asp.net/blogs/stephen enwalther/downloads/tip8/tip8.zip.