目录
介绍
在本文中，我们将比较在ASP.NET WebForms中制作表格的两种方法。即：
- GridView和
- 动态网页表格
本文的目的是提供一种与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
扫一扫
3540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
