Introduction:
Sometimes our requirement
does not fulfill with the functionality provided by the existing web
user control in visual studio and we want to extend their
functionality as per our requirement so in this case we need create custom control. We can create our own custom controls
or extend the functionality of already existing controls.
Implementation: Let's create custom control follow the steps
given below:
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>
0 comments:
Post a Comment