ASP.NET批量操作基于原生html标签的无序列表的三种方法

 更新时间:2014年09月25日 16:25:58   投稿:whsnow  
无序列表被大量使用,ASP.NET虽然内置了BulletedList控件,用于创建和操作无序列表,但感觉不太好用

在网页开发中,经常要用到无序列表。事实上在符合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; 
}

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

相关文章

  • 在.Net中使用MongoDB的方法教程

    在.Net中使用MongoDB的方法教程

    最近在研究mongodb,在网上搜索发现针对.net 中使用mongodb的文章要么是早期的驱动版本,要么资料很少,所以写个随笔记录一下,本文详细的给大家介绍了在.Net中使用MongoDB的方法教程,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • ASP.NET Core异常和错误处理(8)

    ASP.NET Core异常和错误处理(8)

    这篇文章主要为大家详细介绍了ASP.NET Core异常和错误处理的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • asp.net 定时间点执行任务的简易解决办法

    asp.net 定时间点执行任务的简易解决办法

    这里的定时间点执行任务,指的是每天的某个时间执行一项任务。
    2009-12-12
  • 理解ASP.NET Core 启动类(Startup)

    理解ASP.NET Core 启动类(Startup)

    这篇文章主要介绍了ASP.NET Core 启动类(Startup),文中运用代码讲解相关知识非常详细,感兴趣的小伙伴可以参考一下
    2021-09-09
  • Xamarin.Forms在安卓机上进行本机调试

    Xamarin.Forms在安卓机上进行本机调试

    这篇文章介绍了Xamarin.Forms在安卓机上进行本机调试的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-02-02
  • .net实现网站用户登录认证

    .net实现网站用户登录认证

    本文给大家介绍的是.net实现网站用户登录认证的方法和实例,都非常的简单实用,需要的小伙伴可以参考下。
    2015-11-11
  • asp.net的cms 原理篇

    asp.net的cms 原理篇

    昨晚稍微写了一点,我订制的cms系统的标签,今天我把标签所代替的代码也写出来,需要的朋友可以参考下
    2012-12-12
  • .NET实现在网页中预览Office文件的3个方法

    .NET实现在网页中预览Office文件的3个方法

    这篇文章主要介绍了.NET实现在网页中预览Office文件的3个方法,本文最终采用了ASPOSE+pdf2swf+FlexPaper的方式解决了这个需求,需要的朋友可以参考下
    2014-10-10
  • asp.net使用jquery模板引擎jtemplates呈现表格

    asp.net使用jquery模板引擎jtemplates呈现表格

    这篇文章主要介绍了asp.net使用jquery模板引擎jtemplates呈现表格的示例,大家参考使用吧
    2014-01-01
  • .NET Core2.1如何获取自定义配置文件信息详解

    .NET Core2.1如何获取自定义配置文件信息详解

    这篇文章主要给大家介绍了关于.NET Core2.1如何获取自定义配置文件信息的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08

最新评论