背景:有时候,需要为列表动态地添加一行,并且在后台代码中能访问到,即repeater在后台动态的添加一行(如果您只需要在前台用js添加一行,那本文不适合您的应用)。当然很多其它的控件可以轻而易举地做到,但显示的样式可能不是我们想要的,所以在这样的情况下,我们需要用repeater做后台动态添加一行;
现状:在网上主要有,用session来保存状态。额,抛开性能问题不说,这样做也不能保存在页面上输入的数据。所以这次主要实现的是实现保存页面上输入的数据的状态,并在后台动态地添加一行。
解决方法:在后台恢复页面上的数据并存入DataTable,然后为DataTable添加一新行,并重新绑定;
前台代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="dataTable" > <asp:HiddenField ID="hfRptColumns" runat="server" Value="receiver,expense_amount,cut_payment_amount,acutal_amount,bank_no,bank_name" /> <table cellpadding="1" cellspacing="0" border="1" style=" width:800px"> <thead> <tr> <th > 序号 </th> <th> 收款人 </th> <th> 报销金额 </th> <th> 扣款金额 </th> <th> 实付金额 </th> <th> 银行账号 </th> <th> 开户行 </th> </tr> </thead> <tbody> <asp:Repeater ID="rptTest" runat="server"> <ItemTemplate> <tr> <td><%# Container.ItemIndex+1 %></td> <td><asp:Label ID="lblReceiver" runat="server" Text='<%#Eval("receiver") %>'></asp:Label></td> <td><asp:TextBox ID="txtExpenseAmount" runat="server" Text='<%#Eval("expense_amount") %>'></asp:TextBox></td> <td><asp:TextBox ID="txtCutPaymentAmount" runat="server" Text='<%#Eval("cut_payment_amount") %>'></asp:TextBox></td> <td><asp:Label ID="lblAcutalAmount" runat="server" Text='<%#Eval("acutal_amount") %>'></asp:Label></td> <td><asp:Label ID="lblBankNo" runat="server" Text='<%#Eval("bank_no") %>'></asp:Label></td> <td><asp:Label ID="lblBankName" runat="server" Text='<%#Eval("bank_name") %>'></asp:Label></td> </tr> </ItemTemplate> </asp:Repeater> </tbody> </table> <div><asp:Button ID="btnAddNewRow" runat="server" OnClick="btnAddNewRow_Click" Text="添加一行" /></div> </div>
后台代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindData(); } } #region 绑定数据源 /// <summary> /// 绑定repeater的数据源 /// </summary> private void BindData() { DataTable dt = DefineDataTableSchema(hfRptColumns.Value); LoadTestData(dt); rptTest.DataSource = dt; rptTest.DataBind(); } /// <summary> /// 生成测试数据 /// </summary> /// <param name="dt"></param> private void LoadTestData(DataTable dt) { //默认显示5行 for (int i = 0; i < 5; i++) { DataRow row = dt.NewRow(); dt.Rows.Add(row); } //为第一行加载一些数据 DataRow row0 = dt.Rows[0]; row0["receiver"] = "Mike.Jiang"; row0["expense_amount"] = "1000"; row0["cut_payment_amount"] = "300"; row0["acutal_amount"] = "700"; row0["bank_no"] = "325222222232522"; row0["bank_name"] = "建设银行"; } /// <summary> /// 根据repeater相对应的列名,定义数据源datatable的schema /// </summary> /// <param name="columns">列名</param> /// <returns></returns> public DataTable DefineDataTableSchema(string columns) { DataTable dt = new DataTable(); string[] columnsAry = columns.Split(','); foreach (string str in columnsAry) { dt.Columns.Add(str); } return dt; } #endregion #region 添加一行 protected void btnAddNewRow_Click(object sender, EventArgs e) { //首先,恢复数据源 DataTable dt = DefineDataTableSchema(hfRptColumns.Value); foreach (RepeaterItem item in rptTest.Items) { DataRow newRow = dt.NewRow(); newRow["receiver"] = ((Label)item.FindControl("lblReceiver")).Text; newRow["expense_amount"] = ((TextBox)item.FindControl("txtExpenseAmount")).Text; newRow["cut_payment_amount"] = ((TextBox)item.FindControl("txtCutPaymentAmount")).Text; newRow["acutal_amount"] = ((Label)item.FindControl("lblAcutalAmount")).Text; newRow["bank_no"] = ((Label)item.FindControl("lblBankNo")).Text; newRow["bank_name"] = ((Label)item.FindControl("lblBankName")).Text; dt.Rows.Add(newRow); } //添加一行 DataRow row = dt.NewRow(); dt.Rows.Add(row); rptTest.DataSource = dt; rptTest.DataBind(); } #endregion }
示例代码:rptTest.rar