ASP.NET 后台动态添加控件(复选框)

最新推荐文章于 2026-05-17 15:17:49 发布

原创最新推荐文章于 2026-05-17 15:17:49 发布 · 8.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

在ASP.NET中遇到动态添加复选框后无法触发勾选事件的问题，原因是页面刷新时动态控件消失。文章解释了动态控件在服务器端实例化的过程，并指出需要在Page_Load中初始化动态控件。但该方案不适用于某些场景，因此转向使用Ajax作为解决方案。

用户配置好如下图的复选框，动态添加复选框。

前台代码：

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="../css/color.css" rel="stylesheet" type="text/css" />
    <link href="../css/Add.css" rel="stylesheet" type="text/css" />   
    
    <style type="text/css">
        .auto-style1 {
            width: 459px;
        }
    </style>
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="location">
        当前位置:设置->:下拉框字段
    </div>
    <table style="width: 100%;" cellpadding="6" cellspacing="1" class="border">
        <tr>
            <td align="center" class="auto-style1">   
                <asp:DropDownList ID="ddlMenuIndex" runat="server" style="margin-left: 40px" Height="20px" Width="140px">
                </asp:DropDownList>   
                <asp:DropDownList ID="ddlFields" runat="server" style="margin-left: 60px" Height="20px" Width="140px" OnSelectedIndexChanged="ddlFields_SelectedIndexChanged" AutoPostBack="True">
                </asp:DropDownList>     
            </td>
            <td >       
            </td>           
        </tr>     
    </table>
    <br />


    <asp:Table ID="HolderTable" runat="server" Height="102px" Width="653px">
        
    </asp:Table>

    <br />

</asp:Content>

后台代码：

	//实例化系统设置外观
        Facade.SystemSetFacade systemSetFacade = new Facade.SystemSetFacade();

        protected override void OnLoad(EventArgs e)
        {
            if (!Page.IsPostBack)               //判断页面是否第一次加载
            {
                //后台读取数据库，动态配置下拉框字段
                SqlDataReader sdr = systemSetFacade.getMenu();
                ddlMenuIndex.DataSource = sdr;
                ddlMenuIndex.DataTextField = "menuChinesename";
                ddlMenuIndex.DataValueField = "menuEnglishname";
                ddlMenuIndex.DataBind();
                this.ddlMenuIndex.Items.Insert(0, "--请选择--");

                ListItem ListItem1 = new ListItem("高级查询", "advancedQuery");
                ListItem ListItem2 = new ListItem("批量修改", "largeModify");
                this.ddlFields.Items.Add(ListItem1);
                this.ddlFields.Items.Add(ListItem2);
                this.ddlFields.Items.Insert(0, "--请选择--");

                //AjaxPro.Utility.RegisterTypeForAjax(typeof(FieldSet));
            }

            //动态创建控件的方法
            CreateControl();   
        } 
        //protected void Page_Load(object sender, EventArgs e)
        //{          
           
        //}

        protected void ddlFields_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (ViewState["CreateControl"] == null)
            {
                ViewState["CreateControl"] = true;
                CreateControl();
            }
        }

        //创建复选框的方法
        void CreateControl()
        {
            if (ViewState["CreateControl"] == null) return; //第一次的时候应该不要创建这些控件 
            if ((ddlMenuIndex.Text == "--请选择--"))
            {
                Response.Write("<script>alert('请选择需要配置的项！');</script>");
            }
            else
            {
                string strValue = ddlMenuIndex.SelectedValue.ToString();
                DataTable dt = new DataTable();
                dt = systemSetFacade.itemQuery(strValue);
                int fieldCount = dt.Rows.Count;

     
                int rowCount = fieldCount / 10;
                int colCount = fieldCount % 10;
                int checkboxID = 0;

                if (rowCount > 0)
                {
                    for (int i = 0; i < rowCount; i++)
                    {
                        TableRow row = new TableRow();
                        for (int j = 0; j < 10; j++)
                        {
                            TableCell cell = new TableCell();
                            cell.Width = 50;
                            CheckBox cb = new CheckBox();
                            cb.Text = dt.Rows[checkboxID][4].ToString();
                            cb.ID = "cb" + checkboxID.ToString();
                            //为复选框添加勾选事件
                            cb.CheckedChanged += new EventHandler(cb_OnCheckedChanged);
                             
                            cb.Checked = false;
                           
                            cell.Controls.Add(cb);
                            checkboxID += 1;
                            row.Cells.Add(cell);
                        }
                        HolderTable.Rows.Add(row);
                    }

                    TableRow row2 = new TableRow();
                    for (int k = 0; k < colCount; k++)
                    {
                        if (checkboxID < fieldCount-1)
                        {
                            checkboxID += 1;
                            TableCell cell = new TableCell();
                            cell.Width = 50;
                            CheckBox cb = new CheckBox();
                            cb.Text = dt.Rows[checkboxID][4].ToString();
                            cb.ID = "cb" + checkboxID.ToString();
                            cb.CheckedChanged += new EventHandler(cb_OnCheckedChanged);
                            cb.Checked = false;
                            
                            cell.Controls.Add(cb);
                            row2.Cells.Add(cell);
                        }
                    }
                    HolderTable.Rows.Add(row2);
                }
                else
                {
                    TableRow row2 = new TableRow();
                    for (int k = 0; k < colCount; k++)
                    {
                        TableCell cell = new TableCell();   
                        CheckBox cb = new CheckBox();
                        cb.Text = dt.Rows[checkboxID][4].ToString();
                        cb.ID = "cb" + checkboxID.ToString();
                        cb.CheckedChanged += new EventHandler(cb_OnCheckedChanged);
                        cb.Checked = false;                                       
                        cell.Controls.Add(cb);
                        row2.Cells.Add(cell);
                        checkboxID += 1;
                    }
                    HolderTable.Rows.Add(row2);
                }
                
            }  
        }

       //如果复选框勾选/取消勾选，触发这个事件
        void cb_OnCheckedChanged(object sender, EventArgs e)
        {
            Trace.Write("控件动态事件");
            CheckBox cb = (CheckBox)sender;
            if(cb.Checked == true){
                 //string strValue = ddlMenuIndex.SelectedValue.ToString();
                Response.Write(cb.ID);
                
            }
        }

问题：页面动态添加复选框之后，对复选框进行勾选的事件却不能触发。最终这个方法没有实现动态创建控件。

网上给出的解释:

动态添加一个服务器控件到画面,当画面刷新后控件不见了；或者在后台代码找不到刚才添加的控件。并非由于动态添加就会消失，其实所有控件都消失了。其实，无论第一次加载还是回传，都会根据请求的画面名称找到对应的后置代码，然后实例化。那么每次实例化就等于要初始化控件，即你向画面上拖拖拽拽的服务器端控件。问题就在这里，初始化控件的代码并不包含动态添加的代码，所以一刷新画面动态加载的控件就消失了。所以，不要以为自己是动态控件就自卑，和其他控件还是一样的。要做的关键是就在初始化其他控件的时候，也初始化动态控件。

来自：http://zhangh1014.blog.163.com/blog/static/177723473200843083440992/

解决方案：将动态创建控件的实现放在Page_Load中就好了。但是不符合，我这里的修去。同时考虑到，后台添加的控件，样式不好控制，便转向Ajax了。

实现方案：http://blog.csdn.net/xujiaolf/article/details/27339247

标签

#JS #ASP.NET