Post
Ask Question

Binding GridViewModel in ASP.Net 4.5

This article shows how to implement Model Data Binding with ASP.NET data controls using the Select Method attribute of a data bound control. It is a new way to bind data to data controls in ASP.NET 4.5.

So, let's proceed with the following procedure.

  • Create a Default Page 
  • LINQ to SQL database connection Northwind.dbml
  • For the Grid View control create a new method, ItemType, and select Method
Use the Grid View control to retrieve the data using model binding. The control uses the following two new properties.
  1. ItemType: "GridViewModelBinding.Order_Detail"
  2. Select Method: "grdorder_GetData"
Create a new project using "File" -> "New" -> "Project..." then select web "ASP.NET Web Forms Application". Name it "GridViewModelBinding".



The first step is to create the database connection in Visual Studio. Open the Server Explorer window from the View menu and click the Connect to Database button and it will look as in the following.



Now the Northwind database is as shown in the Database Explorer window.



Now, in the project in the Solution Explorer click on Add > New Item.



Now, select LINQ to SQL Classes File type in the Add New Item dialog box for Northwind.dbml then click Add.



Shows the LINQ to SQL design Order Details table.



Now add a new item then select Web Form and leave Default.aspx as the name then click Add.



The following are the contents of the Default.aspx.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridViewModelBinding.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title>How to Use GridView Model Binding in ASP.NET 4.5 </title>  
  7.         <link href="Content/bootstrap.cosmo.min.css" rel="stylesheet" />  
  8.         <link href="Content/StyleSheet.css" rel="stylesheet" />  
  9.     </head>  
  10.     <body>  
  11.         <form id="form1" runat="server">  
  12.             <div id="mainContainer">  
  13.                 <div class="shadowBox">  
  14.                     <div class="container">  
  15.                         <div class="page-container">  
  16.                             <br />  
  17.                             <div class="jumbotron">  
  18.                                 <p class="text-danger">How to Use GridView Model Binding in ASP.NET 4.5 </p>  
  19.                             </div>  
  20.                             <div class="row">  
  21.                                 <div class="col-lg-12 ">  
  22.                                     <asp:GridView ID="grdorder" AllowPaging="true" PageSize="5" ViewStateMode="Disabled" CssClass=" table table-bordered table-condensed table-striped table-hover"  
  23. runat="server" SelectMethod="grdorder_GetData" ItemType="GridViewModelBinding.Order_Detail">  
  24.                                         <HeaderStyle CssClass="warning" />  
  25.                                     </asp:GridView>  
  26.                                 </div>  
  27.                             </div>  
  28.                         </div>  
  29.                     </div>  
  30.                 </div>  
  31.             </div>  
  32.         </form>  
  33.     </body>  
  34. </html>  
Next, create the code-behind as follows. Default.aspx.cs.
  1. using System;  
  2. using System.Linq;  
  3.   
  4. namespace GridViewModelBinding  
  5. {  
  6.     public partial class Default: System.Web.UI.Page   
  7.     {  
  8.         NorthwindDataContext dc = new NorthwindDataContext();  
  9.         protected void Page_Load(object sender, EventArgs e)   
  10.         {  
  11.   
  12.         }  
  13.         // The return type can be changed to IEnumerable, however to support  
  14.         // paging and sorting, the following parameters must be added:  
  15.         // int maximumRows  
  16.         // int startRowIndex  
  17.         // out int totalRowCount  
  18.         // string sortByExpression  
  19.         public IQueryable < GridViewModelBinding.Order_Detail > grdorder_GetData()  
  20.         {  
  21.             var qry = from Order in dc.Order_Details  
  22.             select Order;  
  23.             return qry.AsQueryable();  
  24.         }  
  25.   
  26.     }  
  27. }  
The SelectMethod property determines which method to call on the page to get the records. The ItemType property is optional and specifies the model binding the bound controls with the SelectMethod attribute.



Now run the page and it will look like the data bound grid view.



I hope this article is useful. If you have any other questions then please provide your comments in the following.


Similar Articles