【代码笔记】动态添加删除带标题的表单控件【ASPX为基础.Net控件实现版】

ASPX

            <asp:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound" OnItemCommand="rptList_ItemCommand"> 
            <ItemTemplate>
            	<div class="li-table">
            		<!--"带标题"此语随具体需求有其意义 此处不用RowNum -->
            		<span>报名者<%# Container.ItemIndex+1 %></span>
            		<span class='<%# Container.ItemIndex==0?"display-none":"display-close" %>' >
	                	<asp:Button ID="btnDel" runat="server" OnClick="btnDel_Click" CssClass="closeBtn" />
                    </span>
					<div class="li_input">姓名：<asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>'></asp:TextBox></div>
					<div class="li_input">年龄：<asp:TextBox ID="txtAge" runat="server" Text='<%# Eval("Age") %>'></asp:TextBox></div>
					<div class="li_input">性别：<asp:TextBox ID="txtSex" runat="server" Text='<%# Eval("Sex") %>'></asp:TextBox></div>
				</div>
            </ItemTemplate>
            </asp:Repeater>
            <div class="bottom-line">
                <asp:Button ID="btnAdd" runat="server" Text="添加" OnClick="btnAdd_Click" />
            </div>
            <div class="bottom-line">
                <asp:Button ID="btnSave" runat="server" Text="保存" OnClick="btnSave_Click" />
            </div>
           

ASPX.CS

        private void InitData()
        {
        	//根据需求也可以从数据库中读取数据 这样就不用添加行 此处RowNum为例 DataTable若无列则等同无数据
            DataTable dt = new DataTable();
            dt.Columns.Add("RowNum", typeof(int));
            DataRow dr = dt.NewRow();
            dr["RowNum"] = 1;
            dt.Rows.Add(dr);
            ViewState["datatable"] = dt;
            rptList.DataSource = dt;
            rptList.DataBind();
        }

        protected void btnAdd_Click(object sender, EventArgs e)
        {
            DataTable dt = (DataTable)ViewState["datatable"];
            DataRow dr = dt.NewRow();
            dr["RowNum"] = (int)dt.Select("", "RowNum DESC")[0]["RowNum"] + 1;
            dt.Rows.Add(dr);
            ViewState["datatable"] = dt;
            rptList.DataSource = dt;
            rptList.DataBind();
        }

        protected void btnDel_Click(object sender, EventArgs e)
        {
            RepeaterItem ri = (RepeaterItem)((Button)sender).NamingContainer;
            DataTable dt = (DataTable)ViewState["datatable"];
            foreach (DataRow dr in dt.Rows)
            {
                if (int.Parse(dr["RowNum"].ToString()) == ri.ItemIndex)
                {
                    dt.Rows.Remove(dr);
                    break;
                }
            }
            ViewState["datatable"] = dt;
            rptList.DataSource = dt;
            rptList.DataBind();

        }

旨在提供思考起点，实际需求往往以此为基础再附加一些要求

【代码笔记】动态添加删除带标题的表单控件【HTML为基础 jQuery实现版】