Post
Ask Question

Call User Control Method From Parent Page in ASP.Net

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 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:
  1. Start -> All Programs -> Microsoft Visual Studio 2010.

  2. File -> New WebSite -> C# -> Empty WebSite (to avoid adding a master page).

  3. Provide the web site a name such as "CallingUsercontrolMethod" or anything you wish and specify the location.

Step 2: Create the User Control

  1. 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:
  1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="student.ascx.cs" Inherits="student" %>    
  2.   
  3. <h3>This is User Contro1   </h3>     
  4. <table>    
  5.     
  6. <tr>    
  7. <td>Name</td>    
  8. <td>    
  9.     
  10.     <asp:TextBox ID="txtName" runat="server"></asp:TextBox>    
  11. </td>    
  12. </tr>    
  13. <tr>    
  14. <td>City</td>    
  15. <td><asp:TextBox ID="txtcity" runat="server"></asp:TextBox></td>    
  16. </tr>   
 
 
Step 3: Create Method in User Control
 
 Write the following code in the student.ascx.cs file to create the method as:
  1. public void SetData(string Name, String City)  
  2.    {  
  3.   
  4.        txtName.Text = Name;  
  5.        txtcity.Text = City;  
  6.   
  7.   
  8.   
  9.    } 
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:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class student : System.Web.UI.UserControl  
  9. {  
  10.   
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.   
  14.     }  
  15.   
  16.     public void SetData(string Name, String City)  
  17.     {  
  18.   
  19.         txtName.Text = Name;  
  20.         txtcity.Text = City;  
  21.     }  
  22.   
  23. } 
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.
 
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 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:
  1. <%@ 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:
  1.   
  2.     <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    
  3.         
  4.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  5.         
  6.     <%@ Register Src="~/student.ascx" TagPrefix="uc" TagName="Student" %>    
  7.     <html xmlns="http://www.w3.org/1999/xhtml">    
  8.         
  9.     <head id="Head1" runat="server">      
  10.         <title>Article by Vithal Wadje</title>      
  11.     </head>      
  12.     <body bgcolor="blue">      
  13.         <form id="form2" runat="server">      
  14.         <div style="color: White;">      
  15.             <h4>      
  16.                 Article for C#Corner      
  17.             </h4>      
  18.         <table>    
  19.         
  20.     <tr>    
  21.     <td>Name</td>    
  22.     <td>    
  23.         
  24.         <asp:TextBox ID="txtName" runat="server"></asp:TextBox>    
  25.     </td>    
  26.     </tr>    
  27.     <tr>    
  28.     <td>City</td>    
  29.     <td><asp:TextBox ID="txtcity" runat="server"></asp:TextBox></td>    
  30.     </tr>    
  31.     <tr>    
  32.     <td></td>    
  33.     <td>    
  34.          </td>    
  35.     </tr>    
  36.     <tr>    
  37.     <td></td>    
  38.         
  39.     <td>     
  40.         <asp:Button ID="txtSave" runat="server" Text="Save" onclick="txtSave_Click" />  </td>    
  41.     </tr>    
  42.     </table><br />    
  43.             
  44.         <uc:Student ID="studentcontrol" runat="server" />    
  45.         
  46.         </div>    
  47.         </form>    
  48.             
  49.     </body>    
  50.     </html>   
Now switch to design mode and it will look as follows:
 
 
 
In the preceding UI, on the save button we will 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:
  1. protected void txtSave_Click(object sender, EventArgs e)  
  2.   {  
  3.   
  4.       //Calling and ing Values to user control Method   
  5.   
  6.       studentcontrol.SetData(txtName.Text, txtcity.Text);  
  7.        
  8.   } 
Now the entire code of the Default.aspx class file will look as in the following:
  1. using System;  
  2.   
  3. public partial class _Default : System.Web.UI.Page  
  4. {  
  5.     protected void Page_Load(object sender, EventArgs e)  
  6.     {  
  7.   
  8.     }  
  9.     protected void txtSave_Click(object sender, EventArgs e)  
  10.     {  
  11.   
  12.         //Calling and ing Values to user control Method   
  13.   
  14.         studentcontrol.SetData(txtName.Text, txtcity.Text);  
  15.          
  16.     }  
  17. } 
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.

Note
  • For more details and explanation, download the Uploaded Zip file.
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.


Similar Articles