I have often read a common question in forum posts of how to set
the values of a User Control from a parent page using a method but no
one has provided the proper solution. 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.
For more details of how to create a User Control please refer to my previous article:
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 "CallingUsercontrolMethod" or anything you wish and specify the location.
- Then right-click on the project in the Solution Explorer then select "Add New Item" then select Web User Control template as follows:
Now open the design mode and add the two textboxes. After adding
it, the User Control source code will look as in the following:
<%@ 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>
public void SetData(string Name, String City) { txtName.Text = Name; txtcity.Text = City; }
In the
preceding code we are creating the method setData that will set the
values to the textboxes from the parent form, now after creating the
properties the student.ascx class file will look as follows:
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 void SetData(string Name, String City) { txtName.Text = Name; txtcity.Text = City; } }
Now we are done with the method. Let us use it in an .aspx page. As
already stated, 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.
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 as follows:
Step 4: Adding User Control into .aspx page
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 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 compilemode.com </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 follows:
In the preceding UI, on the save button we will pass the values to
the user TextBox controls and I will show it in the User Control text
box. Now let us see how the method will look, it's similar to any
standard TextBox control as:
Step 6: Set the values to User Control from .aspx page using User Control Method
Now in the preceding control you saw that in the method of the User
Control we have created is shown the same as standard controls. We can
also create a method to set the height and width 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
Now the entire code of the Default.aspx.cs 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) { //Calling and Passing Values to user control Method studentcontrol.SetData(txtName.Text, txtcity.Text); } }
Now run the application, the UI will look as follows:
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 default.aspx page and the values are
assigned using methods to the User Control from the parent page.
Summary
From the preceding examples you have learned how to use the methods
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.
Post a Comment