UpdatePanel：UserControl 内的按钮未触发

Question

我希望用户能够通过单击位于该用户控件内的删除按钮来删除该用户控件。

btnAddChoice 工作正常，但 btnRemove 在 UserControl 内部，btnRemove_Click 未触发。

这是我的 ShowChoices.aspx 代码：

<div>                
    <strong>Choices</strong>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnAddChoice" EventName="Click" />                                                                                       
        </Triggers>
        <ContentTemplate>
            <ul class="list-unstyled">                                
                <asp:PlaceHolder runat="server" ID="phChoices">
                </asp:PlaceHolder>
            </ul>
        </ContentTemplate>
    </asp:UpdatePanel>              
</div>

这是我的 ShowChoices.aspx.cs 代码：

protected void btnAddChoice_Click(object sender, EventArgs e)
{            
    Choice ctl = (Choice)LoadControl("~/Controls/Choice.ascx");
    ctl.ID = "choice" + PersistedControls.Count;                
    int j = PersistedControls.Count + 1;
    ctl.SetSummary("Choice #" + j);
    phChoices.Controls.Add(ctl); // the UserControl is added here
    PersistedControls.Add(ctl);

    AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
    trigger.ControlID = ctl.BtnRemoveUniqueID; // problem : BtnRemoveUniqueID = always null
    trigger.EventName = "Click";
    UpdatePanel1.Triggers.Add(trigger);
}

在Choice.ascx中：

<asp:Button ID="btnRemove" CssClass="btn-default" runat="server" Text="Remove this choice" CausesValidation="false" OnClick="btnRemove_Click"/>

在Choice.ascx.cs

protected void btnRemove_Click(object sender, EventArgs e)
{
    this.Parent.Controls.Remove(this);
    List<Control> _persistedControls = (List<Control>) Session[Step2.PersistedControlsSessionKey];
    _persistedControls.Remove(this);
    Session[Step2.PersistedControlsSessionKey] = _persistedControls;
    UpdatePanel ctl = (UpdatePanel) this.Parent.FindControl("UpdatePanel1");
    if (ctl != null)
    {
        ctl.Update();
    }
}

Answer 1

用户控件创建一个单独的命名容器，这意味着您的更新面板需要额外的工作（这里的 SO 答案很好地解释了它：Trigger an update of the UpdatePanel by a control that is in different ContentPlaceHolder）

这是一个在用户控件内公开按钮的完整示例，因此它可以充当触发器并触发父页面中的事件。该按钮在子控件上使用 public 属性公开，然后所有事件处理程序都附加到父控件中。

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Src="~/TestChildControl.ascx" TagName="Custom" TagPrefix="TestChildControl" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
        <div>
            <asp:UpdatePanel runat="server" ID="updTest">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnAddControl" EventName="Click" />
                </Triggers>
                <ContentTemplate>
                    <asp:Placeholder runat="server" ID="phControlContainer"></asp:Placeholder>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Button runat="server" ID="btnAddControl" Text="Add Control" OnClick="btnAddControl_OnClick" />
        </div>
    </form>
</body>
</html>

Default.aspx.cs

请注意，必须在页面加载时以相同的顺序使用相同的 ID 重新创建子控件，以便正确触发事件。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (ControlIDs != null)
        {
            foreach (string controlID in ControlIDs)
            {
                AddChildControl(controlID);
            }
        }
    }

    protected void btnAddControl_OnClick(object sender, EventArgs e)
    {
        var rand = new Random();
        var controlID = string.Format("TestChildControl_{0}", rand.Next());

        AddChildControl(controlID);
    }

    protected void AddChildControl(string controlID)
    {
        TestChildControl childControl = (TestChildControl)LoadControl("~/TestChildControl.ascx");
        childControl.ID = controlID;
        phControlContainer.Controls.Add(childControl);

        childControl.RemoveControlButton.Click += btnRemoveControl_OnClick;

        AsyncPostBackTrigger updateTrigger = new AsyncPostBackTrigger() { ControlID = childControl.RemoveControlButton.UniqueID, EventName = "click" };
        updTest.Triggers.Add(updateTrigger);

        SaveControlIDs();
    }

    private void SaveControlIDs()
    {
        ControlIDs = phControlContainer.Controls.Cast<Control>().Select(c => c.ID).ToList();
    }

    protected void btnRemoveControl_OnClick(object sender, EventArgs e)
    {
        var removeButton = sender as Button;

        if (removeButton == null)
        {
            return;
        }

        var controlID = removeButton.CommandArgument;
        var parentControl =
            phControlContainer.Controls.Cast<TestChildControl>().FirstOrDefault(c => c.ID.Equals(controlID));

        if (parentControl != null)
        {
            phControlContainer.Controls.Remove(parentControl);
        }

        SaveControlIDs();
    }

    protected IEnumerable<string> ControlIDs
    {
        get
        {
            var ids = ViewState["ControlIDs"] ?? new List<string>();
            return (IEnumerable<string>) ids;
        }
        set { ViewState["ControlIDs"] = value; }
    } 
}

TestChildControl.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestChildControl.ascx.cs" Inherits="TestChildControl" %>
<div>
    This is a test control
</div>
<div>
    <asp:Button runat="server" ID="btnRemoveControl" Text="Remove Control" />
</div>

TestChildControl.ascx.cs

请注意，我们在这里将按钮公开为只读属性，因此我们可以为其分配事件处理程序并访问其成员。为了方便起见，我将父控件 ID 指定为 CommandArgument。

using System;
using System.Web.UI.WebControls;

public partial class TestChildControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        btnRemoveControl.CommandArgument = this.ID;
    }

    public Button RemoveControlButton
    {
        get { return btnRemoveControl; }
    }
}

UpdatePanel：UserControl 内的按钮未触发

UpdatePanel : Button inside UserControl not firing

c#

asp.net

user-controls

asp.net-ajax