环境:.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(" <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#初学,欢迎留言