ASP.NET给Table动态添加删除行，并且得到控件的值

 

 　　　　最近跟老师做一个 web 项目，可我自己又不太懂 js ，所以一直为动态建立表格并且能动态的取值和赋值感到苦恼。起初在网上找到了一些 js 资源，解决了动态添加和取值的问题，可是给表中控件灵活的赋值又成了一个问题。于是乎我又回过头来利用 ASP.NET 的 TABLE 控件，容易赋值且容易取值，但是有一个问题就是，ASP.NET页面每次触发页面都会刷新一次，则我动态建立的表格就会在页面刷新后不见了，而这时若在后台取值就会出现“使用了未实例化对象”的错误，致使无法取到动态添加的行中的内容。

            为此苦恼了很久，发现动态建立表格并不难，但是要保证每次postback的时候都要同步记下Table的状态，这样为页面中 table 动态添加内容或取值就不会出现问题了。虽然基本问题解决了，可是每次动态的添加行或是删除行，页面还是会刷新，看起来感觉不是很好。这个当然是可以解决的，只要把 Table 和相关按钮放在 AJAX Extensions 提供的 UpdatePanel 控件里就可以，这样对Table操作只会引起 UpdatePanel 内的局部刷新，而页面就不会有闪动的效果了。但是要注意的是利用 ASP.NET 的AJAX 要记得在页面中添加 ScriptManager 控件，并且 ScriptManager 要放在其他AJAX提供的控件之前。

 

一、页面中table对应位置的html代码，按下“添加成员”按钮就会动态添加一行，按下“删除”就会删除一行，而本例的删除默认是每次都删除表的最后一行

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
            <asp:Table ID="tableDivide" runat="server" CaptionAlign="Bottom" 
                    CellPadding="2" CellSpacing="2" HorizontalAlign="Center" Width="750px">
            </asp:Table>
            <div ID="divDivBT" runat="server" style="width: 368px; height: 27px" visible="false">
                 <asp:Button ID="btAddRow" runat="server" OnClick="btAddRow_Click" Text="添加成员" />
                 <asp:Button ID="btDelRow" runat="server" OnClick="btDelRow_Click" Text="删除" Width="65px" />
            </div>
            <br />
         </ContentTemplate>
</asp:UpdatePanel>

二、后台添加行的代码

用ViewState["count"]记下table的行数，如果ViewState["count"]==null表明添加的是表格的第一行，着动态生成一个提交按钮以便取值

 
//按下添加成员按钮触发该事件
 protected void btAddRow_Click(object sender, EventArgs e)
    {
        addRows(table1);
        if (ViewState["count"] == null) addbutton();
        ViewState["count"] = Convert.ToInt16(ViewState["count"]) + 1; 

    }

假设table中有两列，一列是TextBox一列是DropDownList，这是一个添加行的函数

 //给表table1添加一行
    private void addRows(Table table)
    {
        TableRow tr = new TableRow();
        TableCell tc1 = new TableCell();
        TextBox t = new TextBox();
        t.ID = "tb" + table1.Rows.Count;
        tc1.Controls.Add(t);
        TableCell tc2 = new TableCell();
        DropDownList dpl = new DropDownList();
        dpl.ID = "dpl" + table1.Rows.Count;
        for (int i = 0; i < 10; i++) dpl.Items.Add(i.ToString());
        tc2.Controls.Add(dpl);
        tr.Cells.Add(tc1);
        tr.Cells.Add(tc2);
        table.Rows.Add(tr);
    }

在添加表格第一行的时候动态添加一个取值按钮，并且为该按钮新建一个Click事件btn_click以取得表格中的值

//添加一个提交的按钮控件
    private void addbutton()
    {
        Button b = new Button();
        b.ID = "btn";
        b.Text = "取值";
        b.Click += new System.EventHandler(btn_click);//添加按钮事件
        placeholder1.Controls.Add(b);
    }
//取值                                       
    private void btn_click(object sender, System.EventArgs e)
    {
        for (int i = 0; i < table1.Rows.Count; i++)
        {
            Response.Write(((TextBox)table1.Rows[i].FindControl("tb" + i)).Text + ((DropDownList)table1.Rows[i].FindControl("dpl" + i)).SelectedValue + "<br>");
        }
    }

删除按钮事件，总是默认删除表的最后一行

 protected void btDelRow_Click(object sender, EventArgs e)
    {
        table1.Rows.RemoveAt(table1.Rows.Count-1);
         ViewState["count"] = Convert.ToInt16(ViewState["count"]) - 1;
    }

 

最后也是最重要的地方，移动要在Page_Load中记下表的状态。注意不要添加if(!ispostback){}，相反你倒可以添加if(ispostback)，因为页面第一次加载不可能已经按下按钮了。 这是要在每次页面刷新的时候同时要保留之前表格的状态，而ViewState可以很好的记录表格动态行数

 protected void Page_Load(object sender, EventArgs e)
    {
        if (ViewState["count"] != null)
        {   
            //每次刷新都重新建立表格循环再次添加行
            for (int i = 0; i < Convert.ToInt16(ViewState["count"]); i++)
                addRows(table1);
            addbutton();
        }

        
    }