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".
![ModelBindingLabelControl]()
Now, in the project in the Solution Explorer click on Models then select Add > Class.
![Solution Explorer]()
Now add a new item then select class > Contact. cs then click Add.
![Contact]()
Now apply the Models attributes to the Contact class.
Contact.cs
using System;
namespace ModelBindingLabelControl.Models
{
public class Contact
{
public string FirstName
{
get;
set;
}
public string LastName
{
get;
set;
}
public string Email
{
get;
set;
}
public string Phone
{
get;
set;
}
public DateTime DateOfBirth
{
get;
set;
}
public string State
{
get;
set;
}
}
}
Now add a new item then select Web Form and leave Default.aspx as the name then click add.
![Web Form]()
The following are the contents of the Default.aspx.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ModelBindingLabelControl.Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/bootstrap.cosmo.min.css" rel="stylesheet" />
<link href="Content/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div id="mainContainer">
<div class="shadowBox">
<div class="container">
<div class="page-container">
<br />
<div class="jumbotron">
<p class="text-danger">Model Binding in ASP.NET 4.5 Label Control</p>
</div>
<div class="row">
<div class="col-lg-12 ">
<div class="panel panel-default">
<div class="panel-heading">Contact Details</div>
<div class="panel-body">
<div class="col-md-8">
<div class="form-group col-lg-6">
<label>First Name</label>
<asp:TextBox ID="FirstName" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="form-group col-lg-6">
<label>Last Name</label>
<asp:TextBox ID="LastName" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="form-group col-lg-6">
<label>Email</label>
<asp:TextBox ID="Email" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="form-group col-lg-6">
<label>Phone </label>
<asp:TextBox ID="Phone" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="form-group col-lg-6">
<label>DOB </label>
<asp:TextBox ID="DateOfBirth" runat="server" class="form-control" TextMode="Date"></asp:TextBox>
</div>
<div class="form-group col-lg-6">
<label>State </label>
<asp:TextBox ID="State" runat="server" class="form-control"></asp:TextBox>
</div>
<div class="form-group col-lg-6">
<asp:Button ID="btnsubmit" runat="server" Text="Submit" OnClick="btnsubmit_Click" />
</div>
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover ">
<thead>
<tr class="warning">
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Date Of Birth</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>
<asp:Label ID="lblFirstName" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblLastName" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblEmail" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblPhone" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblDateOfBirth" runat="server" Text="Label"></asp:Label>
</td>
<td>
<asp:Label ID="lblState" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Next, create the code behind it as follows.
Default.aspx.cs
using System;
//using Namespace & Models
using ModelBindingLabelControl.Models;
using System.Web.ModelBinding;
namespace ModelBindingLabelControl
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected Contact GetContact()
{
Contact model = new Contact();
IValueProvider provider = new FormValueProvider(ModelBindingExecutionContext);
if (TryUpdateModel<Contact>(model, provider))
{
return model;
}
else
{
throw new FormatException("Could not model bind");
}
}
protected void BindContact(Contact contact)
{
lblFirstName.Text = contact.FirstName;
lblLastName.Text = contact.LastName;
lblEmail.Text = contact.Email;
lblPhone.Text = contact.Phone;
lblDateOfBirth.Text = Convert.ToDateTime(contact.DateOfBirth).ToShortDateString();
lblState.Text = contact.State;
}
protected void btnsubmit_Click(object sender, EventArgs e)
{
BindContact(GetContact());
}
}
}
Now run the page and it will look like the following.
Default.aspx
![Run the page]()
Now Info Fill this form.
![Details]()
Now click the Submit button, it will display the data binding Label Control.
![Label Control]()
I hope this article is useful. If you have any other questions then please provide your comments in the following.