Introduction

ASP.NET 4.5 provides a flexible alternative to server data controls called as, Model Binding. Using the new data model binding, you can directly use methods instead of data source to perform CRUD operations.

In this article I will explain in detail how we can implement Model Data Binding with ASP.NET data controls. Here I am showing you some examples on GridView control, the same applicable to other data controls.

Creating a Sample Website

Now let’s create a web form that illustrates the complete process in detail.

Step1: Create a new ASP.Net web project, named GridViewModelBinding

Step 2: Right click on App_Data folder -> Add -> New Item -> select Sql Server Database from Data template -> name the database as deUsers.mdf

Step 3: double click on deUsers.mdf file which is in App_Data folder, it opens a Server Explorer

Step 4: Create the table called User with following columns

Step 5: Open the User table and enter few records into it

Step 6: Right click on project file -> Add -> New Item -> select ADO.NET Entity Data Model from Data template -> name the file name as User.edmx, Once the file is created, you will see the below data model

Step 7: Open the default.aspx web form and place a GridView control on it. Configure the GridView to show Id, UserName, FirstName LastName, Email,and Phone columns. Also add Edit and Delete command buttons. The following markup is the sample GridView:

                SelectMethod=”GetUsers” UpdateMethod=”UpdateUser” DeleteMethod=”DeleteUser”

                AutoGenerateColumns=”False”

                AllowSorting=”true” AllowPaging=”true”

                CellPadding=”4″ ForeColor=”#333333″ GridLines=”None”>

           

Notice SelectMethod, UpdateMethod and DeleteMethod properties are set to GetUsers, UpdateUser and DeleteUser respectively. I will explain each one in below sections.

SelectMethod

In order to display data in the GridView you need to attach a method which gets the records from database and binds to GridView control.

Now write a method that fetches data from the data store and then specify the name of it in the SelectMethod property of GridView. So, switch to the code behind and add a method named GetUsers () as shown below:

      public IQueryable GetUsers()

        {

            deUsersEntities db = new deUsersEntities();           

            return db.Users;

        }

The GetUsers () method returns an IQueryable collection of User objects. Inside it fetches all of the records from the User 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.

UpdateMethod

In order to update the record from GridView to database, we need to attach a method to UpdateMethod property of GridView control.

Now write a method that fetches data from the data store and then specify the name of it in the UpdateMethod property of GridView. So, switch to the code behind and add a method named UpdateUser () as shown below:

// The object which is bounded to the row to be passed as parameter on updating record

public void UpdateUser(User modifiedUser)

        {

            deUsersEntities db = new deUsersEntities();

            User oUser = db.Users.FirstOrDefault(i => i.Id == modifiedUser.Id);

            oUser.UserName = modifiedUser.UserName;

            oUser.FirstName = modifiedUser.FirstName;

            oUser.LastName = modifiedUser.LastName;

            oUser.Email = modifiedUser.Email;

            oUser.Phone = modifiedUser.Phone;

            db.SaveChanges();

        }

DeleteMethod

Now same way write a method to delete the user and attach the method name to DeleteMethod property of GridView:

// The id parameter name should match the DataKeyNames value set on the control

public void DeleteUser(int Id)

        {

            deUsersEntities db = new deUsersEntities();

            User oUser = db.Users.FirstOrDefault(i => i.Id == Id);

            db.Users.Remove(oUser);

            db.SaveChanges();

        }

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

Summary

The same above procedure can be applicable to all the ASP.NET data controls like list view, detail view, etc. All these operations will be call on demand of the control over the operations like Sorting, Paging.

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