Post
Ask Question

Strongly Typed Data Controls in ASP.Net

Strongly Typed Data Controls in ASP.NET 4.5 with Visual Studio 2012

Before the introduction of ASP.NET 4.5, we would bind the data to the ASP.NET controls using the DataSource property and bind the data using the "Eval(expression)" function. Eval evaluates the expression and displays the data in the display controls. ASP.NET 4.5 came up with a new feature called strongly typed data controls. The benefit of this feature is that we can bind the data to the display controls with strong types and we can avoid the exceptions caused by the function Eval(expression) if the expression is not evaluated to a proper value.

This article discusses with the sample code how the data binding was programmed before ASP.NET 4.5 and in ASP.NET 4.5. This example uses Visual Studio 2012 and the project type created is a simple web site project (empty web site project). Add a default.aspx webform with code behind if you do not see it in the project.

Before ASP.NET 4.5

ASPX page:

We used Eval(expression) to bind the data to the individual controls in the list view control below:

  1. <p><u>Normal ASP.NET Binding</u></p>  
  2.     <asp:ListView ID="displayData" runat="server">  
  3.         <LayoutTemplate>  
  4.             <table id="Table1" runat="server">  
  5.                 <tr id="Tr1" runat="server">  
  6.                     <td id="Td1" runat="server">  
  7.                         Item ID  
  8.                     </td>  
  9.                     <td id="Td2" runat="server">  
  10.                         Item Name  
  11.                     </td>  
  12.                 </tr>  
  13.                 <tr id="ItemPlaceholder" runat="server">  
  14.                 </tr>  
  15.             </table>  
  16.         </LayoutTemplate>  
  17.         <ItemTemplate>  
  18.             <tr>  
  19.                 <td>  
  20.                     <asp:Label ID="Label1" runat="server" Text='<%# Eval("ID")%>'>  
  21.                     </asp:Label>  
  22.                 </td>  
  23.                 <td>  
  24.                     <asp:Label ID="Label2" runat="server" Text='<%# Eval("ItemName")%>'>  
  25.                     </asp:Label>  
  26.                 </td>  
  27.             </tr>  
  28.         </ItemTemplate>  
  29.     </asp:ListView>   

Code behind for populating the data

Create a class file called "Product" in a separate file and it will be added in "App_code" folder in the project. This type will be used in the code behind for populating the data of the type "Product".

  1. /// <summary>  
  2. /// Summary description for Product  
  3. /// </summary>  
  4. public class Product  
  5. {  
  6.     public int ID { get; set; }  
  7.     public string ItemName { get; set; }  
  8. }  
  9. /// <summary>  
  10. /// Page Load Method  
  11. /// </summary>  
  12. /// <param name="sender"></param>  
  13. /// <param name="e"></param>  
  14. protected void Page_Load(object sender, EventArgs e)  
  15. {  
  16.     //bind the data to the list view by calling the method PopulateProducts.  
  17.     displayData.DataSource = PopulateProducts();  
  18.     displayData.DataBind();  
  19. }  
  20. /// <summary>  
  21. /// Method to create new product  
  22. /// </summary>  
  23. /// <returns></returns>  
  24. public IList<Product> PopulateProducts()  
  25. {  
  26.     return new List<Product>  
  27.     {  
  28.         new Product{ID=1,ItemName="Item1"},  
  29.         new Product{ID=2,ItemName="Item2"},  
  30.         new Product{ID=3,ItemName="Item3"},  
  31.         new Product{ID=4,ItemName="Item4"}  
  32.     };  
  33. }   

Code Execution

Your output should be as in the following.

Normal ASP.NET Binding

Item ID   Item Name
 1           Item1
 2           Item2
 3           Item3
 4           Item4 
 
Now to re-write the code with ASP.NET 4.5.

In the ASP.NET 4.5 there is a new property available called "ItemType" where you can define the type of the item bound to the control. Note, in some of the blogs/articles you see the "ModelType" property mentioned instead of "ItemType" as it was available in older versions.

Now add the following code to the ASPX page:

  1. <br /><p><u>ASP.NET 4.5 Strong Binding</u></p>  
  2.     <asp:ListView runat="server" ID="displayData2" ItemType="Product">  
  3.         <LayoutTemplate>  
  4.             <table id="Table1" runat="server">  
  5.                 <tr id="Tr1" runat="server">  
  6.                     <td id="Td1" runat="server">  
  7.                         Item ID  
  8.                     </td>  
  9.                     <td id="Td2" runat="server">  
  10.                         Item Name  
  11.                     </td>  
  12.                 </tr>  
  13.                 <tr id="ItemPlaceholder" runat="server">  
  14.                 </tr>  
  15.             </table>  
  16.         </LayoutTemplate>  
  17.         <ItemTemplate>  
  18.             <tr>  
  19.                 <td>  
  20.                     <asp:Label ID="Label1" runat="server" Text='<%# Item.ID%>'>  
  21.                     </asp:Label>  
  22.                 </td>  
  23.                 <td>  
  24.                     <asp:Label ID="Label2" runat="server" Text='<%# Item.ItemName%>'>  
  25.                     </asp:Label>  
  26.                 </td>  
  27.             </tr>  
  28.         </ItemTemplate>  
  29.     </asp:ListView> 

In the code above you can observe that the control has a property called "ItemType" that is assigned with the Type to use to bind the data. In our case, it is "Product". Also, to access the properties of the Type, you need to use "Item." and the property name will be automatically displayed by Intellisense. This makes the programmer to bind the strong types to the controls.

Now modify the Page_Load method to bind the data to the second control as in the following:

  1. /// <summary>  
  2. /// Page Load Method  
  3. /// </summary>  
  4. /// <param name="sender"></param>  
  5. /// <param name="e"></param>  
  6. protected void Page_Load(object sender, EventArgs e)  
  7. {  
  8.     //bind the data to the list view by calling the method PopulateProducts.  
  9.     displayData.DataSource = PopulateProducts();  
  10.     displayData.DataBind();  
  11.     //bind the data to the list view by calling the method PopulateProducts.  
  12.     displayData2.DataSource = PopulateProducts();  
  13.     displayData2.DataBind();  
  14. } 

Code Execution

Your output should as in the following:

ASP.NET 4.5 Strong Binding

Item ID   Item Name
 1           Item1
 2           Item2
 3           Item3
 4           Item4
 
Select Method

In the code above, we set the data to the controls using the DataSource property of the control. We can also bind the data using the Select method of the ASP.NET control instead of setting the DataSource property. Let us see how to do that now.

Modify your ASPX file to include another control as in the following:

  1. <br /><p><u>ASP.NET 4.5 Strong Binding with Select Method</u></p>  
  2.     <asp:ListView runat="server" ID="displayData3" ItemType="Product" SelectMethod="GetValidProducts">  
  3.         <LayoutTemplate>  
  4.             <table id="Table1" runat="server">  
  5.                 <tr id="Tr1" runat="server">  
  6.                     <td id="Td1" runat="server">  
  7.                         Item ID  
  8.                     </td>  
  9.                     <td id="Td2" runat="server">  
  10.                         Item Name  
  11.                     </td>  
  12.                 </tr>  
  13.                 <tr id="ItemPlaceholder" runat="server">  
  14.                 </tr>  
  15.             </table>  
  16.         </LayoutTemplate>  
  17.         <ItemTemplate>  
  18.             <tr>  
  19.                 <td>  
  20.                     <asp:Label ID="Label1" runat="server" Text='<%# Item.ID%>'>    
  21.                     </asp:Label>  
  22.                 </td>  
  23.                 <td>  
  24.                     <asp:Label ID="Label2" runat="server" Text='<%# Item.ItemName%>'>    
  25.                     </asp:Label>  
  26.                 </td>  
  27.             </tr>  
  28.         </ItemTemplate>  
  29.     </asp:ListView> 

Note in the code above we have set the value for the SelectMethod propery with a Code behind method called "GetValidProducts". The method "GetValidProducts" has the responsibility to get the data to be populated in the ListView control. The method used here should either support IEnumerable or IQueryable type to be able to populate the Type data.

Now let us define a method in the code behind for that; see:

  1. /// <summary>  
  2. /// Method to get the products using IEnumerable  
  3. /// </summary>  
  4. /// <returns></returns>  
  5. public IEnumerable<Product> GetValidProducts()  
  6. {  
  7.     //You can add additional criteria for displaying the products by  
  8.     //modifying the code in this method  
  9.     return PopulateProducts().AsQueryable();  
  10. } 

As mentioned in the commented code, you can modify the method to include the criteria to check some business logic and refine the data to be returned by the method.

Code Execution

Now, if you execute the code you should see the data being populated as in the following:

ASP.NET 4.5 Strong Binding with Select Method

Item ID   Item Name
 1           Item1
 2           Item2
 3           Item3
 4           Item4
 
Note:  Similar to the SelectMethod, you can also write methods for Update, Insert and Delete operations.

The final output should look as in the following:

Normal ASP.NET Binding

Item ID   Item Name
 1           Item1
 2           Item2
 3           Item3
 4           Item4

ASP.NET 4.5 Strong Binding

Item ID   Item Name
 1           Item1
 2           Item2
 3           Item3
 4           Item4

ASP.NET 4.5 Strong Binding with Select Method

Item ID   Item Name
 1           Item1
 2           Item2
 3           Item3
 4           Item4  


Similar Articles