Pages

Friday, August 21, 2009

User Control Vs. Custom Control

This Article Covers User controls and Custom Control in Asp.Net
A. What is user control?
B. What is custom control?
C. What are the basic differences between them?

------------------------------------------------------------------------------------------------

A.What is user control?
User controls are reusable controls, and they use the same technique which is used by HTML and Web server controls.
They offer an easy way to partition and reuse common user interfaces across ASP.NET Web applications.
How to create a user control(10 Easy Steps: From Creation to Implementing)
The process for creating a user control is almost same to the process of creating a Web Form.
The difference is: user control does not include the "html, body, and form" tag elements
Example: Create a User Control

1.Start a web application, add a simple webform, in this form we will implement Our User Control.
2.Now Add a New Item from solution Explorer.
3.Add a Web User Control in your application, this will have .ascx extension.
4.Now the design page will be in front of you, so here you can put whatever u want in ur User control. I did it like this in design page:-
<P>
<asp: Label id="lblName" runat="server">Enter Name Here</asp: Label>
<asp: Textbox id="txtName" runat="server"></asp: Textbox>
</P>
<P>
<asp: Label id="lblPass" runat="server">Enter Password</asp: Label>
<asp: Textbox id="txtPass" runat="server" Text Mode="Password"></asp: Textbox>
</P>
<P>
<asp: Button id="btnDisplay" runat="server" Text="Display"></asp: Button>
</P>
<P>
<asp: Label id="lblOutput" runat="server"></asp: Label>
</P>

5. The above code provides a user to enter his name and password, and user can click on Display button to see what data is entered by him/her.
6. On the button Click event I wrote the following code

Private void btnDisplay_Click (object sender, System.EventArgs e)
{
lblOutput.Text=
"User Name:-"+txtName.Text+"\n"+"Password:-"+txtPass.Text;
}

7. Compile and save the application. (Hope there should be no Error)
8. Now come back to our webform which we added at the beginning of our application.
9. Open solution explorer, u can find our Usercontrol with .ascx extension will be present and waiting for something to happen, drag and drop it onto the webform.
(This drag and drop process will automatically put following code in design form (HTML) for registering that User Control)
Ex :-( Near Page Directive)
<%@ Register TagPrefix="uc1" TagName="WebUserControl1" Src="WebUserControl1.ascx" %>

AND (In the Form Tag)
"<uc1:WebUserControl1 id="WebUserControl11" runat="server"></uc1:WebUserControl1>"

10. Run the application and Enjoy………….

User control processing IN Depth:-
What happens when a page with a user control is requested?
Answer is right here:-
· The page parser parses the .ascx file (it Gets the file from @Register Directive)and generates a class that derives from the System.Web.UI.UserControl class. And compile the class dynamically. But Actually most of us visual studio for all this stuff so at the design time a code behind file for the user control is created and precompiled by the designer. That means finally at runtime it have all the code i.e. the generated one + what we wrote in .ascx.cs file.

B.What is custom control?
They are compiled code components that execute on the server, and render markup text, such as HTML or XML, as a normal Web Form or user control does.
How to create a Custom control(10 Easy Steps: From Creation to Implementing)
1. Start a Console application(Default Name will be ConsoleLibrary1), automatically there will be default class Called Class1 is created.
2. Add a reference to your application called Syatem.Web.
3. Choosing A Base Class:
To Create a custom control first we need to choose a base class which may be System.Web.UI.Control if we want to render nonvisual elements. OR we can choose System.Web.UI.WebControls.WebControl if we want the control to render HTML that generates a visual interface.And if we need to extend the functionality of an existing control like TextBox ,Button,GridView, then we drive our class from the existing class for the controls and overdide the behaviour .
4. Derive your class (Class1) by your choosen class,in my application I have done in the following manner.
using System;
using System.Web;
using System.Web.UI;
namespace ClassLibrary1
{
public class Class1:Control
{
public Class1()
{
}
}
}
5. Override a general Method of Control class Called Render:
protected override void Render(HtmlTextWriter writer)
{
writer.Write("This Is My Custom Control");
}

6. Our Custom Control is almost Created , now we are moving ahead by adding some functionality to our Control,i.e. we are goin to add a property in our control. Here is the full stuff.
using System;
using System.Web;
using System.Web.UI;
namespace ClassLibrary1
{
public class Class1:Control
{
private string _MyValue;
public string MyValue
{
get
{
return _MyValue;
}

set
{
_MyValue = value;
}
}

public Class1()
{

}

protected override void Render(HtmlTextWriter writer)
{
writer.Write("This Is My Custom Control"+ _MyValue);

}

}
}

7. Compile project. It will generate the DLL output (ClassLibrary1 In our case).
8. create a new ASP.NET Web application project, add a webform in it. Add the reference og our Custom Control DLL.
9. Register the custom control on the Web Forms design page.
(It will come near @Page Directive)
"<%@ Register TagPrefix="cc1" Namespace="ClassLibrary1" Assembly="ClassLibrary1" %>"
(Inside Form Tag)
"<cc1:Class1 id="Class11" runat="server"></cc1:Class1>"
10. Run the application and Enjoy………………….
-->We can Use the property of our custom control in code-behind of our webform like this:-
Class11.MyValue=" Hi Bheeshma";
-->we can add our custom control in the toolbox. By right click in the toolbox--> Add/Remove Items --> Browse and Select the DLL of our custom control(ClassLibrary1 in our case)--> Click ok. And it is Done and you can see it in your Toolbox.(Name will be Class1 in our Case)
Now we can directly drag and drop our control from the toolbox , no need of fancy registration as we did in Step 9.
D. Difference between User and Custom Control
1. User control is made for single-application environment, while custom control can be used in more than one application.
2. User Control are source in .ascx extension while Custom controls are .dll and can be reside in GAC.
3. User control are static in nature while in case of custom control we can add more dynamic features and can make them to work in similar way as the web server controls work.

Hope this will help to understand user/custom control.
Comments and feebacks are required to improve the english and content.

Thanks & Regards
Bheeshma P. Nayak

2 comments:

ketan said...

thanks man..its really lot of good info at one place.

vineet said...

hey buddy....ur blog really informative....i hope, im keep visiting here...