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

时间：2023-03-08 20:44:27

 

　　　　最近跟老师做一个 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"]) + ; 

    }

假设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 = ; i < ; 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 = ; 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 = ; i < Convert.ToInt16(ViewState["count"]); i++)

                addRows(table1);

            addbutton();

        }

    }

相关文章