Using Model Binding in ASP.NET Data Controls

Introduction

ASP.NET Web Forms became popular due to the wide range of data bound controls such as GridView, DetailsView and ListView. The earlier versions of ASP.NET, however, were a bit rigid about how data was bound to these controls. Most of the time developers had to use one or the other data source control (SQL Data Source, Object Data Source, Entity Data Source etc.) to bind data from the underlying data store with the data bound controls. ASP.NET 4.5 provides a flexible alternative to data bind these controls - model binding. Using the new model binding features you can use methods instead of data source controls to perform CRUD operations. This article explains how the new model binding features can be used. You will also learn to use strongly typed data controls.

Data Binding in ASP.NET Server Controls

In the earlier versions of ASP.NET you used data bound controls and data source controls hand in hand to display and edit data. First, you needed to configure a data source control, such as Object Data Source or Entity Data Source and then set the DataSourceID property of a data bound control to the respective data source control. The data bound control would have one or more fields of some inbuilt type (BoundField for example) or template fields. If the control was using template fields you used Eval() data binding expression for one way data binding and Bind() data binding expression for two way data binding.

The following sample markup shows a GridView control bound with an Entity Data Source.

<asp:EntityDataSource ID="EntityDataSource1" runat="server" 
    ConnectionString="name=NorthwindEntities" 
    DefaultContainerName="NorthwindEntities" EnableFlattening="False" 
    EntitySetName="Customers" 
    Select="it.[CustomerID], it.[CompanyName], it.[ContactName], it.[Country]">
</asp:EntityDataSource>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="CustomerID" DataSourceID="EntityDataSource1">
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" 
            SortExpression="CustomerID" />
        <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" 
            ReadOnly="True" SortExpression="CompanyName" />
        <asp:BoundField DataField="ContactName" HeaderText="ContactName" 
            ReadOnly="True" SortExpression="ContactName" />
        <asp:TemplateField HeaderText="Country" SortExpression="Country">
            <EditItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Notice how the DataSourceID property of the GridView is set to EntityDataSource1. Also, notice the use of Eval() and Bind() to bind the Country column.

Though data source controls work well in simple situations, developers often need complete control on how the data is fetched and how it is saved back to the database. This calls for a more code centered approach than the control driven approach. That is where the new model binding features come into the picture. Using model binding features you can write methods in your code behind class that perform the CRUD operations on the underlying data store. This way you have total control over the process of fetching and editing the data. Have a look at the following markup that uses the new model binding features:

<asp:GridView ID="GridView1" runat="server" 
SelectMethod="GetCustomers"
UpdateMethod="UpdateCustomer" 
DeleteMethod="DeleteCustomer" 
... >

This time the GridView control doesn't use a data source control. The SelectMethod, UpdateMethod and DeleteMethod properties are set to method names GetCustomers, UpdateCustomers and DeleteCustomers respectively. These methods reside in the code behind. You will develop a complete version of this example in the following sections. 

In addition to the code centered data binding, you can also use data within the controls in strongly typed manner. This is especially handy for template fields. Instead of using Eval() and Bind() data binding expressions, you can now use Item and BindItem properties respectively. These properties work along with the ItemType property. The use of these properties will be clear from the following markup.

<asp:GridView ID="GridView1" runat="server" 
SelectMethod="GetCustomers"
UpdateMethod="UpdateCustomer" 
DeleteMethod="DeleteCustomer"
ItemType="NorthwindModel.Customer" 
... >
<Columns>
...
<asp:TemplateField HeaderText="Country" SortExpression="Country">
  <ItemTemplate>
   <asp:Label ID="Label2" runat="server" Text='<%# Item.Country %>'></asp:Label>
  </ItemTemplate>
  <EditItemTemplate>
   <asp:TextBox ID="TextBox2" Text='<%# BindItem.Country %>' runat="server"></asp:TextBox>
  </EditItemTemplate>
</asp:TemplateField>
...

Notice the code marked in bold letters. The ItemType property is set to an Entity Framework Data Model type - Customer. Once you do so, you can access properties of Customer class in a strongly typed fashion. Instead of Eval("Country") you now use Item.Country and instead of Bind("Country") you use BindItem.Country. This way there can't be any errors while specifying column names because they are available to you in the intellisense in strongly typed manner.

Creating a Sample Website

Now that you understand the basics of model binding and strongly typed data binding, let's create a web form that illustrates the complete process in detail. You will be using Customers table from the Northwind database in this example. Begin by creating a new ASP.NET Web Site. Then add an Entity Framework Data Model to its App_Code folder and create model class for the Customers table. The following figure shows the Customers model class in the Visual Studio designer:

Customers model class
Customers model class

Open the default web form and place a GridView control on it. Configure the GridView to show CustomerID, CompanyName, ContactName and Country columns. Also add Edit and Delete command buttons. The following markup shows the GridView after adding these columns:

<asp:GridView ID="GridView1" runat="server" 
SelectMethod="GetCustomers"
UpdateMethod="UpdateCustomer" 
DeleteMethod="DeleteCustomer" 
ItemType="NorthwindModel.Customer"
AllowSorting="True" 
AllowPaging="True"
DataKeyNames="CustomerID" ...>
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" ReadOnly="True" 
            SortExpression="CustomerID"></asp:BoundField>
        <asp:TemplateField HeaderText="Company Name" SortExpression="CompanyName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" Text='<%# BindItem.CompanyName %>' runat="server"></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Item.CompanyName %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" 
            SortExpression="ContactName"></asp:BoundField>
        <asp:TemplateField HeaderText="Country" SortExpression="Country">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox3" runat="server" Text='<%# BindItem.Country %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%# Item.Country %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField ShowEditButton="True" ButtonType="Button">
        <ControlStyle Width="75px" />
        </asp:CommandField>
        <asp:CommandField ShowDeleteButton="True" ButtonType="Button">
        <ControlStyle Width="75px" />
        </asp:CommandField>
    </Columns>
...
</asp:GridView>

The following figure shows the GridView at runtime:

GridView at Runtime
GridView at Runtime

Notice that the ItemType property of the GridView is set to NorthwindModel.Customer and its SelectMethod, UpdateMethod and DeleteMethod properties are set to GetCustomers, UpdateCustomer  and DeleteCustomer respectively. You will be creating these methods in the following sections.

Selecting Data

In order to display data in the GridView you need to write a method that fetches data from the data store and then specify it in the SelectMethod property of GridView. So, switch to the code behind and add a method named GetCustomers() as shown below:

public IQueryable<Customer> GetCustomers()
{
    NorthwindEntities db = new NorthwindEntities();
    var data = from item in db.Customers
                orderby item.CustomerID
                select item;
    return data;
}

The GetCustomers() method returns an IQueryable collection of Customer objects. Inside it fetches all of the records from the Customers table and returns them to the caller. Note that we have enabled paging in our GridView. When you enable paging for a GridView, behind the scenes it fetches only the required number of records as specified by the PageSize property.

Updating and Deleting Data

The methods UpdateCustomer() and DeleteCustomer() do the job of updating and deleting a Customer respectively. The UpdateCustomer() method is shown next:

public void UpdateCustomer(Customer c)
{
    NorthwindEntities db = new NorthwindEntities();
    var data = from item in db.Customers
                where item.CustomerID == c.CustomerID
                select item;

    Customer obj = data.SingleOrDefault();
    obj.CompanyName = c.CompanyName;
    obj.ContactName = c.ContactName;
    obj.Country = c.Country;
    db.SaveChanges();
}

The UpdateCustomer() method accepts a parameter of type Customer. At runtime, when you modify a GridView row and click the Update button, UpdateCustomer() method will be called and the corresponding Customer object is passed as its parameter. Inside, you find out a specific Customer based on its CustomerID, assign the modified values and then save the changes to the database by calling the SaveChanges() method.

The DeleteCustomer() method follows a similar method signature but internally deletes a Customer. The following code shows the DeleteCustomer() method:

public void DeleteCustomer(Customer c)
{
    NorthwindEntities db=new NorthwindEntities();
    var data = from item in db.Customers
                where item.CustomerID == c.CustomerID
                select item;
    Customer obj = data.SingleOrDefault();
    db.DeleteObject(obj);
    db.SaveChanges();
}

The DeleteCustomer() method receives the Customer being deleted as a parameter. Inside it fetches a Customer matching the CustomerID and deletes it using the DeleteObject() method.

Now, run the web form and try editing and deleting a few Customer records.

Adding Validation Support

Though the GridView is able to modify Customer data, there are no validations on the data being saved. One way to enforce the validations is to use a combination of template fields and validation controls. However, there is an easy alternative - Data Annotations.

Data Annotations are special attributes that you apply on the data model properties. They specify validation criteria such as maximum length, minimum length and specific data format (Email address, URL etc.).

To use Data Annotations add a new class in the App_Code folder and name it as CustomerValidations. The CustomerValidations class will store only validation information for the Customer class. You could have added the data annotation attributes directly to the Customer data model class but to avoid accidental overwriting during model recreation it is recommended to isolate them in a separate class.

public class CustomerValidations
{
    [StringLength(5,MinimumLength=3 ,ErrorMessage="CustomerID must between 3-5 characters!")]
    public string CustomerID { get; set; }

    [StringLength(20, ErrorMessage = "Company Name must be upto 20 characters!")]
    public string CompanyName { get; set; }

    [Required]
    public string ContactName { get; set; }

    [Required]
    [StringLength(15,ErrorMessage="Invalid country length!")]
    public string Country { get; set; }
}

The CustomerValidations class makes use of data annotation attributes such as [StringLength] and [Required]. The former attribute ensures that the entered data is within a specified maximum length. The later attribute enforces that the property value must be provided. You can also use many other data annotation attributes depending on your requirement.

As of now the CustomerValidations class is a stand alone class. You need to associate it with the Customer data model class using the [MetadataType] attribute. To do so, open the Entity Framework Data Model file (Model.Designer.cs) and add the following piece of code:

[MetadataType(typeof(CustomerValidations))]
public partial class Customer : EntityObject
{
...
}

The [MetadataType] attribute specifies the type of the class that contains validation information (CustomerValidations in this case).

Now, open the web form and place a ValidationSummary control below the GridView. Set its ShowModelStateErrors property to true. The ShowModelStateErrors property controls whether data model validation errors should be displayed in the ValidationSummary or not.

<asp:ValidationSummary ID="ValidationSummary1" runat="server" 
ShowModelStateErrors="true" ... />

In addition to displaying validation errors to the end user, you should also ensure that the changed Customer details are saved in the database only if model validations are successful. To do so, modify the UpdateCustomer() method as shown below:

public void UpdateCustomer(Customer c)
{
    NorthwindEntities db = new NorthwindEntities();
    var data = from item in db.Customers
                where item.CustomerID == c.CustomerID
                select item;
    Customer obj = data.SingleOrDefault();
    obj.CompanyName = c.CompanyName;
    ...
    if (ModelState.IsValid)
    {
        db.SaveChanges();
    }
}

Notice the code marked in bold letters. The UpdateCustomer() method now checks the state of the model using the ModelState.IsValid property. If all the model validations are successful, the IsValid property will return true and only then will changes be saved to the database.

Now, run the web form again and try to enter some invalid data. You should see validation errors similar to the following figure:

Validation Errors
Validation Errors

Summary

ASP.NET 4.5 supports model binding that allows a more code centric approach for performing CRUD operations on the data. Instead of using Data Source Controls, you can now write methods in the code behind file that select, insert, update and delete data from the underlying data store. The SelectMethod, InsertMethod, UpdateMethod and DeleteMethod properties of data bound controls are used to specify the respective method. You can also make use of Data Annotations for performing validations on the data being entered. Thus the new model binding features provide a more flexible and powerful approach to data binding.

Download the code for this article.



Related Articles

Downloads

Comments

  • REBINDING THE GRIDVIEW AFTER THE UPDATE

    Posted by JOHN PARLATO on 06/26/2013 05:33pm

    I am using this modelbinding. The one thing that nobody seems to be able to tell me is how, after a delete or insert, or update, can I rebind my control to the data, without refreshing the page. I want to be able to rebind the data control. However, I cannot call the selectmethod from the code behind, as its parms are set to come in from the view... so how can I rebind the data after it changes?

    Reply
  • Fake Oakley Big Taco no tax worldwide

    Posted by shgpbcuxi on 06/25/2013 03:40pm

    ray ban outlet ,The sunglasses alias sun mirror (or sunglasses) generally should prevent glare, UV and glare. Fashion periodicals and runway shows, designer glasses accessories with their program - that doesn't belong to the sunglasses - either clear lenses or only slightly tinted color lens. fake ray ban ,Suppose you have not seen and household Oakley sunglasses, in addition to production, incredibly simple formation of a large plastic frames. Oakleys is without question one among their very own class, has become the boom of your trend, they have got found many of the popular Hollywood performers. Cheap OakLey Eyepatch 2 ,These Oakley sunglasses come in the market for all ages, the complete array of colors, styles and designs. Sunglasses with many different sorts of several types of sunglasses around the protective effect of ultraviolet rays, glare, glare is not the same. In case you wish to have a solid self-expression, sunglasses is promoted like a "fashion statement" and the manner of expression of individualism. Especially frame by specialized type O substance material, that is closely flexibility and production, to soak up the impact. This particular function, relaxed portions of Oakley sunglasses. Additional Oakley sunscreen to make use of for medical use. Solutions in the UV radiation over the skin of psoriasis patients PUVA remedy with a stretch of time is well aware of the ultraviolet radiation. Artists and professional sunglasses, as expensive for your style of movement, greater than the expense of nearly all sunglasses. However, you can find a range of discount Oakley sunglasses on the net. Oakley may be perfecting the lens structure on the open frontier, thereby preventing all of the field of regard field with the down frame RIM like running and cycling athletes. Bending can transform the top contours of the lenses, causing optical distortion, and also you still have the optimized comfort also to conform to a flexible type of frame design. In addition to sunglasses online supplier of goggles for individuals who would like to play the slopes this year's perfect to accommodate prescription lenses in your eyes venue specifications. You can find visitors to get involved in the Oakley store offers clothing and accessories can even be estimated inside the style of Oakley win this market, this is not just out and excellent eyesight.

    Reply
  • Choosing earbuds for operating is no close on manage since it is the unit of our life

    Posted by motherdhmm on 06/04/2013 06:27pm

    [url=http://www.headphonescheaponlineaustralia.com/]beats by dre Australia[/url] Fake solitary is tiny. These 2 documents are provided with the natural transaction and not with the imitation. The battery act of the actual take care of, of course, has the serial million and Dr Dre¡¯s signature.The sham doesn¡¯t have any ( Perfect example inform of phoney battery wrap not included, valid imagine an unload time where the signature and serial should be). The differences fish tale in the material of the ear cup and the aforementioned battery covers.The battery denounce for disembark on the palpable deal also seems to be a a tad brighter [url=http://www.headphonescheaponlineaustralia.com/dre-beats-solo-hd-c-66_68_77.html]Dre beats solo HD[/url] The music, we monster beats know this lone art in search thousands of years seems to accept unbreakable link with humans; it brings more faculty on the daze Qiexi, carnival.When you sup, when accompanied close to mellisonant music and art to yield b reveal the feel, you resolution handle fashion taste, untried and contented feeling.Buy tuppence Beats sooner than Dre, ways to spot faker or earnest Horror Beats Studio.It settle upon allow you some different feelings.People make like this feeling. [url=http://www.headphonescheaponlineaustralia.com/]dr dre beats[/url] The Freak Beats Headphones tend the persuasion ¡°Goodness first, Help first¡±, establishing its label banner, and creating the capital trait services with the unremitting efforts. The Barbarity beats through dre headphones as a delegate of the mode archetype headphone last will and testament also be another recent manner of the high-grade beats past dre australia headphones product. It¡¯s form and unparalleled magnetism won the ear-splitting popularity from the fashionable people all over the world.

    Reply
  • Elija auriculares in-ear con los auriculares cubren los ojos

    Posted by cheneason on 06/04/2013 09:20am

    [url=http://www.beat-by-dre.blinkweb.com/]Beats by dre[/url] At Pressekonference afholdt med bestyrelsesmedlemmer i selskabet og pressen medlemmer, erklærede direktøren for selskabet, at statistikken over salget efter indførelsen af den nye beats har krydset benchmarks. Den digitale tidsalder med indførelsen af de nye teknologier også nødt til at opretholde de komplementære produkter som pr de nyeste standarder. Dette er, hvad kræver en opgradering i teknologien. Denne opgradering i teknologi er tilgængelig på helt minimerede satser på i form af de nyeste hovedtelefoner og headsets. Monster beats og andre mærker har hjulpet skabe sig en kunstnerisk niche. [url=http://www.comprarbeatsbaratos.weebly.com/]Comprar beats baratos[/url] Derudover dag Beats Electronics udvider sit in-ear produktudbud med lanceringen af de nye urBeats. Disse nye høretelefoner er specielt designet til at være en væsentlig opgradering fra hovedtelefonerne, der kommer med din musikafspiller: mere holdbarhed, bedre lyd, og en chance for at gøre reel retfærdighed til din musik. urBeats giver førsteklasses lydkvalitet, der er blevet synonym med Beats by Dr. Dre mærke. [url=http://www.beat-by-dre.blinkweb.com/]Beats by dre[/url] Jeg har efterhånden været indehaver af dette pragteksemplar i knap ét og jeg nyder hvert et øjeblik i selskab med mine Beats. Der er ingen tvivl om, at de har taget verden med storm og de er kommet for at blive. Det kan tage lang tid at finde det rette headset, men med disse Beats by Dr. Dre Studio er jeg tydeligvis ikke gået galt i byen på noget tidspunkt. Hverken i forhold til min stationær,

    Reply
  • CHI Nano Keramisk Fladjern

    Posted by cheneason on 05/30/2013 06:16pm

    [url=http://www.beatsbydrebaratos.blinkweb.com/]Beats by dre baratos[/url] Vores online butik handling, du den billigste og Billige GHD Styler. Nogle gange er det faktisk vigtigt for en babe at købe Ghd Sjældne Styler anon hos grossister, arcade online eller fordi yderligere ghd glattejern. Det er acceptabelt for typer af hår. [url=http://www.beats-by-dre-2013.webs.com/]auriculares beats baratos[/url] Spil i en travl dags arbejde, den første ting, vi ønsker at prøve at slappe af, så varmt vandbad er den bedste måde at låse en dag træt. Når du vasker dit hår ingen måde til straks at slippe af med, så du brug for hjælp med en hårtørrer til at tørre dit hår. Nej hårtørrer, så er du nødt til at vente på håret til at tørre langsomt. På denne måde, et spild af tid ikke kan lide at tørre hår, hvordan man skal gøre, hvis du fange op med arrangementer. Så du skal du bruge en ghd hårtørrer. Hårtørreren, så længe du køber vores ghd håret, kan du nemt få. Vores ghd glat hår med en hårtørrer tilbehør, kort, smukke spejl, og ghd fladjern så specielt pakker, faciliteter, ikke alene kan spare dig for en pose, kan blæse dit hår tørre, og derefter bruge ghd glattejern til at oprette en ny frisure . Virkelig tjene to formål. [url=http://www.cascosbeats.blinkweb.com/]cascos beats[/url] Som små som du kunne have ghd fladjern mulighed for at købe ved hjælp af et bestemt håndtere derude som supplement til investere i

    Reply
  • You lust after some tomato basil and mozzarella. Into indoor say, these slippers are as light and manueverable as sneakers.

    Posted by Soaceddew on 04/24/2013 05:57pm

    Has upright released some new color Free Inneva Woven shoes, Nike recently with another direction to lure shoes with distinguishable styling to all [url=http://markwarren.org.uk/goodbuy.cfm]nike free uk[/url] eyes. This brings special print run Unfastened Inneva Woven is a White Marker of works in the series, represents shoes Italian made the assurance. Latest Liberated Inneva Woven clouded and blue are present in two color schemes, to hand-knit Woven vamp in addition to infiltrated Italy's [url=http://fossilsdirect.co.uk/glossarey.cfm]nike huarache free[/url] finest crafts, for the moment gives athletes closed to the foot of ease, the most important possibility a affairs is the end of Free 5 configuration, barefoot consider it pass on contribute to cannot be ignored. Nike Empty Inneva Woven SP Milk-white Label Compact on March 16 at outlets for everyone the [url=http://turbo-vac.co.uk/components_13.cfm]nike free uk[/url] trade name on the shelves, and on sale in minimal tone, interested friends should settle fasten attention to Nike announced the news.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • With JRebel, developers get to see their code changes immediately, fine-tune their code with incremental changes, debug, explore and deploy their code with ease (both locally and remotely), and ultimately spend more time coding instead of waiting for the dreaded application redeploy to finish. Every time a developer tests a code change it takes minutes to build and deploy the application. JRebel keeps the app server running at all times, so testing is instantaneous and interactive.

  • As businesses have grown in size and global reach, emerging technologies such as cloud computing and virtualization have appeared to help companies effectively connect and grow. However, the networking strategies and infrastructures that keep organizations connected have often remained in the past. Now, new strategies that leverage global connectivity and locations exist to provide a more flexible and cost-effective alternative to traditional networking systems. This Aberdeen report analyzes how top performing …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds