Làm thế nào để thay đổi lớp CSS của một phần tử trang HTML bằng cách sử dụng ASP.NET?

Question

Tôi có một vài < li> yếu tố với nhân khác nhau id trên ASP.NET page:

<li id="li1" class="class1"> 
<li id="li2" class="class1"> 
<li id="li3" class="class1"> 

và có thể thay đổi lớp học của họ sử dụng JavaScript như thế này:

li1.className="class2" 

Nhưng có một cách để thay đổi < li> yếu tố lớp bằng cách sử dụng ASP.NET? Nó có thể là một cái gì đó như:

WebControl control = (WebControl)FindControl("li1"); 
control.CssClass="class2"; 

Nhưng FindControl() không hoạt động như tôi mong đợi. Bất kỳ đề xuất?

Cảm ơn trước!

Answer 1

Phương thức FindControl tìm kiếm các điều khiển máy chủ. Nghĩa là, nó trông cho các điều khiển với thuộc tính "runat" thiết lập để "máy chủ", như trong:

<li runat="server ... ></li> 

Vì các thẻ <li> của bạn không kiểm soát máy chủ, FindControl không thể tìm thấy chúng. Bạn có thể thêm thuộc tính "runat" vào các điều khiển này hoặc sử dụng ClientScript.RegisterStartupScript để bao gồm một số tập lệnh phía máy khách để thao tác lớp, ví dụ:

System.Text.StringBuilder sb = new System.Text.StringBuilder(); 
sb.Append("<script language=\"javascript\">"); 
sb.Append("document.getElementById(\"li1\").className=\"newClass\";") 
sb.Append("</script>"); 
ClientScript.RegisterStartupScript(this.GetType(), "MyScript", sb.ToString()); 

Answer 2

bạn phải thiết lập runat = "server" như:

<li id="li1" runat="server">stuff</li> 

Answer 3

FindControl sẽ làm việc nếu bạn bao gồm runat = "server" trong <li>

<li id="li1" runat="server">stuff</li> 

Nếu không, bạn mã phía máy chủ có thể 't' thấy 'nó.

Answer 4

Thêm runat="server" trong trang HTML của bạn

sau đó sử dụng tài sản thuộc tính trong trang asp.Net bạn như thế này

li1.Attributes["Class"] = "class1"; 
li2.Attributes["Class"] = "class2"; 

Answer 5

này sẽ tìm các phần tử li và thiết lập một lớp CSS trên nó.

using System.Web.UI.HtmlControls; 

HtmlGenericControl liItem = (HtmlGenericControl) ctl.FindControl("liItemID"); 
liItem.Attributes.Add("class", "someCssClass"); 

Hãy nhớ thêm thuộc tính runat="server" như được đề cập bởi người khác.

Answer 6

Bạn cũng có thể thử loại này quá nếu u muốn thêm một số vài phong cách:

li1.Style.add("color","Blue"); 
li2.Style.add("text-decoration","line-through"); 

Answer 7

Leaf Dev cung cấp các giải pháp cho điều này, nhưng ở vị trí của "ctl" bạn cần phải chèn "Master".

Đó là làm việc cho tôi anyway:

using System.Web.UI.HtmlControls; 

HtmlGenericControl liItem = (HtmlGenericControl) ctl.FindControl("liItemID"); 
liItem.Attributes.Add("class", "someCssClass"); 

Answer 8

Vui lòng thử này nếu bạn muốn áp dụng phong cách:

li1.Style.Add("background-color", "black"); 

Đối với CSS, bạn có thể thử bên dưới cú pháp:

li1.Attributes.Add("class", "clsItem");