Question

我在aspx页面中有一些像这样的构造：

<div class="weather time-morning active">
<div class="icon">
<i class="sun"></i>
</div>
<div class="content">
<h3>Morning</h3>
<div class="degrees">- 1</div>
<div class="data">
<h2>Sunny</h2>

<div>Wind: E 7 mph</div>
<div>Humidity: 91%</div>
</div>
</div>
</div>

我希望在后面的代码中将各种类应用于标记（和/或添加多个标记，以及各种条件：

switch (response.currently.summary.ToString())
{
case ("Partly Cloudy"):
//do something
//< i class="cloud windy"></i>
break;
case ("Sunny"):
//do something
//<i class="sun"></i>
//<i class="cloud"></i>
//<i class="sprinkles"></i>
break;
}

我必须说我是从模仿我想要的行为的静态HTML页面开始的。

有任何提示吗？

L.E。

为了更精确，整个HTML结构（静态地）是这样的：

<section>
  <div class="weather time-morning active">
    <div class="icon">
      <i class="sun"></i>
    </div>
    <div class="content">
      <h3>Morning</h3>
      <div class="degrees">- 1</div>
      <div class="data">          
        <h2>Sunny</h2>
        <div>Wind: E 7 mph</div>
        <div>Humidity: 91%</div>
      </div>
    </div>
  </div>
  <div class="weather time-day">
    <div class="icon">
      <i class="sun"></i>
      <i class="cloud windy"></i>
    </div>
    <div class="content">
      <h3>Day</h3>
      <div class="degrees">+ 3</div>
      <div class="data">          
        <h2>Mostly Sunny</h2>
        <div>Wind: N 5 mph</div>
        <div>Humidity: 45%</div>
      </div>
    </div>
  </div>
  <div class="weather time-evening">
    <div class="icon">
      <i class="sun"></i>
      <i class="cloud"></i>
      <i class="sprinkles"></i>
      <i class="sprinkles"></i>
      <i class="sprinkles"></i>
      <i class="sprinkles"></i>
    </div>
    <div class="content">
      <h3>Evening</h3>
      <div class="degrees">0</div>
      <div class="data">          
        <h2>Rainy</h2>
        <div>Wind: W 12 mph</div>
        <div>Humidity: 91%</div>
      </div>
    </div>
  </div>
  <div class="weather time-night">
    <div class="icon">
      <i class="moon"></i>
      <i class="cloud"></i>
      <div class="snowflakes">
        <i class="snowflake"></i>
        <i class="snowflake"></i>
        <i class="snowflake"></i>
        <i class="snowflake"></i>
      </div>
    </div>
    <div class="content">
      <h3>Night</h3>
      <div class="degrees">- 2</div>
      <div class="data">          
        <h2>Cloudy</h2>
        <div>Wind: N 2 mph</div>
        <div>Humidity: 47%</div>
      </div>
    </div>
  </div>
</section>

这里有条件地我必须相应地将标签更改为开关值。

Answer 1

最初，您必须为服务器端控件启用div元素。在代码方面：

<div id="DivId" runat="server"></div>

然后，您可以在服务器端代码中进行检查，并添加您想要的类，如下所示：

DivId.CssClass="the name of the css class";

Answer 2

＆＃39; nice＆＃39;这样做的方法是将你想要修改的控件改为runat =＆＃34; server＆＃34;在aspx

中

<div id="weatherDiv" runat="server">

然后在您的代码中，您现在可以访问div：

weatherDiv.CssClass = "weather time-morning active";

您还可以使用Bind MVC Razor破解更多<%#范例，而无需控件：

.cs代码背后

protected string GetWeatherClass(bool extraSprinkles)
{
   return extraSprinkles
     ? "extraSprinkesClass"
     : "";
}

.ASPX

<div class="weather <%# GetWeatherClass(true) %>">

Answer 3

基于建议，最后我有这种方法（不知道是否最好，但至少它是炒作）（MorningTime，MorningDay等是corepinding标签的ID）：

       switch (response.currently.icon.ToString())
        {
            case ("clear-day"):
                //do something
                MorningTime.Attributes.Add("class", "sun");
                MorningType.Attributes.Add("class", "sun");
                DayTime.Attributes.Add("class", "sun");
                DayType.Attributes.Add("class", "sun");
                break;
            case ("partly-cloudy-day"):
                //do something
                MorningTime.Attributes.Add("class", "sun");
                MorningType.Attributes.Add("class", "cloud windy");
                DayTime.Attributes.Add("class", "sun");
                DayType.Attributes.Add("class", "cloud windy");
                EveningTime.Attributes.Add("class", "sun");
                EveningType.Attributes.Add("class", "cloud windy");
                NightTime.Attributes.Add("class", "moon");
                NightType.Attributes.Add("class", "cloud windy");
                break;
            case ("rain"):

等等。

你如何以编程方式应用css类？

3 个答案: