Model Binding in ASP.Net 4.5 Label Control

This article explains how to use Model Binding in an ASP.Net 4.5 Label Control.

Introduction

Model binding serves two purposes. It provides a way to fetch values from the client and bind them to a model. Client-side validation rules to determine if the model is valid before saving the model.

Create a new project using "File" -> "New" -> "Project..." then select Web then select "ASP.NET Web Forms Application". Name it “ModelBindingLabelControl".



Now, in the project in the Solution Explorer click on Models then select Add > Class.



Now add a new item then select class > Contact.cs then click Add.



Now to apply the Models attributes to the Contact class.

Contact.cs
  1. using System;  
  2.   
  3. namespace ModelBindingLabelControl.Models   
  4. {  
  5.     public class Contact  
  6.     {  
  7.         public string FirstName   
  8.         {  
  9.             get;  
  10.             set;  
  11.         }  
  12.         public string LastName  
  13.         {  
  14.             get;  
  15.             set;  
  16.         }  
  17.         public string Email  
  18.         {  
  19.             get;  
  20.             set;  
  21.         }  
  22.         public string Phone   
  23.         {  
  24.             get;  
  25.             set;  
  26.         }  
  27.         public DateTime DateOfBirth  
  28.         {  
  29.             get;  
  30.             set;  
  31.         }  
  32.         public string State   
  33.         {  
  34.             get;  
  35.             set;  
  36.         }  
  37.     }  
  38. }  
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="ModelBindingLabelControl.Default" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head>  
  6.         <title></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">Model Binding in ASP.NET 4.5 Label Control</p>  
  19.                             </div>  
  20.                             <div class="row">  
  21.                                 <div class="col-lg-12 ">  
  22.                                     <div class="panel panel-default">  
  23.                                         <div class="panel-heading">Contact Details</div>  
  24.                                         <div class="panel-body">  
  25.                                             <div class="col-md-8">  
  26.                                                 <div class="form-group col-lg-6">  
  27.                                                     <label>First Name</label>  
  28.                                                     <asp:TextBox ID="FirstName" runat="server" class="form-control"></asp:TextBox>  
  29.                                                 </div>  
  30.                                                 <div class="form-group col-lg-6">  
  31.                                                     <label>Last Name</label>  
  32.                                                     <asp:TextBox ID="LastName" runat="server" class="form-control"></asp:TextBox>  
  33.                                                 </div>  
  34.                                                 <div class="form-group col-lg-6">  
  35.                                                     <label>Email</label>  
  36.                                                     <asp:TextBox ID="Email" runat="server" class="form-control"></asp:TextBox>  
  37.                                                 </div>  
  38.                                                 <div class="form-group col-lg-6">  
  39.                                                     <label>Phone </label>  
  40.                                                     <asp:TextBox ID="Phone" runat="server" class="form-control"></asp:TextBox>  
  41.                                                 </div>  
  42.                                                 <div class="form-group col-lg-6">  
  43.                                                     <label>DOB </label>  
  44.                                                     <asp:TextBox ID="DateOfBirth" runat="server" class="form-control" TextMode="Date"></asp:TextBox>  
  45.                                                 </div>  
  46.                                                 <div class="form-group col-lg-6">  
  47.                                                     <label>State </label>  
  48.                                                     <asp:TextBox ID="State" runat="server" class="form-control"></asp:TextBox>  
  49.                                                 </div>  
  50.                                                 <div class="form-group col-lg-6">  
  51.                                                     <asp:Button ID="btnsubmit" runat="server" Text="Submit" OnClick="btnsubmit_Click" />  
  52.                                                 </div>  
  53.                                             </div>  
  54.                                         </div>  
  55.                                     </div>  
  56.                                     <table class="table table-striped table-hover ">  
  57.                                         <thead>  
  58.                                             <tr class="warning">  
  59.                                                 <th>#</th>  
  60.                                                 <th>First Name</th>  
  61.                                                 <th>Last Name</th>  
  62.                                                 <th>Email</th>  
  63.                                                 <th>Phone</th>  
  64.                                                 <th>Date Of Birth</th>  
  65.                                                 <th>State</th>  
  66.                                             </tr>  
  67.                                         </thead>  
  68.                                         <tbody>  
  69.                                             <tr class="active">  
  70.                                                 <td>1</td>  
  71.                                                 <td>  
  72.                                                     <asp:Label ID="lblFirstName" runat="server" Text="Label"></asp:Label>  
  73.                                                 </td>  
  74.                                                 <td>  
  75.                                                     <asp:Label ID="lblLastName" runat="server" Text="Label"></asp:Label>  
  76.                                                 </td>  
  77.                                                 <td>  
  78.                                                     <asp:Label ID="lblEmail" runat="server" Text="Label"></asp:Label>  
  79.                                                 </td>  
  80.                                                 <td>  
  81.                                                     <asp:Label ID="lblPhone" runat="server" Text="Label"></asp:Label>  
  82.                                                 </td>  
  83.                                                 <td>  
  84.                                                     <asp:Label ID="lblDateOfBirth" runat="server" Text="Label"></asp:Label>  
  85.                                                 </td>  
  86.                                                 <td>  
  87.                                                     <asp:Label ID="lblState" runat="server" Text="Label"></asp:Label>  
  88.                                                 </td>  
  89.                                             </tr>  
  90.                                         </tbody>  
  91.                                     </table>  
  92.                                 </div>  
  93.                             </div>  
  94.                         </div>  
  95.                     </div>  
  96.                 </div>  
  97.             </div>  
  98.         </form>  
  99.     </body>  
  100. </html>  
Next, create the code-behind as follows.

Default.aspx.cs
  1. using System;  
  2. //using Namespace & Models  
  3. using ModelBindingLabelControl.Models;  
  4. using System.Web.ModelBinding;    
  5. namespace ModelBindingLabelControl  
  6. {  
  7.     public partial class Default: System.Web.UI.Page  
  8.     {  
  9.         protected void Page_Load(object sender, EventArgs e)  
  10.         {  
  11.   
  12.         }  
  13.         protected Contact GetContact()  
  14.         {  
  15.             Contact model = new Contact();  
  16.             IValueProvider provider = new FormValueProvider(ModelBindingExecutionContext);  
  17.             if (TryUpdateModel < Contact > (model, provider))  
  18.             {  
  19.                 return model;  
  20.             }   
  21.             else   
  22.             {  
  23.                 throw new FormatException("Could not model bind");  
  24.             }  
  25.         }  
  26.         protected void BindContact(Contact contact)  
  27.         {  
  28.             lblFirstName.Text = contact.FirstName;  
  29.             lblLastName.Text = contact.LastName;  
  30.             lblEmail.Text = contact.Email;  
  31.             lblPhone.Text = contact.Phone;  
  32.             lblDateOfBirth.Text = Convert.ToDateTime(contact.DateOfBirth).ToShortDateString();  
  33.             lblState.Text = contact.State;  
  34.         }  
  35.         protected void btnsubmit_Click(object sender, EventArgs e)  
  36.         {  
  37.             BindContact(GetContact());  
  38.         }  
  39.     }  
  40. }  
Now run the page and it will look like the following.
Default.aspx



Now Info Fill this from.



Now click the Submit button, it will display the data binding Label Control.



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