データベースによってdivの色を動的に変更します

Question

データベースの値に応じて色を示す小さいボックスのWebページが必要です。たとえば、ステータスがデータベースでビジー状態の場合、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要素を移入するために、コントローラでのdivのidを使用したいと私はわかりませんどうやってするか。 何か提案がありがとうございます。ありがとうございました。

Answer 1

まず、MVCがModel、View、Controllerの略であるASP.Net MVCを使用しています。

表示されているコードから明らかに、ビュー（Index.cshtml）とコントローラ（HomeController.cs）があります。あなたはモデルがありません。

ビューに表示する値を含むモデルを作成する必要があります。あなたのビューで正しい場所で

@Model.Value 

：私はあなたがそうのような何かを書く、あなたのモデルから値を描画するために、Razorを使用していることを前提としています。

あなたのモデルと状態を色にマップするための計算されたプロパティを含む新しいクラスを作成することをお勧めします。

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); 
    } 
} 

ような何かそれらを使用してステータスをカラーとしてレンダリングします。あなたはまた、各色のCSSクラスを作成する必要があります。この場合

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

：

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

他の可能性は直接CurrentStatusプロパティを使用し、クラス名としてそれをレンダリングすることです。あなたはまた、各ステータスのためのCSSクラスを作成する必要があります。この場合

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

ような何か：

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

別（メシエ）オプションは、カラープロパティを使用してのスタイル属性でそれをレンダリングしていますdiv。同様：

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

アイデアは、あなたのビューで好きな形であなたのコントローラは、データベースからモデルを移入して、そのプロパティを（テキストとして）レンダリングすることができるということです。