按钮单击上添加动态控件(控件集)

时间:2021-12-11 15:56:40

I have a requirement to add a panel containing a user control (textbox) + 2 Gridviews with their own item templates + other validations operating on these controls, on a Web-Form dynamically resulting from a button click. So every time a user clicks a button "Add Panel", a new panel would be generated with the above controls.

我需要添加一个面板,其中包含一个用户控件(文本框)+ 2个Gridviews及其自己的项目模板+对这些控件进行操作的其他验证,在Web表单上动态生成一个按钮单击。因此,每当用户单击“添加面板”按钮时,将使用上述控件生成新面板。

I am trying the route of Data Lists and repeaters but binding the data to the above controls is becoming a challenge. I would like to investigate other frontiers to achieve this before going forward.

我正在尝试数据列表和转发器的路由,但将数据绑定到上述控件正成为一项挑战。我想调查其他前沿,以便在此之前实现这一目标。

Any help, links, suggestions or pointers would be appreciated?

任何帮助,链接,建议或指示将不胜感激?

1 个解决方案

#1


Just to get you started.

只是为了让你开始

  • UserControl: DynamicUC.ascx
  • Page using that user control: DynamicPage.aspx
  • 使用该用户控件的页面:DynamicPage.aspx

DyanamicUC.ascx

<div style="float: left">
    <asp:TextBox ID="tbMyTextBox" runat="server" />

    <asp:GridView runat="server" ID="gvNumbers" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="Serial" HeaderText="Seiral" />
            <asp:TemplateField HeaderText="Item Name">
                <ItemTemplate>
                    <%# Eval("Item") %>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

</div>

DynamicUC.ascx.cs

public partial class DynamicUC : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public void PopulateData(string value)
        {
            tbMyTextBox.Text = value;
            gvNumbers.DataSource = Enumerable.Range(1, 5).Select(i => new { Serial = i, Item = "Item " + i });
            gvNumbers.DataBind();
        }

        public string GetData()
        {
            return Server.HtmlEncode(tbMyTextBox.Text);
        }
    }

DynamicPage.aspx

<asp:Button ID="btnAddUC" Text="Add UC" runat="server" OnClick="btnAddUC_Click" />
<asp:Button ID="btnGetUCValues" Text="Get UC Values" runat="server" OnClick="btnGetUCValues_Click" />

<asp:Panel runat="server" ID="pnlDynamicUCPanel" Style="overflow: auto;">
</asp:Panel>
<asp:Label ID="lblUCValues" runat="server" Style="clear: both;" />

DynamicPage.aspx.cs

public partial class DynamicPage : System.Web.UI.Page
{
    private int NumberOfDynamicControls
    {
        get
        {
            var numberOfDynamicControls = ViewState["__dynamicUCCount"];
            if (numberOfDynamicControls != null)
            {
                return (int)numberOfDynamicControls;
            }
            return 0;
        }
        set
        {
            ViewState["__dynamicUCCount"] = value;
        }
    }
    private List<DynamicUC> _dynamicUCList;

    protected void Page_Load(object sender, EventArgs e)
    {
        RestoreDynamicUC();
    }

    protected void btnAddUC_Click(object sender, EventArgs e)
    {
        CreateDyanamicUC(NumberOfDynamicControls);
        NumberOfDynamicControls++;
    }

    private void RestoreDynamicUC()
    {
        if (NumberOfDynamicControls == 0)
            return;
        for (int i = 0; i < NumberOfDynamicControls; i++)
        {
            CreateDyanamicUC(i);
        }
    }

    private void CreateDyanamicUC(int dataIndex)
    {
        if (_dynamicUCList == null)
        {
            _dynamicUCList = new List<DynamicUC>();
        }
        var dynamicUC = LoadControl("DynamicUC.ascx") as DynamicUC;
        dynamicUC.PopulateData("Data " + dataIndex);
        pnlDynamicUCPanel.Controls.Add(dynamicUC);
        _dynamicUCList.Add(dynamicUC);
    }

    protected void btnGetUCValues_Click(object sender, EventArgs e)
    {
        var valuesText = "";
        if (_dynamicUCList != null)
        {
            valuesText = string.Join(", ", _dynamicUCList.Select(duc => duc.GetData()));
        }
        lblUCValues.Text = "UC Values: " + valuesText;
    }
}

There is a lot to explain; but I am afraid I have little time. But this should give some hint.

有很多要解释的;但我恐怕没有多少时间。但这应该给出一些暗示。

#1


Just to get you started.

只是为了让你开始

  • UserControl: DynamicUC.ascx
  • Page using that user control: DynamicPage.aspx
  • 使用该用户控件的页面:DynamicPage.aspx

DyanamicUC.ascx

<div style="float: left">
    <asp:TextBox ID="tbMyTextBox" runat="server" />

    <asp:GridView runat="server" ID="gvNumbers" AutoGenerateColumns="False">
        <Columns>
            <asp:BoundField DataField="Serial" HeaderText="Seiral" />
            <asp:TemplateField HeaderText="Item Name">
                <ItemTemplate>
                    <%# Eval("Item") %>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

</div>

DynamicUC.ascx.cs

public partial class DynamicUC : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public void PopulateData(string value)
        {
            tbMyTextBox.Text = value;
            gvNumbers.DataSource = Enumerable.Range(1, 5).Select(i => new { Serial = i, Item = "Item " + i });
            gvNumbers.DataBind();
        }

        public string GetData()
        {
            return Server.HtmlEncode(tbMyTextBox.Text);
        }
    }

DynamicPage.aspx

<asp:Button ID="btnAddUC" Text="Add UC" runat="server" OnClick="btnAddUC_Click" />
<asp:Button ID="btnGetUCValues" Text="Get UC Values" runat="server" OnClick="btnGetUCValues_Click" />

<asp:Panel runat="server" ID="pnlDynamicUCPanel" Style="overflow: auto;">
</asp:Panel>
<asp:Label ID="lblUCValues" runat="server" Style="clear: both;" />

DynamicPage.aspx.cs

public partial class DynamicPage : System.Web.UI.Page
{
    private int NumberOfDynamicControls
    {
        get
        {
            var numberOfDynamicControls = ViewState["__dynamicUCCount"];
            if (numberOfDynamicControls != null)
            {
                return (int)numberOfDynamicControls;
            }
            return 0;
        }
        set
        {
            ViewState["__dynamicUCCount"] = value;
        }
    }
    private List<DynamicUC> _dynamicUCList;

    protected void Page_Load(object sender, EventArgs e)
    {
        RestoreDynamicUC();
    }

    protected void btnAddUC_Click(object sender, EventArgs e)
    {
        CreateDyanamicUC(NumberOfDynamicControls);
        NumberOfDynamicControls++;
    }

    private void RestoreDynamicUC()
    {
        if (NumberOfDynamicControls == 0)
            return;
        for (int i = 0; i < NumberOfDynamicControls; i++)
        {
            CreateDyanamicUC(i);
        }
    }

    private void CreateDyanamicUC(int dataIndex)
    {
        if (_dynamicUCList == null)
        {
            _dynamicUCList = new List<DynamicUC>();
        }
        var dynamicUC = LoadControl("DynamicUC.ascx") as DynamicUC;
        dynamicUC.PopulateData("Data " + dataIndex);
        pnlDynamicUCPanel.Controls.Add(dynamicUC);
        _dynamicUCList.Add(dynamicUC);
    }

    protected void btnGetUCValues_Click(object sender, EventArgs e)
    {
        var valuesText = "";
        if (_dynamicUCList != null)
        {
            valuesText = string.Join(", ", _dynamicUCList.Select(duc => duc.GetData()));
        }
        lblUCValues.Text = "UC Values: " + valuesText;
    }
}

There is a lot to explain; but I am afraid I have little time. But this should give some hint.

有很多要解释的;但我恐怕没有多少时间。但这应该给出一些暗示。