Asp.Net MVC 3 WebGrid如何突出顯示多行？

Question

我有一個模型：

List<Customer> Customers = New List<Customer>(); 
Customers.Add(new Customer {Name = "Facebook", Age = 5}); 
Customers.Add(new Customer {Name = "Microsoft", Age = 30}); 
Customers.Add(new Customer {Name = "Google", Age = 5}); 

隨着使用的WebGrid剃刀引擎，我想換行「紅」的背景顏色時年齡= 5？

謝謝， Ashraf。

Answer 1

使用JavaScript和某些服務器端邏輯的組合。我認爲他們可能會有更好的解決方案，但下面的工作。這個想法是當你指定的條件有效時，在行項目上設置一個css類。然後，使用一些客戶端JavaScript，找到需要被紅色的行並設置該類的css

@{ 
     var grid = new WebGrid(source: Model, 
      defaultSort: "Name", 
      rowsPerPage: 3); 
    } 
    <div id="grid"> 
    @grid.GetHtml(
     tableStyle: "grid", 
     headerStyle: "head", 
     alternatingRowStyle: "alt", 
     columns: grid.Columns(
     grid.Column(
     columnName:"Age", 
     header:"Company Age",  
     format: (item) => 
     { 
      var css = @"class=""overdue""" ; 
      if ((int)item.Age != 5) 
      { 
       css = ""; 
      } 
      return Html.Raw("<span " + css + ">" + @item.Age + "</span>"); 
     }), 
      grid.Column("Name") 
    ) 
    ) 
    </div> 


    <script type="text/javascript"> 
     $(function() { 
      $("#grid tr").each(function() { 

       var shouldBeRed = $(this).find(".overdue"); 

       if (shouldBeRed.length > 0) { 
        alert($(this).html()); 
        $(this).attr("class", "redRow"); 
       } 
      }); 
     }); 
    </script>