Summary of ASP.NET's three methods for batch operations on unordered lists

This article describes three methods for server-side ASP.NET batch operations based on an unordered list of native html tags.
Method 1, make the li element into the html control, add the 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) 
{ 
// Click the button and change the batch 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, ul and li elements are made into html control, and Controls set of ul control is used to traverse.

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) 
{ 
// Click the button and change the batch 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, HtmlAgilityPack is used to operate the elements in Dom mode.

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 empty postbacks " /> 
</form> 

aspx. cs code:

 
protected void Button1_Click(object sender, EventArgs e) 
{ 
// Click the button and change the batch 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, which can be selected according to the actual situation.