2009-07-10 71 views
0

母版頁中,我有這樣的....如何在MVC中設置HTML元素的樣式/類?

<ul id="productList"> 
    <li id="product_a" class="active"> 
    <a href="">Product A</a> 
    </li> 
    <li id="product_b"> 
    <a href="">Product B</a> 
    </li> 
    <li id="product_c"> 
    <a href="">Product C</a> 
    </li>      
</ul> 

我需要改變類選中的列表項的... 當「產品A」被點擊,它就會「主動」上課,其他人沒有。當'產品B'被點擊時,它將獲得'積極'類,其他人不會獲得。 我想在主控制器中做到這一點,但我很難獲得對頁面或其任何元素的引用。

+0

? – Greg 2009-07-10 17:44:13

回答

0

你可以在對應的列表項的ID模型中的id字段。檢查當前模型是否與列表項的ID匹配。如果確實如此,請設置活動課程。

1

你不能從控制器訪問HTML。您需要在Javascript中執行此操作,或刷新頁面重新生成HTML(例如,使用不同的查詢字符串參數發佈到同一頁面)。然後在您的控制器中,您可以指定選擇哪個項目,然後在視圖中生成列表時檢查所選內容並將其放在上面。

2

我很難獲得對頁面或其任何元素的引用。

聽起來你不是真的得到了MVC。你的控制器不應該有對視圖的html元素的引用。您需要創建一個模型(在這種情況下可能是一個視圖模型),其中包含產品列表並指示選擇哪一個。然後,您的視圖將視圖模型的內容簡單地顯示爲HTML。它可能會包含對模型中產品的循環,並檢查Active屬性。

0

您可以通過幾種方法來做到這一點。簡單的方法是確保鏈接網址與它所在的網頁相匹配。然後你可以定義一個錨標籤的活動狀態,CSS將負責其餘的部分。如果您將所有鏈接指向相同的URL,則在這種情況下,您可以通過讓控制器向視圖傳遞處於活動狀態的鏈接的ID來控制狀態。然後,當您遍歷正在構建的列表時,可以將ViewData中的ID與迭代的ID進行匹配。當你找到你正在尋找的人時,你可以手動將課程設置爲「激活」。舊的方式......但工作!

0

假設你是問關於ASP.NET MVC,什麼是試圖做到這一點在控制器中的意圖是什麼?

正如馬克斯提到的,你可以使用JavaScript來做到這一點,這將是最簡單和高效。

0

這已經過測試。

<html> 
    <style type="text/css"> 
    a:active 
    { 
     color="green"; 
    } 
    </style> 

    <ul id="productList"> 
     <li id="product_a" class="active" onclick="setActive(this)"> 
     <a href="">Product A</a> 
     </li> 
     <li id="product_b"> 
     <a href="" onclick="setActive(this)">Product B</a> 
     </li> 
     <li id="product_c"> 
     <a href="" onclick="setActive(this)">Product C</a> 
     </li>      
    </ul> 

    <script type="text/javascript"> 
     function setActive(obj) { 
      aObj = document.getElementById('productList').getElementsByTagName('li'); 
      for(i=0;i<aObj.length;i++) { 
      if(aObj[i].name == obj.name) { 
       aObj[i].className='active'; 
      } else { 
       aObj[i].className=''; 
      } 
      } 
     } 
    </script> 
</html> 
相關問題