User Control in ASP.Net

Here I would like to show the basics of creating and using User Controls of web based applications for beginners. Here I need to describe why we create a User Control and also describe how to create a User Control and how to use them in web applications. I have covered the following topics in this article.

For Window form Application based User Control Cick here.

1. Why to make a User Control
2. How to create a User Control in a web based application
3. How to use a User Control

1. Why we make a User Control

A User Control provides additional re-use flexibility with large scale web projects. They also help for diagnosing bugs and resolving bugs quickly. If you want some changes in your code then you need to write code in one place (a User Control) that effects every web form. Using this technique you can save your extra effort and also save your time.

2. How to create a User Control in web based applications

Step 1: Create new web site then go to "File" => "New" => "Web Site...".



Step 2: Choose "ASP.NET Empty Web Site" or "ASP.NET Web Site" and click "OK".



Step 3: Go to the Solution Explorer then right-click your applicationthen choose "Add New Item".

Step 4: Go to "Visual C#" then choose "Web User Control" then click on the "Add" button.

 

Step 5: After adding the control, drag and drop the control as per your requirements.

This is my simple demo

My design is like this: Here I have dragged and dropped three TextBoxes and one Button control.

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class mywebUsercontrol : System.Web.UI.UserControl
{
    #region Public Member
    public string Name { get; set; }
    public string Age { get; set; }
    public string Qualification { get; set; }
    public event EventHandler save;
    #endregion
    #region event
    /// <summary>
    /// Here I have to assign TextBox value to the public property.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
        Name = txtName.Text.Trim();
        Age = txtAge.Text.Trim();
        Qualification=txtQualification.Text.Trim();
    }
    /// <summary>
    /// here i have to handle property null or empty and call save event.
    /// if you use this control on any web page then you fire save event.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (!(string.IsNullOrEmpty(Name) || string.IsNullOrEmpty(Age) || string.IsNullOrEmpty(Qualification)))
        {
            if (save != null)
                save(sender, e);
        }
    }
    /// <summary>
    /// this written for clear the all textbox.
    /// </summary>
    public void ResetControl()
    {
        txtName.Text = string.Empty;
        txtAge.Text = string.Empty;
        txtQualification.Text = string.Empty;
    }
    #endregion
}

Step 6: Then write some code in the code behind of the User Control.

3. How to use the User Control in a Web page

Step 1: Go to Visual Studio 2010 and in the Solution Explorer drag and drop the User Control to your web page (.aspx file).

Step 2: Then write this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
public partial class DemoUserControl : System.Web.UI.Page
{
    /// <summary>
    /// In page load method fire save event which define in user
    /// control.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Page_Load(object sender, EventArgs e)
    {
        //here fire usercontrol event save.
        mywebUsercontrol1.save += new EventHandler(mywebUsercontrol1_save);
    }
    /// <summary>
    /// here i have to write code to save data in Datatable.
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void mywebUsercontrol1_save(object sender, EventArgs e)
    {
        DataTable _dtsave =this.MyDataTable();
        //Here get TextBox value from public property defined in usercontrol.
        _dtsave.Rows.Add(mywebUsercontrol1.Name, mywebUsercontrol1.Age, mywebUsercontrol1.Qualification);
        //below written code bind gridview with data.
        gdvSaveData.DataSource = _dtsave;
        gdvSaveData.DataBind();
        //here call resetcontrol method define in usercontrol.
        mywebUsercontrol1.ResetControl();
    }
    /// <summary>
    /// create datatable with some column.
    /// </summary>
    /// <returns></returns>
    private DataTable MyDataTable()
    {
        DataTable _dt = new DataTable();
        _dt.Columns.Add("Name");
        _dt.Columns.Add("Age");
        _dt.Columns.Add("Qualification");
        return _dt;
    }
}

Step 3: Output