ASP.NET batch operations are based on three unordered lists of native html tags

In web development, unordered lists are often used. In fact, unordered lists are heavily used in div+css layouts that comply with W3C standards. ASP.NET has built-in BulletedList controls for creating and manipulating unordered lists, but it doesn't feel very useful. This article describes three methods for server-side ASP.NET batch manipulation of unordered lists based on native html tags.

Method 1: Make the li element an html control, add id, and use the FindControl method.

aspx code:

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

aspx. cs code:

protected void Button1_Click(object sender, EventArgs e) 
{ 
// Batch changes after clicking the button li The inline text value and style of the element  
for (int i = 1; i <= 8; i++) 
{ 
HtmlGenericControl li = this.FindControl("li" + i) as HtmlGenericControl; 
li.InnerHtml = " The new value " + i.ToString(); 
li.Attributes.CssStyle.Value = "color:red"; 
} 
}

Method 2: Make ul and li elements into html controls, and traverse the Controls collection of ul controls.

aspx code:

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

aspx. cs code:

private int counter = 1; 
protected void Button1_Click(object sender, EventArgs e) 
{ 
// Batch changes after clicking the button li The inline text value and style of the element  
foreach (Control control in ul1.Controls) 
{ 
if (control is HtmlGenericControl) 
{ 
HtmlGenericControl li = control as HtmlGenericControl; 
li.InnerHtml = " The new value " + (counter++).ToString(); 
li.Attributes.CssStyle.Value = "color:red"; 
} 
} 
}

Method 3, using HtmlAgilityPack, operates on elements as Dom.

aspx code:

<form id="form1" runat="server"> 
<ul id="ul1" runat="server"> 
<li> The initial value 1</li> 
<li> The initial value 2</li> 
<li> The initial value 3</li> 
<li> The initial value 4</li> 
<li> The initial value 5</li> 
<li> The initial value 6</li> 
<li> The initial value 7</li> 
<li> The initial value 8</li> 
</ul> 
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> 
<asp:Button ID="Button2" runat="server" Text=" Test the null postback " /> 
</form>

aspx. cs code:

protected void Button1_Click(object sender, EventArgs e) 
{ 
// Batch changes after clicking the button li The inline text value and style of the element  
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 = " The new value " + (i + 1).ToString(); 
lis[i].Attributes.Add("style", "color:red"); 
} 
ul1.InnerHtml = htmlDoc.DocumentNode.InnerHtml; 
}

The above three methods have their own advantages and disadvantages, and can be selected according to the actual situation.