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

Question

TestUC.ascx 设计代码

  <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 页面代码

 <%@ 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>

输出：

我需要..

步骤 1：在文本框中输入一些文本
Step2：然后我点击点击按钮【注意：这两个控件是从UserControl绑定的】
Step3：在TextBox中输入的文字显示在标签中[注意标签出现在Aspx页面]

Answer 1

您将需要一个自定义事件，并且您还需要像这样在 UserControl 中公开TextBox的Text属性。

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);
    }
}

然后在你的 aspx 页面中，你放置了YourUserControl （或者你从后面的代码动态添加它），你可以像这样订阅这个事件。

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

您可以像这样在页面中使用用户控件的自定义事件。

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

你已经完成了......

编辑：您可以根据需要重命名控件和事件。 我仅将名称用于示例目的。

编辑：在网站项目中，如果要动态添加用户控件，则可能需要在页面中包含命名空间ASP ，如下所示。

using ASP;

并在您的页面中的 aspx 标记中添加此Directive 。

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

Answer 2

其他解决方案：在用户控件中创建一个事件，该事件在按钮单击中调用。

在 aspx 页面的代码隐藏中订阅此事件。 这样，您只能在提供值时更新您的界面。

稍微复杂一点，但您可以在将来将此逻辑重新用于更复杂的控制/父控制功能。

如果被问到，我可以添加代码片段

Answer 3

这个答案是在@Devraj Gadhavi 的帮助下准备的，我编辑了一些代码。

用户控件页面设计代码

 <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" />

用户控制页面代码

 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 页面设计代码

<%@ 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 文件代码

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

另一种方法，如果您不想在 UserControl 中公开 TextBox 的 Text 属性，只需在 Case WebUserControlTest.FindControl(" txtbox1”）。

下面是在父 Web 表单后面的代码上注册事件处理程序的更简单方法。

父表单 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

此外，您可以使用如下所示的 JavaScript 来实现这一点（给定上面的代码）：

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

此外，从父页面，您可以添加一个 HiddenField 并将文本框值保存在其上（使用上面的 JavaScript 代码），然后从后面的代码中捕获其值。