A few people asked me recently how you can add a custom control inside a GridView and then allow two-way data binding to this custom user control.

In this very short post I will explain how to do two-way data binding using .Net Framework 4.5, SQL and C#. I have also included a full project that you can download at the end of this post.  This will be seen as Part 1, hopefully of many.  I will be using this project to add more information in the future about custom user controls in Web Forms.

I will be using Visual Studio 2012 and SQL Server 2012 for this demo.

Setup:

• In Visual Studio, create a new empty web forms project.
• Create two folders in the project and call them Controls and Pages.  We will use the controls folder to save all the controls and all out pages will be saved in the Pages folder.
• Now we need to add a custom control (ascx) file to the Controls folder and a WebForm (aspx) file to the Pages folder.
• Open SQL server and create a database and table that we will use for this demo.  You can run the following script on your newly created database.

  CREATE TABLE [dbo].[Emp]( [ID] [int] IDENTITY(1,1) NOT NULL, [Name] [varchar](50) NULL, CONSTRAINT [PK_Emp] PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]

  CREATE TABLE [dbo].[Emp]( [ID] [int] IDENTITY(1,1) NOT NULL, [Name] [varchar](50) NULL, CONSTRAINT [PK_Emp] PRIMARY KEY CLUSTERED ( [ID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]

Once you have completed this your project should look like this:

 User Control (ascx)

Add the following code to your code behind on the custom user control:

using System;
 
namespace TwoDataBidingControl.Controls
{
    public partial class TwoWayDataBinging : System.Web.UI.UserControl
    {
        public string Name
        {
            get
            {
                return TextBoxTwoWayBinding.Text;
            }
            set
            {
                TextBoxTwoWayBinding.Text = value;
            }
        }
 
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    }
}

And add the following code to your ascx file.  We are only adding one text box in the custom user control for two-way binding.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TwoWayDataBinging.ascx.cs" Inherits="TwoDataBidingControl.Controls.TwoWayDataBinging" %>

Two Way Binding Page (aspx)

On the testing page we will add a grid view, SQL data source and insert our custom control as an edit template inside the GridView.  You can use the following code and paste it inside your aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TwoWayDataBinding.aspx.cs" Inherits="TwoDataBidingControl.Pages.Default" %>
<%@ Register Src="~/Controls/TwoWayDataBinging.ascx" TagPrefix="uc2" TagName="TwoWayDataBinging" %>

For the SQL data source you will have to add a connection string to the database inside the web config.

<!--?xml version="1.0"?-->

Run the program and you will be able to edit the data inside the grid view using a two-way binding text box.

Download