Question

我想要一个带有小方框的网页，根据数据库中的值指示颜色。例如：如果状态在数据库中忙，则div颜色为红色，依此类推。

HTML：

<tr>
    <td class="dclass">
        <div id="l1r1" class="top"></div>                   
        <div id="l1r2" class="top"></div>
        <div id="l1r3" class="bottom"></div>
        <div id="l1r4" class="bottom"></div>
    </td>
</tr>

CSS：

.top, .bottom 
{
    height: 8px;
    width: 33%;
    border: 1px solid;
    border-color: black;
    float:left;
    margin:1.2px;
}

控制器：

 public class HomeController : Controller
 {       
     public ActionResult Index()
     {             
         MySQL msql = new MySQL();                          
         List<string> status = msql.SelectList("Select status from table");                     
         for (int i = 0; i < status.Count; i++)
         {
             //populate values(color) to div according to the status
         }
         return View();
     }   
}

我想在控制器中使用div id来填充div，我不知道该怎么做。任何建议，将不胜感激。谢谢。

Answer 1

首先，您使用的是ASP.Net MVC，其中MVC代表Model，View，Controller。

显然（从您显示的代码中）您已经拥有一个视图（Index.cshtml）和一个控制器（HomeController.cs）。你错过了一个模型。

您必须创建一个包含要在View中显示的值的模型。我假设您正在使用Razor，因此要从模型中呈现值，您可以编写类似：

的内容

@Model.Value

在视图中的正确位置。

我建议创建一个包含模型的新类和一个计算属性，以将状态映射到颜色。类似的东西：

namespace Your.Namespace
{
    // use some nice name for your model
    public class BoxStatusModel  
    {
       public int BoxID { get; set; }
       public string CurrentStatus { get; set; }

       public string Color
       {
          get
          {
             switch(CurrentStatus)
             {
                case "Ok":
                  return "Green";
                case "Warning":
                   return "Yellow";
                case "Error":
                   return "Red";
                default:
                    return "";
             }
          }
       }
    }
}

在您的控制器中，您将填充如下：

 public class HomeController : Controller
 {       
     public ActionResult Index()
     {             
         MySQL msql = new MySQL();                          

         var results = msql.SelectList("Select columns from table");

         // create your collection of the correct size since the beginning
         var model = new List<BoxStatusModel>(results.Count);
         for (int i = 0; i < results.Count; i++)
         {
             model.Add(new BoxStatusModel() {
                // I am not familiar with the MySQL but should be something like this
                BoxID = results[i].GetValue("BoxID");
                CurrentStatus = results[i].GetValue("CurrentStatus");
             });
         }
         return View(model);
     }   
}

然后，您必须在视图中定义您正在使用的模型类型，并且您将能够访问这些属性并使用它们将状态呈现为颜色。

<!-- Your model is a list of BoxStatusModels -->
@model List<Your.Namespace.BoxStatusModel>

[...]
<table>
[...] // table headers and stuff
<tr>
    <td class="dclass">
    @foreach(var boxStatus in Model)  
    {
        <div id="@boxStatus.BoxID" class="top @boxStatus.Color">
    }
    </td>       
</tr>
[...] // table footer?
</table>

在这种情况下，您还必须为每种颜色创建一个CSS类：

.Red {
   background-color: Red;
}   
.Yellow {
   background-color: Yellow;
}   
.Green {
   background-color: Green;
}

其他可能性是直接使用CurrentStatus属性并将其渲染为类名。像

这样的东西

@model List<Your.Namespace.BoxStatusModel>

[...]
<table>
[...] // table headers and stuff
<tr>
    <td class="dclass">
    @foreach(var boxStatus in Model)  
    {
        <div id="@boxStatus.BoxID" class="top @boxStatus.CurrentStatus">
    }
    </td>       
</tr>
[...] // table footer?
</table>

在这种情况下，您还必须为每个状态创建一个CSS类：

.Error {
   background-color: Red;
}   
.Warning {
   background-color: Yellow;
}   
.Ok {
   background-color: Green;
}

另一个（杂乱的）选项是使用color属性并在div的style属性中呈现它。像：

@model List<Your.Namespace.BoxStatusModel>

[...]
<table>
[...] // table headers and stuff
<tr>
    <td class="dclass">
    @foreach(var boxStatus in Model)  
    {
        <div id="@boxStatus.BoxID" class="top" style="background-color:@boxStatus.color">
    }
    </td>       
</tr>
[...] // table footer?
</table>

您的想法是您的控制器从数据库填充您的模型，然后可以在视图中以您想要的任何形式呈现其属性（作为文本）。

根据数据库

1 个答案: