Wednesday, 13 March 2013

Difference between User controls and Custom controls in asp.net

  • What are user controls?
  • What are custom controls?
  • What are the basic differences between user controls and custom controls?

What are user controls?

User controls are custom, reusable controls, and they use the same techniques
 that are employed by HTML and Web server controls. They offer an easy way
to partition and reuse common user interfaces across ASP.NET Web applications.
They use the same Web Forms programming model on which a Web Forms page works.

How to create a user control

The syntax you use to create a user control is similar to the syntax you use to create
a Web Forms page (.aspx). The only difference is that a user control does not include
 the <html>, <body>, and <form> elements since a Web Forms page hosts the user control.
 To create a user control, follow these steps:
  1. Open a text or HTML editor, and create a server-side code block exposing all
      the properties, methods, and events.



<script language="C#" runat="server">
   public void button1_Click(object sender, EventArgs e)
   {
      label1.Text = "Hello World!!!";
   }
</script>


2.Create a user interface for the user control.



<asp:Label id="label1" runat="server"/>
 <br><br>
<asp:button id="button1" text="Hit" OnClick="button1_Click" runat="server" />


How to use a user control in a Web Forms page

  1. Create a new Web Forms page (.aspx) in Microsoft Visual Studio .NET 2002,
  2.  Microsoft Visual Studio .NET 2003, Microsoft Visual Studio 2005, or any text editor.
  3. Declare the @ Register directive. For example, use the following code.



    <%@ Register TagPrefix="UC" TagName="TestControl" Src="test.ascx" %>

    Note Assume that the user control and the Web Forms page are in the same location.
  4. To use the user control in the Web Forms page, use the following code after the
     @ Register directive.



<html>
    <body>
          <form runat="server">
               <UC:TestControl id="Test1" runat="server"/>
          </form>
    </body>  
</html>



How to create an instance of a user control programmatically in the code behind file

of a Web Forms page

The previous example instantiated a user control declaratively in a Web Forms page using the
 @ Register directive. However, you can instantiate a user control dynamically and add it to the page.
Here are the steps for doing that:
  1. Create a new Web Forms page in Visual Studio.
  2. Navigate to the code behind file generated for this Web Forms page.
  3. In the Page_Load event of the Page class, write the following code.



    // Load the control by calling LoadControl on the page class.
    Control c1 = LoadControl("test.ascx");
                
    // Add the loaded control in the page controls collection. 
    Page.Controls.Add(c1);
    

    Note You can add a user control dynamically at certain events of the page life cycle.

How a user control is processed

When a page with a user control is requested, the following occurs:
  • The page parser parses the .ascx file specified in the Src attribute in the @ Register
        directive and generates a class that derives from the System.Web.UI.UserControl class.
  • The parser then dynamically compiles the class into an assembly.
  • If you are using Visual Studio, then at design time only, Visual Studio creates a code
       behind file for the user control, and the file is precompiled by the designer itself.
  • Finally, the class for the user control, which is generated through the process of dynamic
       code generation and compilation, includes the code for the code behind file (.ascx.cs)
      as well as the code written inside the .ascx file.

What are custom controls?

Custom controls are compiled code components that execute on the server, expose the object model,
and render markup text, such as HTML or XML, as a normal Web Form or user control does.

How to choose the base class for your custom control

To write a custom control, you should directly or indirectly derive the new class from the
System.Web.UI.Control class or from the System.Web.UI.WebControls.WebControl class:
  • You should derive from System.Web.UI.Control if you want the control to render nonvisual
           elements. For example, <meta> and <head> are examples of nonvisual rendering.
  • You should derive from System.Web.UI.WebControls.WebControl if you want the control
         to render HTML that generates a visual interface on the client computer.
If you want to change the functionality of existing controls, such as a button or label, you can directly
 derive the new class with these existing classes and can change their default behavior.

In brief, the Control class provides the basic functionality by which you can place it in the control
 tree for a Page class. The WebControl class adds the functionality to the base Control class for
 displaying visual content on the client computer. For example, you can use the WebControl class
 to control the look and styles through properties like font, color, and height.

How to create and use a simple custom control that extends from System.Web.UI.Control using

Visual Studio

  1. Start Visual Studio.
  2. Create a class library project, and give it a name, for example, CustomServerControlsLib.
  3. Add a source file to the project, for example, SimpleServerControl.cs.
  4. Include the reference of the System.Web namespace in the references section.
  5. Check whether the following namespaces are included in the SimpleServerControl.cs file.



    System
    System.Collections
    System.ComponentModel
    System.Data
    System.Web
    System.Web.SessionState
    System.Web.UI
    System.Web.UI.WebControls
    

  6. Inherit the SimpleServerControls class with the Control base class.



    public class SimpleServerControl : Control

  7. Override the Render method to write the output to the output stream.



    protected override void Render(HtmlTextWriter writer) 
    {
      writer.Write("Hello World from custom control");
    }
    

    Note The HtmlTextWriter class has the functionality of writing HTML to a text stream.
  8. The Write method of the HtmlTextWriter class outputs the specified text to the HTTP response stream and is the same as the Response.Write method.
  9. Compile the class library project. It will generate the DLL output.
  10. Open an existing or create a new ASP.NET Web application project.
  11. Add a Web Forms page where the custom control can be used.
  12. Add a reference to the class library in the references section of the ASP.NET project.
  13. Register the custom control on the Web Forms page.



    <%@ Register TagPrefix="CC " Namespace=" CustomServerControlsLib " Assembly="CustomServerControlsLib " %>

  14. To instantiate or use the custom control on the Web Forms page, add the following line of code in the <form> tags.



    <form id="Form1" method="post" runat="server">
        <CC:SimpleServerControl id="ctlSimpleControl" runat="server">
        </CC:SimpleServerControl >
    </form>
    

    Note In this code, SimpleServerControl is the control class name inside the class library.
  15. Run the Web Forms page, and you will see the output from the custom control.


What are the basic differences between user controls and custom controls?

Now that you have a basic idea of what user controls and custom controls are and how to create them, let's take a quick look at the differences between the two.
 
FactorsUser controlCustom control
DeploymentDesigned for single-application scenarios

Deployed in the source form (.ascx) along with the source code of the application

If the same control needs to be used in more than one application, it introduces redundancy and maintenance problems
Designed so that it can be used by more than one application

Deployed either in the application's Bin directory or in the global assembly cache

Distributed easily and without problems associated with redundancy and maintenance
CreationCreation is similar to the way Web Forms pages are created; well-suited for rapid application development (RAD)Writing involves lots of code because there is no designer support
ContentA much better choice when you need static content within a fixed layout, for example, when you make headers and footersMore suited for when an application requires dynamic content to be displayed; can be reused across an application, for example, for a data bound table control with dynamic rows
DesignWriting doesn't require much application designing because they are authored at design time and mostly contain static dataWriting from scratch requires a good understanding of the control's life cycle and the order in which events execute, which is normally taken care of in user controls







 





 
 

 

 

 

No comments:

Post a Comment