Front end and Back end: What is user control?

What ever the control it is, the ultimate need is provide information to the user through web browser by displaying content in effective manner. For this micro soft has developed few controls like grid view, repeater, list view, dropdown list etc.. Which are predefined controls and each has its own importance.

Where user defined controls are the one which developers build on there own according to requirement.

They might be usercontrols or controls that are build with web control library.

User controls are similar to aspx pages but extension is ascx page, which are build very specific or pointed to business requirement.

Example :-

Build a generic panel when giving date of birth as input should display the day (Thursday or Friday...).

In this case i will use a usercontrol which can be placed as a panel in aspx page and also can be used in many pages when and there required. (Code re usability).

Where as controls that are build with web control library are like dropdown list controls which developer can design his own component, which he can mention the rendering HTML content when response is thrown by server to browser.

I am creating a UserControl for above stated example (Date Of Birth)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DOB.ascx.cs" Inherits="DOB" %>
Day :
<asp:Label ID="lblDay" runat="server"></asp:Label>

Iniside ascx page html content

In Code behind page

using System;
using System.Data;
using System.Configuration;
using System.Collections;
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 DOB : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{

}
//public variables to which date,month,year are assigned from parent page to display day
public int intDate = 0, intMonth = 0, intYear = 0;
public bool ShowDay
{
set
{
//Propoerty defined which when set to true after assigning values to abive variables
// shows/displays day
if (value)
{
//array defined with days based on indexes
string[] objDays = new string[] { "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" };
//Datetime object creation with the variable values
DateTime objDateTime = new DateTime(intYear, intMonth, intDate);
//Displaying day fromm array based on day of the week index from date time object
lblDay.Text = objDays[Convert.ToInt32(objDateTime.DayOfWeek)].ToString();
}
}

}
}

Now I am opening aspx page (Default.aspx) to use the abive day user control.
In aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/DOB.ascx" TagName="Cal" TagPrefix="c1" %>
<!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>
<table>
<tr><td>Date :</td><td><asp:TextBox ID="txtDate" runat="server"></asp:TextBox></td></tr>
<tr><td>Month :</td><td><asp:TextBox ID="txtMonth" runat="server"></asp:TextBox></td></tr>
<tr><td>Year :</td><td><asp:TextBox ID="txtYear" runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Button ID="btnDisplayDay" runat="server" Text="Day?" OnClick="btnDisplayDay_Click" /></td><td>
<c1:Cal runat="server" ID="cl1" />
</td></tr> <tr><td></td><td></td></tr>
</table>

</div>
</form>
</body>
</html>

In code behind page

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 btnDisplayDay_Click(object sender, EventArgs e)
{
//cl1 is the ID of the user control instance from aspx page
cl1.intDate = int.Parse(txtDate.Text);
cl1.intMonth = int.Parse(txtMonth.Text);
cl1.intYear = int.Parse(txtYear.Text);
cl1.ShowDay = true;
}
}

Output :