C#动态控件生成与数据修改_c# 动态生成控件

环境：.net framework4.7

需求：在前端界面显示table，用于展示数据库查询数据，但是第一列为按钮控件，用于对行数据进行编辑、提交修改、删除等操作。即table、tablerow【1】、tablecell【1】为按钮控件，其余列为数据；

实现：1、使用循环数据表获取行数/限定行数（限定行数时可以使用上下翻页按钮+文本控件记录翻页数值，再提交到C#进行拼接查询）；2、在循环内创建按钮对象（后台按钮或前台按钮）；3、使用合适的控件保存数据值用于展示（readonly=true禁用编辑）、点击修改按钮时：修改（readonly=false启用编辑）、点击提交时将修改后的数据同步到数据库

相关技术点：1、动态生成按钮的委托事件绑定，2、动态切换文本控件的编辑与禁用，3、前后端操作交互

 在网上找了很多如何动态绑定委托事件，但是版本不支持invoke

代码：C#+HTML+JavaScript

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Windows.Forms;
 
public partial class _Default : System.Web.UI.Page
{
    
    protected void Page_Load(object sender, EventArgs e)
    {
        //行数，交给前端
        tablerowscount.Text = "8";
        tablerowscount.Enabled = false;
        //可以使用前置条件判断是否执行添加行操作
        if (showtable.Rows.Count == 1) {  //当表格内没有数据时添加行
            AddRows();
        }
        
    }
 
    //动态生成函数
    private void AddRows() {
        for (int i = 0; i < 8; i++)
        {
            //行
            TableRow row = new TableRow();
            if (i % 2 == 1)
            {
                row.BackColor = System.Drawing.Color.AliceBlue;  //行背景色，为系统预设值
            }
            else {
                row.BackColor = System.Drawing.Color.White;
            }
            
            //列
            TableCell cell = new TableCell();
            //按钮控件
            System.Web.UI.WebControls.Button button1 = new System.Web.UI.WebControls.Button();
            System.Web.UI.WebControls.Button button2 = new System.Web.UI.WebControls.Button();
                //关键，将控件添到页面控件集中,注册为服务器控件，防止加载刷新时动态生成的控件属性丢失
            button1.Attributes.Add("runat", "server");
            button2.Attributes.Add("runat", "server");
            this.Controls.Add(button1);
            this.Controls.Add(button2);
                //按钮控件属性
            button1.ID = "buttonA" + i.ToString();//使用数据行号对控件对象进行统一管理，方便后续定位
            button2.ID = "buttonB" + i.ToString();
            button1.CssClass = "buttonA";
            button2.CssClass = "buttonB";
            button1.Text = "删除";
            button2.Text = "提交";
            button1.Click += new EventHandler(this.button1_click);//绑定委托事件
            button2.Click += new EventHandler(this.button2_click);
            //删除、提交按钮，涉及到与后端数据进行交互的操作，使用后台控件
            cell.Controls.Add(button1);
            cell.Controls.Add(button2);
            //前台按钮控件，不涉及对后台数据进行操作，用于前台动态切换
            cell.Controls.Add(new LiteralControl("&nbsp;<input type='button' id='buttonC" + i.ToString() + "' class='button3' value='修改' onclick='xiugai(this.id)'/><input type='button' id='buttonD" + i.ToString() + "' class='button4' value='取消' onclick='quxiao(this.id)'/>"));
            row.Cells.Add(cell);//当前行添加按钮控件列1
            for (int j = 0; j < 3; j++)
            { //数据3列
                //列
                System.Web.UI.WebControls.TableCell cella = new System.Web.UI.WebControls.TableCell();
                //文本框控件
                System.Web.UI.WebControls.TextBox textbox = new System.Web.UI.WebControls.TextBox();
                //文本框控件属性
                textbox.ID = "textbox" + j.ToString() + i.ToString();
                textbox.CssClass = "textbox";
                textbox.Text = "数据第" + i.ToString() + "行，第" + j.ToString() + "列";
                textbox.BorderWidth = 0;
                if (i % 2 == 1)
                {
                    textbox.BackColor = System.Drawing.Color.AliceBlue;  //间隔，背景色，为系统预设值
                }
                else
                {
                    textbox.BackColor = System.Drawing.Color.White;
                }
                cella.Controls.Add(textbox);//列添加控件对象
                row.Cells.Add(cella);//向行添加列对象
            }
            showtable.Rows.Add(row);//表添加行对象
        }
    }
    //按钮交互操作
    private void button1_click(object sender, EventArgs e) {
        MessageBox.Show("点击了删除按钮");
    }
    private void button2_click(object sender, EventArgs e) {
        MessageBox.Show("点击了提交按钮");
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var rowscount = Number(document.getElementById("tablerowscount").value)
            for (var i = 0; i < rowscount; i++) {
                var tijiao = "buttonB" + String(i)
                var quxiao = "buttonD" + String(i)
                document.getElementById(tijiao).style.display = "none"
                document.getElementById(quxiao).style.display = "none"//设置按钮不可见
 
                for (var j = 0; j < 3; j++) {
                    var textbox = "textbox" + String(j) + String(i)
                    document.getElementById(textbox).readOnly=true //设置文本框控件只读
                }
            }
        }
        //启用编辑
        function xiugai(id) {
            var nid = id.replace("buttonC", "")
            for (var i = 0; i < 3; i++) {
                var textbox = "textbox" + String(i) + nid
                document.getElementById(textbox).readOnly = false  //设置指定行的文本框可编辑
                document.getElementById(textbox).style.borderWidth = "2px"
            }
            //交替显示按钮控件
            document.getElementById("buttonA" + nid).style.display = "none"
            document.getElementById("buttonC" + nid).style.display = "none"
            document.getElementById("buttonB" + nid).style.display = "inline"
            document.getElementById("buttonD" + nid).style.display = "inline"
        }
        //退出编辑
        function quxiao(id) {
            var nid = id.replace("buttonD", "")
            for (var i = 0; i < 3; i++) {
                var textbox = "textbox" + String(i) + nid
                document.getElementById(textbox).readOnly = true  //设置指定行的文本框不可编辑
                document.getElementById(textbox).style.borderWidth = "0px"
            }
            //交替显示按钮控件
            document.getElementById("buttonA" + nid).style.display = "inline"
            document.getElementById("buttonC" + nid).style.display = "inline"
            document.getElementById("buttonB" + nid).style.display = "none"
            document.getElementById("buttonD" + nid).style.display = "none"
        }
    </script>
</head >
<body bgColor ="#e9f4ff">
    <form id="form1" runat="server">
        <div>
            <asp:textbox runat="server" ID="tablerowscount"></asp:textbox>
        </div>
        <asp:table runat="server" ID="showtable" CellPadding="5" GridLines="Both" HorizontalAlign="Center" ForeColor="Black">
            <asp:tablerow runat="server">
                <asp:TableHeaderCell  runat="server">操作</asp:TableHeaderCell>
                <asp:TableHeaderCell  runat="server">数据列1</asp:TableHeaderCell>
                <asp:TableHeaderCell  runat="server">数据列2</asp:TableHeaderCell>
                <asp:TableHeaderCell  runat="server">数据列3</asp:TableHeaderCell>
            </asp:tablerow>
        </asp:table>
    </form>
</body>
</html>

当然，也可以按照不同需求声明不同的控件，只需要将控件注册到controls里

c#初学，欢迎留言