第1部分——网格视图与动态HTML表（ASP.NET Web窗体）

最新推荐文章于 2023-12-12 15:41:13 发布
最新推荐文章于 2023-12-12 15:41:13 发布
阅读量248 收藏 1
点赞数
分类专栏： ASP.NET CORE CSharp.NET 文章标签： asp.net c# 后端
原文链接：https://www.codeproject.com/Articles/5346651/Part-1-GridView-vs-Dynamic-HTML-Table-ASP-NET-WebF
版权

目录

介绍

编码

第1轮:构建一个简单的表

GridView方法

动态HTML方法

第2轮：应用主题或样式

GridView方法：

动态HTML方法

第3轮：构建表单表

网格视图方法

动态HTML方法

JavaScript方法

使用动态HTML表格的优点

介绍

在本文中，我们将比较在ASP.NET WebForms中制作表格的两种方法。即：

  1. GridView和
  2. 动态网页表格

本文的目的是提供一种与GridView的传统方法不同的制作表格的方法。

本文作为并排比较，介绍如何实现动态HTML表以实际替换GridView。

编码

首先，让我们使用一个简单的类对象作为容器来保存数据。

public class Member
{
    public int Id { get; set; }
    public string Name { get; set; }
    public DateTime DateRegister { get; set; }
    public int Gender { get; set; }
    public int Status { get; set; }

    public Member(int id)
    {
        Id = id;
        Status = 1;
    }

    public Member(int id, string name, DateTime dateRegister, int gender)
    {
        Id = id;
        Name = name;
        DateRegister = dateRegister;
        Gender = gender;
        Status = 1;
    }

    public Member(int id, int status)
    {
        Id = id;
        Status = status;
    }

    public string GenderStr
    {
        get
        {
            switch (Gender)
            {
                case 1:
                    return "Male";
                case 2:
                    return "Female";
                default:
                    return "Other";
            }
        }
    }

    public string DateRegisterStr
    {
        get
        {
            if (DateRegister == DateTime.MinValue)
                return "---";
            return DateRegister.ToString("dd MMM yyyy");
        }
    }

    public string DateRegisterData
    {
        get
        {
            if (DateRegister == DateTime.MinValue)
                return "";
            return DateRegister.ToString("yyyy-MM-dd");
        }
    }

    public string SelectGender(int g)
    {
        if (g == Gender)
            return "selected";
        return "";
    }
}

一些帮助程序方法：

public class helper
{
    public static List<Member> GetMemberList()
    {
        List<Member> lst = new List<Member>();

        lst.Add(new Member(1, "James", new DateTime(2022, 11, 11), 1));
        lst.Add(new Member(2, "Amy", new DateTime(2022, 11, 10), 2));
        lst.Add(new Member(3, "Smith", new DateTime(2022, 10, 8), 1));
        lst.Add(new Member(4, "Cait", new DateTime(2022, 9, 7), 2));

        return lst;
    }

    public static DateTime ConvertToDate(string input)
    {
        DateTime date = DateTime.MinValue;

        try
        {
            if (!string.IsNullOrWhiteSpace(input))
            {
                string[] da = input.Split('-');
                int year = Convert.ToInt32(da[0]);
                int month = Convert.ToInt32(da[1]);
                int day = Convert.ToInt32(da[2]);

                date = new DateTime(year, month, day);
            }
        }
        catch { }

        return date;
    }
}

第1轮:构建一个简单的表

让我们构建一个简单的表，如下所示:

GridView方法

前端页面:

注意: 如果不使用"state"函数，通过应用EnableViewState="False"属性，始终关闭ViewState。

<asp:GridView ID="gv1" runat="server" 
 AutoGenerateColumns="false" EnableViewState="false">
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="Id" />
        <asp:HyperLinkField HeaderText="Name" DataTextField="Name"
         DataNavigateUrlFields="Id" 
         DataNavigateUrlFormatString="ViewMember.aspx?id={0}" />
        <asp:BoundField HeaderText="Gender" DataField="GenderStr" />
        <asp:BoundField HeaderText="Date Register" DataField="DateRegisterStr" />
    </Columns>
</asp:GridView>

后端的代码给出如下：

var lst = helper.GetMemberList();
gv1.DataSource = lst;
gv1.DataBind();

动态HTML方法

前端页面：

在head处应用一些基本样式：

<style type="text/css">
    .tb1 table {
        border-collapse: collapse;
    }

    .tb1 th {
        border: 1px solid black;
    }

    .tb1 td {
        border: 1px solid black;
    }
</style>

然后，body组件：

<div class="tb1">
    <asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
</div>

后端的代码：

var lst = helper.GetMemberList();

StringBuilder sb = new StringBuilder();

sb.Append(@"
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Date Register</th>
</tr>
");

foreach (var m in lst)
{
    sb.Append($@"
<tr>
<td>{m.Id}</td>
<td><a href='ViewMember.aspx?id={m.Id}'>{m.Name}</a></td>
<td>{m.GenderStr}</td>
<td>{m.DateRegisterStr}</td>
</tr>
");
}

sb.Append("</table>");

ph1.Controls.Add(new LiteralControl(sb.ToString()));

第2轮：应用主题或样式

让我们以这个设计为例：

GridView方法：

您可以使用有限的预先设计的默认颜色（快速方法），如下所示：

或者在前端页面手动编码，例如：

<asp:GridView ID="gv2" runat="server" AutoGenerateColumns="False"
    EnableViewState="False" CellPadding="10" ForeColor="#333333" GridLines="None">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="Id" />
        <asp:HyperLinkField HeaderText="Name" 
         DataTextField="Name" DataNavigateUrlFields="Id" 
         DataNavigateUrlFormatString="ViewMember.aspx?id={0}" />
        <asp:BoundField HeaderText="Gender" DataField="GenderStr" />
        <asp:BoundField HeaderText="Date Register" DataField="DateRegisterStr" />
    </Columns>
    <EditRowStyle BackColor="#7C6F57" />
    <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#E3EAEB" />
    <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F8FAFA" />
    <SortedAscendingHeaderStyle BackColor="#246B61" />
    <SortedDescendingCellStyle BackColor="#D4DFE1" />
    <SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>

或者，也可以通过将两个属性应用于GridView组件来直接应用类：

CssClass="table1" GridLines="None"

例：

<asp:GridView ID="gv2" runat="server" CssClass="table1" GridLines="None"
     AutoGenerateColumns="False" EnableViewState="False">
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="Id" />
        <asp:HyperLinkField HeaderText="Name" DataTextField="Name"
       DataNavigateUrlFields="Id" DataNavigateUrlFormatString="ViewMember.aspx?id={0}" />
        <asp:BoundField HeaderText="Gender" DataField="GenderStr" />
        <asp:BoundField HeaderText="Date Register" DataField="DateRegisterStr" />
    </Columns>
</asp:GridView>

动态HTML方法

注意：使用CSS来设置表格样式是Web开发领域中最“自然”和“原生”的方式。因此，强烈建议以这种方式编码而不是使用GridView样式。

使用CSS样式块：

<style type="text/css">
    .tb1 table {
        border-collapse: collapse;
    }

    .tb1 th {
        border: 1px solid black;
        background: #1C5E55;
        color: white;
        padding: 10px;
        border: none;
    }

    .tb1 td {
        border: 1px solid black;
        color: #333333;
        padding: 10px;
        border: none;
    }

    .tb1 tr:nth-child(even) {
        background: #E3EAEB;
    }
</style>

和身体组件...相同：

<div class="tb1">
    <asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
</div>

第3轮：构建表单表

让我们以这个表单表为例：

网格视图方法

注 1：要使其正常工作，必须启用GridView组件的ViewState。

例如：

<asp:GridView ID="gv3" runat="server" EnableViewState="True"></asp:GridView>

或者简单地：

<asp:GridView ID="gv3" runat="server"></asp:GridView>

默认情况下ViewState通常处于打开状态。

注意2：ViewState有助于维护回发前后的“状态”或数据。但是有一个缺点，ViewState会增加传输到最终用户Web浏览器的页面大小。比GridView更大，页面大小也就越大。有关ViewState的更多信息，请进一步研究“ASP.NET ViewState如何工作？”主题，并研究“压缩ViewState”。

前端页面编码：Color="#15524A" />

<asp:GridView ID="gv3" runat="server" AutoGenerateColumns="False"
    CellPadding="10" ForeColor="#333333" GridLines="None">
    <AlternatingRowStyle BackColor="White" />
    <Columns>
        <asp:BoundField HeaderText="ID" DataField="Id" />
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Gender">
            <ItemTemplate>
                <asp:DropDownList ID="dropGender" runat="server">
                    <asp:ListItem Value="1" Text="Male"></asp:ListItem>
                    <asp:ListItem Value="2" Text="Female"></asp:ListItem>
                    <asp:ListItem Value="0" Text="Other"></asp:ListItem>
                </asp:DropDownList>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Date Register">
            <ItemTemplate>
                <asp:TextBox ID="txtDateRegister" runat="server" TextMode="Date">
                </asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Remove">
            <ItemTemplate>
                <asp:CheckBox ID="cbRemove" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <EditRowStyle BackColor="#7C6F57" />
    <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#E3EAEB" />
    <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#F8FAFA" />
    <SortedAscendingHeaderStyle BackColor="#246B61" />
    <SortedDescendingCellStyle BackColor="#D4DFE1" />
    <SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>

后端代码用于加载GridView：

gv3.DataSource = lst;
gv3.DataBind();

for (int i = 0; i < lst.Count; i++)
{
    GridViewRow gr = gv3.Rows[i];

    var txtName = (TextBox)gr.FindControl("txtName");
    var dropGender = (DropDownList)gr.FindControl("dropGender");
    var txtDateRegister = (TextBox)gr.FindControl("txtDateRegister");

    var m = lst[i];

    txtName.Text = m.Name;
    dropGender.SelectedValue = m.Gender.ToString();
    txtDateRegister.Text = m.DateRegisterData;
}

保存GridView表单的代码：

// declare a list to store data
List<Member> lst = new List<Member>();

for (int i = 0; i < gv3.Rows.Count; i++)
{
    GridViewRow gr = gv3.Rows[i];

    var cbRemove = (CheckBox)gr.FindControl("cbRemove");

    if (cbRemove.Checked)
    {
        // remove
        continue;
    }

    int id = Convert.ToInt32(gr.Cells[0].Text);

    var txtName = (TextBox)gr.FindControl("txtName");
    var dropGender = (DropDownList)gr.FindControl("dropGender");
    var txtDateRegister = (TextBox)gr.FindControl("txtDateRegister");

    var date = helper.ConvertToDate(txtDateRegister.Text);
    int gender = Convert.ToInt32(dropGender.SelectedValue);

    lst.Add(new Member(id, txtName.Text, date, gender));
}

动态HTML方法

首页正文组件...相同：

<div class="tb1">
    <asp:PlaceHolder ID="ph1" runat="server"></asp:PlaceHolder>
</div>

用于加载HTML表的代码：

StringBuilder sb = new StringBuilder();

sb.Append(@"
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Gender</th>
<th>Date Register</th>
<th>Remove</th>
</tr>
");

foreach (var m in lst)
{
    string name = Server.HtmlEncode(m.Name);

    sb.Append($@"
<tr>
<td>{m.Id}</td>
<td><input name='input_{m.Id}_name' type='text' value='{name}' /></td>
<td>
<select name='input_{m.Id}_gender'>
<option value='1' {m.SelectGender(1)}>Male</option>
<option value='2' {m.SelectGender(2)}>Female</option>
<option value='0' {m.SelectGender(0)}>Other</option>
</select>
<td><input name='input_{m.Id}_date' type='date' value='{m.DateRegisterData}' /></td>
<td><input name='input_{m.Id}_remove' type='checkbox' /></td>
</tr>
");
}

sb.Append("</table>");

ph1.Controls.Add(new LiteralControl(sb.ToString()));

保存HTML表格表单的代码：

// declare a dictionary to store the data
Dictionary<int, Member> dicMember = new Dictionary<int, Member>();

foreach (var key in Request.Form.AllKeys)
{
    if (key.StartsWith("input_"))
    {
        string[] ka = key.Split('_');

        int id = Convert.ToInt32(ka[1]);

        if (dicMember.ContainsKey(id))
            continue;

        if (Request[$"input_{id}_remove"] != null)
        {
            // remove
            dicMember[id] = new Member(id, 0);
        }
        else
        {
            string name = Request[$"input_{id}_name"];
            int gender = Convert.ToInt32(Request[$"input_{id}_gender"]);
            string dateinput = Request[$"input_{id}_date"];
            DateTime date = helper.ConvertToDate(dateinput);

            dicMember[id] = new Member(id, name, date, gender);
        }
    }
}

List<Member> lst = new List<Member>();

foreach (var kv in dicMember)
{
    if (kv.Value.Status == 1)
        lst.Add(kv.Value);
}

JavaScript方法

继续阅读 第2部分：GridView VS动态HTML表（ASP.NET Web窗体）

使用动态HTML表格的优点

  • 在操作表结构方面非常灵活
  • 轻松处理动态列（其中if列的总数不可预测）
  • 非常容易处理的标题colspan
  • 非常容易应用不同的样式策略（通过使用CSS）
  • 代码更简洁
  • 更具自然性和Web开发的原生性
  • 可以在表格单元格中轻松排列和显示多数据字段，包括图像组件

https://www.codeproject.com/Articles/5346651/Part-1-GridView-vs-Dynamic-HTML-Table-ASP-NET-WebF

寒冰屋
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET Web Forms 自学篇:（五） HTML表单
灵活大胖子HDG 的博客
01-23 479
ASP.NET Web Forms - HTML 表单 所有的服务器控件都必须出现在 标签中， 标签必须包含 runat=“server” 属性。 ASP.NET Web 表单 所有的服务器控件都必须出现在 标签中， 标签必须包含 runat=“server” 属性。runat=“server” 属性表明该表单必须在服务器上进行处理。同时也表明了包含在它内部的控件可被服务器脚本访问： &amp;amp;l...
动态生成表格（ASP）
02-27
该系统输入要建立的表格的行列数 就可以生成想要的表格
asp.net动态创建表格
坚石
03-19 3258
HtmlTable实例演示 输入表格行数： 输入表格单元格： protected void Submit1_ServerClick(object sender, EventArgs e) {
asp.net html table,在ASP.NET中利用HtmlTable动态创建表格 | 学步园
weixin_39678163的博客
07-01 458
ASP.NET 2.0文件１: Deafault.aspxHtmlTable演示HtmlTable实例演示输入表格行数：输入表格单元格：文件2:Deafault.aspx.csusing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using Syste...
Asp.Net WebForm Rdlc 报表的使用
liwan09的博客
08-07 2311
开发工具 VS2017 一、项目创建 1、创建 .Net项目 2、创建报表文件目录 项目创建完成后，创建如下的文件夹目录 rdlc文件夹下，存放的是rdlc 报表文件，RdlcReport是显示报表的页面 3、报表安装配置 1）“工具”选项——“扩展和更新”选项——选择“联机”——搜索框中输入 rdlc搜索——选择“Microsoft RDLC Report Desig...
asp.net动态表格生成（收藏）
weixin_34407348的博客
02-17 165
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <mce:script runat="server"><!...
使用Bootstrap 4在Web窗体中可编辑的ASP.NET Gridview
04-11
在本文中，我们将深入探讨如何在ASP.NET Web Forms应用程序中使用Bootstrap 4框架创建一个可编辑的Gridview。Bootstrap是一个流行的开源前端开发工具集，它提供了丰富的预定义样式和组件，使得网页设计更加便捷和...
ASP.Net网页代码模型及生命周期,web窗体标准控件,web窗体数据控件
04-17
ASP.NET 是微软开发的一种用于构建动态网站、Web应用程序和Web服务的框架。在这个主题中，我们将深入探讨ASP.NET网页代码模型、网页生命周期以及Web窗体中的标准控件和数据控件。 **ASP.NET网页代码模型** ASP.NET ...
ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1
08-19
第1章　ASP.NET简介 1.1　ASP.NET的7大要点 1.1.1　要点1：ASP.NET是同.NETFramework集成在一起的 1.1.2　要点2：ASP.NET是编译执行的，而不是解释执行的 1.1.3　要点3：ASP.NET支持多语言 1.1.4　要点4：ASP...
Ext.NET.WebForms.4.8.1.zip
06-29
4. **WebForms开发**：ASP.NET Web Forms是微软.NET Framework的一部分，它提供了一种模型视图控制器（MVC）之外的开发模式。WebForms通过模拟传统桌面应用的事件驱动模型，使Web开发更接近传统的Windows编程体验。...
ASP.NET4高级程序设计(第4版) 3/3
10-29
第1章　ASP.NET简介　2 1.1　ASP.NET的7大要点　2 1.1.1　要点1：ASP.NET是同.NETFramework集成在一起的　2 1.1.2　要点2：ASP.NET是编译执行的，而不是解释执行的　3 1.1.3　要点3：ASP.NET支持多语言　4 1.1.4　...
asp.net中用后台代码创建datatable和html表格,asp.net动态生成DataTable的代码
weixin_29091105的博客
06-19 537
在asp.net中，使用下面的代码，可根据需要动态生成、动态创建DataTable，代码如下，仅供参考：//声明一个名称为MyTable的datatableDataTable MyDT = new DataTable("MyTable");DataColumn dc = new DataColumn();//为表格添加列dc = new DataColumn("试卷名称", typeof(stri...
分享一个ASP.NET 中Web窗体中的自制的表格
treopp的博客
04-12 861
下面是HTML代码： <table style="float: right; margin-top: 20px;"> <tr class="page-font"> <td> <asp:ImageButton ID="ImageButton1" runat="server" src="Director/imgs/angle-double-left.png"
webform能用ajax么,在webform中使用ajax
weixin_32379547的博客
08-05 523
如果你用过asp.net webform， 说明你也算是.net 开发的老兵了。webform应该是2011-2013左右，当时还用visual studio 2005、 visual studio 2008。后来基本都用的是mvc。如果是新开发的项目，估计没人会用webform技术。但是有些旧版本的项目，还需要维护，所以，我又不得不重新用上webform技术。webform的程序中，大部分都是服...
ASP.NET（WebForm） 快捷编辑表格
最新发布
loody1的博客
12-12 685
如想ASP.NET控件GridView中的内容，需在每行增加“编辑”按钮，点击启动该行的编辑，较为不便。使用HTML的Table实现后台添加数据、读取表格内容非常方便。3.在cs文件中添加如下代码（未操作步骤四的，不能编辑）2.在aspx文件的“body”块中添加如下代码。1.新建“web窗体”
WebForm table表格的应用
JingDuiTell的博客
04-08 1091
平常要实现以下的效果： 通过.datagrid 填写好参数url 就能实现，直接显示表里全部数据 但是如果要实现以下效果，每一个列名都是一个label。 那么就用到表列转行的功能，以天气表为例 通过列转行，并指定列明，列明要和web的label值一一对应 通过url得到json型的数据赋值给web页的label值 注意类型的转换。 最后在页面初始化的时候，如下操作就可以啦！ ...
Web构建表单——form表单元素
Braveyjc的博客
12-27 886
HTML构建表单的基本结构、基本元素、表单的处理
ASP动态创建表格 Table
陈的博客
06-22 1628
新建web窗体 Table 添加Table控件 设置Table属性（向Table对象添加行使用Rows属性，向TableRow对象添加单元格使用Cells属性） 在aspx.cs中添加以下代码实现动态创建 protected void Page_Load(object sender, EventArgs e) { string[] name = {"妹妹","哥哥"}; string[] number = { "201924111", "201924112"
WebForm窗体实现对数据库的增删改查（SQL Server）
m0_51110997的博客
07-28 583
【代码】WebForm窗体实现对数据库的增删改查（SQL Server）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值