Properties in ASP.Net User Control

Vithal Wadje
9y
25.2k
0
2

Article

Background

I have often read a common question in forum posts of how to set the values of a User Control from a parent page in ASP.NET but no one has provided the proper solution so by considering the preceding requirements I have decided to write this article to provide the step-by-step solution to create a User Control. So let us start creating an application so beginners can also understand.

What User Control Properties Are

User Control properties are used to set the values of a User Control from the parent page.

For more details of how to create a User Control please refer to my previous article:

Creating User Control in ASP.NET

So let us learn practically about User Controls in depth.

Step 1: Create Web Application

Now let us create the sample web application as follows:

"Start" - "All Programs" - "Microsoft Visual Studio 2010".
"File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).
Provide the web site a name such as "PropertiesinUsercontrol" or another as you wish and specify the location.

Step 2: Create the User Control

Then right-click on the project in the Solution Explorer then select "Add New Item" then select Web User Control template as in the following:

Now open the design mode and add the two textboxes. After adding it, the User Control source code will look as follows:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="student.ascx.cs" Inherits="student" %>
<h3>This is User Contro1 </h3>
<table>
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>City</td>
<td><asp:TextBox ID="txtcity" runat="server"></asp:TextBox></td>
</tr>

Step 3: Create Properties in User Control

Write the following code in the student.ascx.cs file to create the properties as:

public string Name
{
get { return txtName.Text; }
set { txtName.Text = value; }
}
public string City
{
get { return txtcity.Text; }
set { txtcity.Text = value; }
}

In the preceding code we are setting the values to the User Control textboxes, now after creating the properties the student.ascx class file will look as in the following:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class student : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
public string Name
{
get { return txtName.Text; }
set { txtName.Text = value; }
}
public string City
{
get { return txtcity.Text; }
set { txtcity.Text = value; }
}
}

Now we are done with the properties. Let us use it in an .aspx page. As already discussed in the preceding, a User Control does not run directly on its own. To render a User Control you must use it in an .aspx page, now let us add the User Control to the .aspx page.

Step 4: Adding User Control into .aspx page

Now we need to add the User Control into an .aspx page to use it. So let us add the Default.aspx page by right-clicking on the project in the Solution Explorer. After adding the .aspx page the Solution Explorer will look such as follows:

Step 5: Register the User Control on .aspx page

To use a User Control in an .aspx we need to register it using the Register page directive, the register page directive has the following properties:

<%@ Register Src="~/student.ascx" TagPrefix="uc" TagName="Student" %>

Now open the default.aspx page and drag and drop two text boxes, one button and also add a control to the .aspx page form the section. After adding the Default.aspx the source code will be such as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="~/student.ascx" TagPrefix="uc" TagName="Student" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Article by Vithal Wadje</title>
</head>
<body bgcolor="blue">
<form id="form2" runat="server">
<div style="color: White;">
<h4>
Article for C#Corner
</h4>
<table>
<tr>
<td>Name</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>City</td>
<td><asp:TextBox ID="txtcity" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="txtSave" runat="server" Text="Save" onclick="txtSave_Click" /> </td>
</tr>
</table><br />
<uc:Student ID="studentcontrol" runat="server" />
</div>
</form>
</body>
</html>

Now switch to design mode and it will look as in the following:

In the preceding UI, on the save button we will the values to the user text box controls and I will show it in the User Control text box, now let us see how properties will look, its similar to any standard TextBox control as:

Step 6: Set the values to User Control from .aspx page using User Control properties

Now in the preceding control you have seen that the properties of the User Control we have created are shown the same as standard contols. We can also create properties to set the height and width and so on in a similar manner. Double-click on the Save button and write the following code in the Default.aspx.cs file to set the values:

protected void txtSave_Click(object sender, EventArgs e)
{
//setting the values to the User Control properties
studentcontrol.Name = txtName.Text;
studentcontrol.City = txtcity.Text;
}

Now the entire code of the Default.aspx class file will look as in the following:

using System;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void txtSave_Click(object sender, EventArgs e)
{
//setting the values to the User Control properties
studentcontrol.Name = txtName.Text;
studentcontrol.City = txtcity.Text;
}
}

Now run the application, the UI will look as in the following:

Now enter the name and city into the preceding two text boxes and click on the save button. The output will be shown in the User Control text boxes as follows:

Now you have seen that we do not have any code in the .ascx page that is in the User Control but still the output is shown because all the logic is written in the User default.aspx page and the values are assigned using properties to the User Control from the parent page.

Note

For more details and explanation, download the Uploaded Zip file.

Summary

From all the preceding examples you have learned how to use the properties in a User Control to assign the values. I hope this article is useful for all readers, if you have a suggestion then please contact me.

Up Next

Ebook Download

View all

Diving into Knockout.JS

Read by 1.7k people

Download Now!

Learn

View all