Model Binding in 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.

Up Next
    Ebook Download
    View all

    testing

    Read by 48 people
    Download Now!
    Learn
    View all