ASP.NET对无序列表批量操作的三种方法小结

 更新时间:2012年01月12日 00:45:53   作者:  
在网页开发中,经常要用到无序列表。事实上在符合W3C标准的div+css布局中,无序列表被大量使用,ASP.NET虽然内置了BulletedList控件,用于创建和操作无序列表,但感觉不太好用
本篇介绍服务器端ASP.NET批量操作基于原生html标签的无序列表的三种方法。
方法一,将li元素做成html控件,加上id,用FindControl方法。

aspx代码:
复制代码 代码如下:

<form id="form1" runat="server">
<ul>
<li id="li1" runat="server">初始值1</li>
<li id="li2" runat="server">初始值2</li>
<li id="li3" runat="server">初始值3</li>
<li id="li4" runat="server">初始值4</li>
<li id="li5" runat="server">初始值5</li>
<li id="li6" runat="server">初始值6</li>
<li id="li7" runat="server">初始值7</li>
<li id="li8" runat="server">初始值8</li>
</ul>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>

aspx.cs代码:
复制代码 代码如下:

protected void Button1_Click(object sender, EventArgs e)
{
//单击按钮后批量改变li元素的内联文本值及样式
for (int i = 1; i <= 8; i++)
{
HtmlGenericControl li = this.FindControl("li" + i) as HtmlGenericControl;
li.InnerHtml = "新值" + i.ToString();
li.Attributes.CssStyle.Value = "color:red";
}
}

方法二,将ul、li元素做成html控件,用ul控件的Controls集合遍历。

aspx代码:
复制代码 代码如下:

<form id="form1" runat="server">
<ul id="ul1" runat="server">
<li runat="server">初始值1</li>
<li runat="server">初始值2</li>
<li runat="server">初始值3</li>
<li runat="server">初始值4</li>
<li runat="server">初始值5</li>
<li runat="server">初始值6</li>
<li runat="server">初始值7</li>
<li runat="server">初始值8</li>
</ul>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>

aspx.cs代码:
复制代码 代码如下:

private int counter = 1;
protected void Button1_Click(object sender, EventArgs e)
{
//单击按钮后批量改变li元素的内联文本值及样式
foreach (Control control in ul1.Controls)
{
if (control is HtmlGenericControl)
{
HtmlGenericControl li = control as HtmlGenericControl;
li.InnerHtml = "新值" + (counter++).ToString();
li.Attributes.CssStyle.Value = "color:red";
}
}
}

方法三,利用HtmlAgilityPack,对元素以Dom方式操作。

aspx代码:
复制代码 代码如下:

<form id="form1" runat="server">
<ul id="ul1" runat="server">
<li>初始值1</li>
<li>初始值2</li>
<li>初始值3</li>
<li>初始值4</li>
<li>初始值5</li>
<li>初始值6</li>
<li>初始值7</li>
<li>初始值8</li>
</ul>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="测试空回发" />
</form>

aspx.cs代码:
复制代码 代码如下:

protected void Button1_Click(object sender, EventArgs e)
{
//单击按钮后批量改变li元素的内联文本值及样式
HtmlDocument htmlDoc = new HtmlDocument();
htmlDoc.LoadHtml(ul1.InnerHtml);
HtmlNodeCollection lis = htmlDoc.DocumentNode.SelectNodes("li");
for (int i = 0; i < lis.Count; i++)
{
lis[i].InnerHtml = "新值" + (i + 1).ToString();
lis[i].Attributes.Add("style", "color:red");
}
ul1.InnerHtml = htmlDoc.DocumentNode.InnerHtml;
}

以上三种方法各有优缺点,可根据实际情况选用。

相关文章

  • asp.net Silverlight中的模式窗体

    asp.net Silverlight中的模式窗体

    现在Web开发技术中流行着模式窗体,这种不用跳转页面又能够满足与用户进行数据交互的手段确实不错,那我今天也谈谈Silverlight中的模式窗体吧。
    2009-11-11
  • Community Server专题一:概述Community Server

    Community Server专题一:概述Community Server

    Community Server专题一:概述Community Server...
    2007-03-03
  • ASP.NET MVC实现下拉框多选

    ASP.NET MVC实现下拉框多选

    这篇文章介绍了ASP.NET MVC实现下拉框多选的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • ASP.NET 服务器路径和一般资源调用

    ASP.NET 服务器路径和一般资源调用

    ASP.NET 服务器路径和一般资源调用,实现代码。
    2009-08-08
  • 验证用户必选CheckBox控件与自定义验证javascript代码

    验证用户必选CheckBox控件与自定义验证javascript代码

    CheckBox控件,由于它的值是选择与非选择。因此在提交数据时,想让用户必须选择CheckBox,普通情况之下,不好做验证;但我们可以使用asp:CustomValidator来验证,不过还得写自定义验证Javascript代码
    2013-01-01
  • MVC4制作网站教程第四章 添加栏目4.1

    MVC4制作网站教程第四章 添加栏目4.1

    这篇文章主要为大家详细介绍了MVC4制作网站教程,添加栏目功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 区分ASP.NET中get方法和post方法

    区分ASP.NET中get方法和post方法

    我们都知道,get是从服务器上获取数据,post是向服务器上传数据。本文主要介绍ASP.NET中get方法和post方法的区别,需要的朋友可以参考下
    2015-10-10
  • ASP.NET Core使用自定义日志中间件

    ASP.NET Core使用自定义日志中间件

    这篇文章介绍了ASP.NET Core使用自定义日志中间件的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • .NET Core系列之MemoryCache 缓存域

    .NET Core系列之MemoryCache 缓存域

    这篇文章主要介绍了.NET Core系列之MemoryCache 缓存域,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • .NET中的Swagger使用示例详解

    .NET中的Swagger使用示例详解

    Swagger (OpenAPI) 是一个与语言无关的规范,用于描述 REST API,这篇文章给大家介绍.NET中的Swagger使用,感兴趣的朋友一起看看吧
    2023-12-12

最新评论