2009-07-10 1 views
0

В мастер-страницы, у меня есть это ....Как установить стиль/класс элемента HTML в MVC?

<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

ответ

0

В модели может быть поле идентификатора, соответствующее идентификатору элемента списка. Проверьте соответствие текущей модели идентификатору элемента списка. Если это так, то установите активный класс.

1

Вы не можете получить доступ к своему HTML-контроллеру. Вам нужно будет сделать это в Javascript или обновить страницу, чтобы восстановить HTML (сообщение на ту же страницу с другим параметром строки запроса, например). Затем в контроллере вы можете указать, какой элемент выбран, затем в представлении, когда вы создаете список, установите флажок для выбранного и поместите на него класс.

2

У меня возникло затруднительное отношение к странице или ее элементам.

Похоже, вы на самом деле не получаете MVC. Контроллер не должен иметь ссылку на элементы html представления. Вам необходимо создать модель (возможно, модель просмотра в этом случае), которая содержит список продуктов и указывает, какой из них выбран. Затем ваше представление просто отображает содержимое View Model как HTML. Вероятно, это будет включать цикл над продуктами в модели с проверкой на свойство Active.

0

Вы можете сделать это несколькими способами. Простой подход - убедиться, что URL-адрес ссылок совпадает с той страницей, в которой он идет. Затем вы можете определить активное состояние тега привязки, и CSS позаботится об остальном. Если у вас есть все ссылки на один и тот же URL, это не сработает, и в этом случае вы можете управлять состоянием, если контроллер перейдет к представлению ID активной ссылки. Затем, когда вы повторяете список, который вы строите, вы можете сопоставить идентификатор в ViewData с идентификатором, который вы перебираете. Когда вы найдете тот, который вы искали, вы можете установить класс на «активный» вручную. Старый школьный путь ... но работает!

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>