How to create custom control in asp.net | or how to extend the functionality of the web user control by customizing it.

Introduction: Sometimes our requirement does not fulfill with the functionality provided by the already existing web user control provided by the visual studio and we want to extend their functionality as per our requirement so in this case we need custom control.We can create  our own custom controls or extend the functionality of already existing controls.

In previous article i explained Asp.Net interview questions and answers with example for beginner, intermediate and experienced level and Difference between String and StringBuilder class and Use of SELF JOIN in SQL SERVER with example and 15 main Difference between DataSet and DataReader in asp.net and Delete confirmation before delete Or Yes/No confirmation in asp.net

Implementation:Let's create custom control follow the instruction:

Note: We are extending the functionality of the button control so that when it is clicked it prompts a alert message whether you want to delete or not?

• Open visual studio -> File -> New -> Project -> select visual c# under Installed Templates and expand it -> select Web -> select ASP.NET Empty Web Application

• Give Name to the project as “MyCustomControl” or whatever you want and then specify the location where you want this project to store and then Click Ok.

• Now go to solution Explorer and select your project and right click on it and select add -> New Item- Name it like “MyControl” and click on Add.

Add the following class below already added partial class

public class myButton : Button

    {

        public myButton()

        {

        }

        private string _AlertMsg = "Are you sure you want to delete?";

        public string AlertMessage

        {

            set { _AlertMsg = value; }

            get { return _AlertMsg; }

        }

        protected override void AddAttributesToRender(HtmlTextWriter writer)

        {

            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "return confirm('" + _AlertMsg + "')"); base.AddAttributesToRender(writer);

        }

    }

• Now go to Build menu -> Build the project(“MyCustomControl”)

• Then go to design page and click on visual studio box. You will see a newly control “MyControl” added under “MyCustomControl components” category.

• Drag this control on the design page and go to its source file and write as:

  <%-- Custom alert message--%>

    <cc1:myButton ID="myButton1" runat="server" Text="Delete"  OnClick="myButton_Click" />

        <%--Delfault alert message--%> 

        <cc1:myButton ID="MyButton2" runat="server" Text="Delete" AlertMessage="Hello" OnClick="myButton_Click" />

• Now you just need to write the myButton_Click event in the code behind and the whole code behind file be like:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace MyCustomControl

{

    public partial class MyControl : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

        }

        protected void myButton_Click(object sender, EventArgs e)

        {

            // Do your deletion processing here

        }          

    }

    public class myButton : Button

    {

        public myButton()

        {

        }

        private string _AlertMsg = "Are you sure you want to delete?";

        public string AlertMessage

        {

            set { _AlertMsg = value; }

            get { return _AlertMsg; }

        }

        protected override void AddAttributesToRender(HtmlTextWriter writer)

        {

            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "return confirm('" + _AlertMsg + "')"); base.AddAttributesToRender(writer);

        }

    }

}

• And the design file will be like:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyControl.aspx.cs" Inherits="MyCustomControl.MyControl" %>

<%@ Register assembly="MyCustomControl" namespace="MyCustomControl" tagprefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

  <%-- Custom alert message--%>

   <cc1:myButton ID="myButton1" runat="server" Text="Delete"  OnClick="myButton_Click" />

<%--Default alert message--%>

    <cc1:myButton ID="MyButton2" runat="server" Text="Delete" AlertMessage="Sure to Delete?" OnClick="myButton_Click" />

   

    </div>

    </form>

</body>

</html>

Now over to you:

" I hope you have got how to create custom control in Asp.Net MVC and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."

• Tweet
• Share
• Share
• Share

Related Post