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();
        }

        
    }