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".

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.


Recommended Free Ebook
Similar Articles