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  runat="server">
         <ContentTemplate>
            <asp:Table  runat="server" CaptionAlign="Bottom" 
                    CellPadding="2" CellSpacing="2" HorizontalAlign="Center" Width="750px">
            </asp:Table>
            <div  runat="server"  visible="false">
                 <asp:Button  runat="server" OnClick="btAddRow_Click" Text="添加成员" />
                 <asp:Button  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();
        }

        
    }