在標準ASP.NET Web窗體控件上添加/刪除額外CSS類的簡單方法

我有一個導航菜單作爲ASP.NET Web窗體用戶控件（ASCX）。每個菜單項都可以根據控件所呈現的頁面變爲活動狀態。活動狀態應該用一個名爲「active」的附加CSS類來表示。通過設置爲true其中一個屬性，可以從代碼隱藏文件控制要變爲活動狀態的項目：IsMenuItem1Active或IsMenuItem2Active。在標準ASP.NET Web窗體控件上添加/刪除額外CSS類的簡單方法

現在我的問題是：基於set屬性，我可以如何修改視圖內相應菜單項的CssClass屬性，而無需在代碼隱藏中執行任何其他邏輯？

<div class="menu"> 
    <asp:HyperLink runat="server" ID="MenuItem1" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink> 
    <asp:HyperLink runat="server" ID="MenuItem2" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink> 
</div>

來源

2013-11-14 Aleksey Bykov

只需添加語句即可在代碼後面添加類，並不是什麼大問題。 –

這是一件大事，因爲我不想重新編譯項目，如果我只想更改類名稱。這就是代碼隱藏與視圖分離的唯一原因，所以設計方面可以改變而不會混淆邏輯。 –

這裏是正確的答案：http://stackoverflow.com/questions/19990046/why-doesnt-binding-expression-work-with-c-sharp-expressions 謝謝大家！ –

與設計和邏輯的分離保持，這將是更好的背後控制從代碼的CssClass值。您需要進行的任何設計更改都可以通過您添加的active類名錶示的CSS來完成。

如果你絕對必須做到這一點的觀點，那麼你可以使用一些JavaScript：

<script> 
var c = '<%= IsMenuItem1Active ? "menu-item active" : "menu-item" %>' 
document.getElementById('<%= MenuItem1.ClientID %>').setAttribute('class', c); 
</script>

來源

2013-11-14 20:41:08 matk

請嘗試以下代碼：

  <div class="menu"> 
       <asp:HyperLink runat="server" ID="MenuItem1" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink> 
       <asp:HyperLink runat="server" ID="MenuItem2" CssClass="menu-item" NavigateUrl="~/">Menu item 1</asp:HyperLink> 
      </div> 
      <%-- Change css here--%> 
      <script type="text/javascript"> 
      <%if (IsMenuItem1Active == true) 
      {%> 
       document.getElementById("<%=MenuItem1.ClientID%>").className += " active"; 
      <%} 
      else if (IsMenuItem2Active == true) 
      {%> 
       document.getElementById("<%=MenuItem2.ClientID%>").className += " active"; 
      <%}%> 
      </script>

來源

2013-11-14 20:41:40

我建議兩種方式做到這一點。一種方法是使用JavaScript。第二種方法是通過爲特定控件使用asp.net生命週期鉤子函數。

第一種選擇： 根據this，你可以一個CSS類使用添加到一個特定的元素是：

document.getElementById("MyElement").className += " MyClass";

此調用應在onLoad功能這是剛剛在HTML調用之前進行DOM已創建。

第二個選項： 根據this文章描述了ASP.NET的生命週期，你可以以添加CSS類使用PreRender功能。

希望我幫了忙！

來源

2013-11-14 20:52:27

在標準ASP.NET Web窗體控件上添加/刪除額外CSS類的簡單方法

回答

相關問題