如何在 MVC 中设置 HTML 元素的样式/类？答案

【问题标题】：How to set the style/class of an HTML element in MVC?如何在 MVC 中设置 HTML 元素的样式/类？
【发布时间】：2009-07-15 00:35:54
【问题描述】：

在母版页中，我有这个....

<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 中执行此操作，但我很难获得对页面或其任何元素的引用。

【问题讨论】：

你使用的是什么动态语言？

标签： c# html css model-view-controller

【解决方案1】：

我很难获得对页面或其任何元素的引用。

听起来您并没有真正获得 MVC。您的控制器不应引用视图的 html 元素。您需要创建一个模型（在这种情况下可能是视图模型），其中包含产品列表并指示选择了哪一个。然后，您的视图只是将视图模型的内容显示为 HTML。它可能会在模型中的产品上包含一个循环，并检查 Active 属性。

【讨论】：

【解决方案2】：

您无法从控制器访问您的 HTML。您需要在 Javascript 中执行此操作，或者刷新页面以重新生成 HTML（例如，使用不同的查询字符串参数发布到同一页面）。然后在您的控制器中您可以指定选择了哪个项目，然后在生成列表时在视图中检查已选择并将类放在上面。

【讨论】：

【解决方案3】：

您可以在模型中拥有一个对应于列表项 id 的 id 字段。检查当前模型是否与列表项的 id 匹配。如果是，则设置活动类。

【讨论】：

【解决方案4】：

您可以通过几种方式做到这一点。简单的方法是确保链接 URL 也与它所在的页面相匹配。然后您可以定义锚标记的活动状态，CSS 将负责其余的工作。如果所有链接都指向同一个 URL，这将无法正常工作，在这种情况下，您可以通过让控制器将活动链接的 ID 传递给视图来控制状态。然后，当您遍历您正在构建的列表时，您可以将 ViewData 中的 ID 与您遍历的 ID 匹配。当您找到您正在寻找的课程时，您可以手动将课程设置为“活动”。老派的方式......但有效！

【讨论】：

【解决方案5】：

假设您询问的是 ASP.NET MVC，尝试在控制器中执行此操作的目的是什么？

正如 Max 提到的，您可以使用 JavaScript 来执行此操作，这将是最简单和高效的。

【讨论】：

【解决方案6】：

这是经过测试的。

<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>

【讨论】：

【解决方案7】：

你可以使用

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

更多详情请参考文章：http://altafkhatri.com/Technical/Assign_css_class_to_MVC_dropdownlist

【讨论】：