Как установить стиль / класс HTML-элемента в MVC? - PullRequest
Новая
       23

Как установить стиль / класс HTML-элемента в MVC?

0 голосов
/ 10 июля 2009

На главной странице у меня есть это ... 

<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» он получает «активный» класс, а остальные не получают ни одного. Я пытаюсь сделать это в Home Controller, но мне трудно получить ссылку на страницу или любой из ее элементов.

Ответы [ 7 ]

2 голосов
/ 10 июля 2009

Мне трудно получить ссылку на страницу или любой из ее элементов.

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

1 голос
/ 10 июля 2009

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

0 голосов
/ 14 июля 2009

Вы можете использовать

) ViewData ["ddlList"], new {@class = "hello", className = "asdfasdf", anyproperty = "putometext"})%>

Подробнее см. В статье: http://altafkhatri.com/Technical/Assign_css_class_to_MVC_dropdownlist

0 голосов
/ 10 июля 2009

Это проверено. 

<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>
0 голосов
/ 10 июля 2009

Предполагая, что вы спрашиваете о ASP.NET MVC, каково намерение сделать это в контроллере?

Как упоминал Макс, вы можете использовать JavaScript, чтобы сделать это, что будет самым простым и эффективным.

0 голосов
/ 10 июля 2009

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

0 голосов
/ 10 июля 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...