如何通过单击 UserControl 中的按钮将 UserControl 中存在的文本框值传递到 Aspx 页面标签

Question

TestUC.ascx Design Code

  <asp:TextBox ID="txtbox1"  runat="server" ClientIDMode="Static" placeholder="Enter Some Text" ></asp:TextBox><br />
  <asp:Button ID="btn1" runat="server" Text="Click" OnClick="btn1_Click" ClientIDMode="Static" />

Test.aspx Page Code

 <%@ Register Src="~/WebUserControls/TestUC.ascx" TagName="WebUserControlTest"
TagPrefix="uctest" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphBody" runat="server">
<asp:Label ID="lbl1" runat="server" >Label</asp:Label>
<uctest:WebUserControlTest ID="ucTest" runat="server"></uctest:WebUserControlTest>
</asp:Content>

OutPut:

I Need ..

Step1: Enter Some text In Text Box
Step2:Then I Click Click Button [Note: This Two Controls Are Bind From UserControl]
Step3:What Text Entered in TextBox Is Show In label [Note Label Present In Aspx Page]

Answer 1

You will need to have a custom event & you will also need to expose the Text property of the TextBox in your UserControl, like this.

public partial class YourUserControl : UserControl
{
    public String Text
    {
        get
        {
            return this.txtBox1.Text;
        }
        //write the setter property if you would like to set the text 
        //of the TextBox from your aspx page
        //set
        //{
        //    this.txtBox1.Text = value;
        //}
    }

    public delegate void TextAppliedEventHandler(Object sender, EventArgs e);
    public event TextAppliedEventHandler TextApplied;

    protected virtual void OnTextApplied(EventArgs e)
    {
        //Taking a local copy of the event, 
        //as events can be subscribed/unsubscribed asynchronously.
        //If that happens after the below null check then 
        //NullReferenceException will be thrown
        TextAppliedEventHandler handler = TextApplied;

        //Checking if the event has been subscribed or not...
        if (handler != null)
            handler(this, e);
    }

    protected void yourUserControlButton_Click(Object sender, EventArgs e)
    {
        OnTextApplied(EventArgs.Empty);
    }
}

Then in your aspx page, where you have placed YourUserControl (OR you are dynamically adding it from the code behind), you can subscribe to this event like this.

protected void Page_Load(Object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        yourUserControl.TextApplied += new YourUserControl.TextAppliedEventHandler(yourUserControl_TextApplied)
    }
}

You can use the custom event of the user control in your page like this.

protected void yourUserControl_TextApplied(Object sender, EventArgs e)
{
    yourLabelInYourPage.Text = yourUserControl.Text;
}

And you are done...

EDIT : You can rename the Controls & Events as you like. I have used the names only for the example purpose.

EDIT : In website projects, if you want to add your user control dynamically then, you might need to include the namespace ASP in your page, like this.

using ASP;

And add this Directive in your page in the aspx markup.

<%@ Reference Control="~/PathToYourUserControl/YourUserControl.ascx" %>

Answer 2

other solution : create an event in the usercontrol, which is called in the button click.

Subscribe to this event in the codebehind of the aspx page. that way you can update your interface only if a value is provided.

a little more complicated, but you could re-use this logic to more complex control / parent control feature in the future.

i can add code snippet if asked

Answer 3

This Answer Is Prepared By Help Of @Devraj Gadhavi i Edited Some Code .

UserControl Page Design Code

 <asp:TextBox ID="txtbox1"  runat="server" ClientIDMode="Static" placeholder="Enter Some Text" ></asp:TextBox><br />
 <asp:Button ID="btn1" runat="server" Text="Click" OnClick="btn1_Click" ClientIDMode="Static" />

UserControl Page Code

 public partial class TestUC : System.Web.UI.UserControl
{

    public String Text
    {
        get
        {
            return this.txtbox1.Text;
        }

    }

    public delegate void TextAppliedEventHandler(Object sender, EventArgs e);
    public event EventHandler TextApplied;

    protected virtual void OnTextApplied(EventArgs e)
    {

        if (TextApplied != null)
            TextApplied(this, e);
    }



    protected void btn1_Click(object sender, EventArgs e)
    {
        OnTextApplied(EventArgs.Empty);
    }
}

Aspx Page Design Code

<%@ Register Src="~/WebUserControls/TestUC.ascx" TagName="WebUserControlTest"
TagPrefix="uctest" %>

 <asp:Content ID="Content1" ContentPlaceHolderID="cphBody" runat="server">
   <asp:Label ID="lbl1" runat="server" >Label</asp:Label>
   <uctest:WebUserControlTest ID="ucTest" runat="server"></uctest:WebUserControlTest>
 </asp:Content>

Aspx Cs File Code

public partial class Test2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        ucTest.TextApplied += new EventHandler(ucTest_TextApplied);


    }

    protected void ucTest_TextApplied(Object sender, EventArgs e)
    {
        lbl1.Text = ucTest.Text;

    }
}

Answer 4

Another method ,If you don't want to expose the Text property of the TextBox in your UserControl Just use method "UserControl.FindControl("Id Of your Textbox which is present in user control")" in your Case WebUserControlTest.FindControl("txtbox1").

And below is the simpler way to register an event handler on the parent web form's code behind.

Code goes as below for parent form asxp.cs

 protected override void OnInit(EventArgs e)
{
    //find the button control within the user control
    Button button = (Button)WebUserControlTest.FindControl("btn1");
    //wire up event handler
    button.Click += new EventHandler(button_Click);
    base.OnInit(e);
}

void button_Click(object sender, EventArgs e)
{
    TextBox txt = (TextBox) WebUserControlTest.FindControl("txtbox1");
   //id of lable which is present in the parent webform 
    lblParentForm.Text=txt.text; 
}

Answer 5

Also, you can achieve this using JavaScript like below (given your code above):

<script type="text/javascript">
  function getUCTextboxValue() {
     let txtName = document.getElementById('<%=ucTest.FindControl("txtbox1").ClientID %>');
     let lbl = document.getElementById('<%=lbl1.ClientID %>');         
     lbl.innerText = txtName.value
  }

Also, from the parent page, you can add a HiddenField and save the textbox value on it (using the JavaScript code above) then catch its value from code behind.