ASP.NET对无序列表批量操作的三种方法_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > ASP.NET对无序列表批量操作的三种方法

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

 2014/9/24 17:52:14  Ranran  程序员俱乐部  我要评论(0)
  • 摘要:在网页开发中,经常要用到无序列表。事实上在符合W3C标准的div+css布局中,无序列表被大量使用,ASP.NET虽然内置了BulletedList控件,用于创建和操作无序列表,但感觉不太好用。本篇介绍服务器端ASP.NET批量操作基于原生html标签的无序列表的三种方法。方法一,将li元素做成html控件,加上id,用FindControl方法。aspx代码:[html]viewplaincopy<formid="form1"runat="server"><ul>
  • 标签:.net ASP.NET 方法 三种方法 net 操作

在网页开发中,经常要用到无序列表。事实上在符合W3C标准的div+css布局中,无序列表被大量使用,ASP.NET虽然内置了BulletedList控件,用于创建和操作无序列表,但感觉不太好用。本篇介绍服务器端ASP.NET批量操作基于原生html标签的无序列表的三种方法

方法一,将li元素做成html控件,加上id,用FindControl方法。

aspx代码:

[html] view plaincopy  
    class="dp-xml" start="1">
  1. <form id="form1" runat="server">  
  2.     <ul>  
  3.         <li id="li1" runat="server">初始值1</li>  
  4.         <li id="li2" runat="server">初始值2</li>  
  5.         <li id="li3" runat="server">初始值3</li>  
  6.         <li id="li4" runat="server">初始值4</li>  
  7.         <li id="li5" runat="server">初始值5</li>  
  8.         <li id="li6" runat="server">初始值6</li>  
  9.         <li id="li7" runat="server">初始值7</li>  
  10.         <li id="li8" runat="server">初始值8</li>  
  11.     </ul>  
  12.     <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />  
  13.     </form>  

 

aspx.cs代码:

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

 

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

aspx代码:

[html] view plaincopy  
  1. <form id="form1" runat="server">  
  2. <ul id="ul1" runat="server">  
  3.     <li runat="server">初始值1</li>  
  4.     <li runat="server">初始值2</li>  
  5.     <li runat="server">初始值3</li>  
  6.     <li runat="server">初始值4</li>  
  7.     <li runat="server">初始值5</li>  
  8.     <li runat="server">初始值6</li>  
  9.     <li runat="server">初始值7</li>  
  10.     <li runat="server">初始值8</li>  
  11. </ul>  
  12. <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />  
  13. </form>  

 

aspx.cs代码:

[csharp] view plaincopy  
  1. private int counter = 1;  
  2. protected void Button1_Click(object sender, EventArgs e)  
  3. {  
  4.     //单击按钮后批量改变li元素的内联文本值及样式  
  5.     foreach (Control control in ul1.Controls)  
  6.     {  
  7.         if (control is HtmlGenericControl)  
  8.         {  
  9.             HtmlGenericControl li = control as HtmlGenericControl;  
  10.             li.InnerHtml = "新值" + (counter++).ToString();  
  11.             li.Attributes.CssStyle.Value = "color:red";  
  12.         }  
  13.     }  
  14. }  

 

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

aspx代码:

[html] view plaincopy  
  1. <form id="form1" runat="server">  
  2. <ul id="ul1" runat="server">  
  3.     <li>初始值1</li>  
  4.     <li>初始值2</li>  
  5.     <li>初始值3</li>  
  6.     <li>初始值4</li>  
  7.     <li>初始值5</li>  
  8.     <li>初始值6</li>  
  9.     <li>初始值7</li>  
  10.     <li>初始值8</li>  
  11. </ul>  
  12. <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />  
  13. <asp:Button ID="Button2" runat="server" Text="测试空回发" />  
  14. </form>  

 

aspx.cs代码:

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


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

发表评论
用户名: 匿名