Microsoft has many changes in .NET, including the way of working with forms and controls.
What Is an ASP.NET User Control?
An ASP.NET user control is a group of one or more server controls or static HTML elements that encapsulate a piece of functionality. A user control could simply be an extension of the functionality of an existing server control.
A user control typically resides on a page with other elements. This breakup of functionality could be the basis of an entire application built with independent and reusable user controls. The controls could then be dynamically loaded into different areas of the page.
User Control vs. Other Controls:
One source of confusion when working with ASP.NET knows the difference between the many different types of controls.
For Example: An ASP.NET control is a server-side component that is shipped with .NET Framework. A server control is a compiled DLL file and cannot be edited. It can, however, be manipulated through its public properties at design time or runtime.
User control will consist of previously built server controls. It has an interface that can be completely edited and changed. It can be manipulated at design-time and runtime via properties that you are responsible for creating.
How to open Web User Control:
To open Web User Control, the following steps will help you.
Step 1: Open new web site.
Step 2: Go to solution explorer and right click on the project. You will see the following list.
Figure 1: Add New Item in Solution Explorer.
Step 3: Click on add new item then you will see something as:
Figure 2: Web User Control select from here.
Step 4: Then select Web User Control and click on add button.
An .ASCX file cannot be viewed directly in the browser. It will need to be placed within a container (such as another Web form) to be viewed.
So, let's add a new Web form to the project, open it, and drag the User Control file onto the page. The User Control display as follows:
Figure 3: Web User Control.
Source code of Web User Control is as follows:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
This adds a file with the extension .ascx to the project. This is the file that the user control will use to expose its interface.
For Example: In the given example you can learn how to use Web User Control in ASP.NET 2.0.
WebUserControl.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
<table cellpadding="0" cellspacing="0" width="50%">
<tr>
<td>
<asp:ImageButton ID="imagelink" runat="server" Height="100" Width="400" OnClick="imageclick" ImageUrl="~/Sunset.jpg" />
</td>
</tr>
</table>
Design view of the Web User Control:
Figure 4: Web User Control.
Another Web User Control is as follows:
WebUserControl2.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl2.ascx.cs"Inherits="WebUserControl2" %>
<asp:Image ID="imgshow" runat="server" Height="100" ImageAlign="Right" Width="400" ImageUrl="~/Water lilies.jpg" />
Design view of WebUserControl2:
Figure 5: Web User Control2.
Now we add the new web page because it will need to be placed within a container to be viewed.
Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="WebUserControl.ascx" TagName="WebUserControl"TagPrefix="uc1" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" /><br /><br />
<asp:Button ID="btn" runat="server" Text="Submit" OnClick="btnsubmit_click" />
</div>
</form>
</body>
</html>
Design view of default.aspx:
Figure 6: First web page.
Default.aspx.cs:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{}
protected void btnsubmit_click(object sender, EventArgs e)
{
Response.Redirect("default2.aspx");
}
}
Default2.aspx: I am taking two Web User Controls on this page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Src="WebUserControl.ascx" TagName= "WebUserControl" TagPrefix="uc1" %>
<%@ Register Src="WebUserControl2.ascx" TagName="WebUserControl2" TagPrefix="uc2" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl ID="WebUserControl1" runat="server" /><br/><br />
<uc2:WebUserControl2 ID="WebUserControl2_1" runat="server" />
</div>
</form>
</body>
</html>
Design view of default2.aspx:
Figure 7: Second web page.
Similarly you can add many web pages in your website. Now debug your application. The output will as follows:
Figure 8: Output of the default page.
When you click on submit button then the following page will open.
Figure 9: Second web page.
When you click on first image then you will see the following page.
Figure 10: Third web page.