ASP.Net MVC foreach условный стиль строки

Question

Я хочу иметь возможность условно установить стиль строки таблицы в представлении MVC.

Вот как я строю стол. Вы можете видеть, что я хочу установить стиль td на основе того, есть ли идентификатор personID в сущности присутствия в модели. Когда я отлаживаю, я вижу, что стиль установлен, но поскольку страница не обновляется, стили не отображаются до тех пор, пока не будет обновлено ручное обновление.

@foreach (var item in Model.People) 
{ 
    int attendedPersonID = Model.Attendances.Where(a => a.PersonID == item.PersonID).Select(p => p.PersonID).SingleOrDefault(); 
    <tr> 
     <td style="@(attendedPersonID == item.PersonID ? "color:green" : "color:red")" > 
      @Html.HiddenFor(model => item.PersonID) @Html.DisplayFor(modelItem => item.FullName) 
     </td> 
     <td> 
      <button value="@item.PersonID" class="present">Present</button> 
      <button value="@item.PersonID" class="absent">Absent</button> 
     </td> 
    </tr> 
} 

Edit, я решил, что я не хочу, чтобы обновить список людей, каждый раз, когда страница загружена, так что я теперь я использую Ajax для создания таблицы. Как найти селектора jQuery, когда таблица построена с помощью ajax?

$.getJSON("/Attendance/People/", function(data) { 
      var table='<table>'; 
      $.each(data, function(index, item){ 
       table+='<tr><td><input type=hidden id="personID" value='+item.personID+' /></td><td>'+item.FullName+'</td><td><button value='+item.personID+' class="present">Present</button><button value='+item.personID+' class="absent">Absent</button></td></tr>';  
      }); 
      table+='</table>'; 
      $("#table1").html(table);  
     }); 

Answer 1

попробовать это:

В вашей модели класса добавить этот метод:

public bool IsInAttendedList(int personId) 
{ 
    return this.Attendances.Where(a => a.PersonID == personID).FirstOrDefault() !== null; 
} 

CSS: .red {цвет: # FF0000;} .green {цвет: # 00FF00; }

В вашем cshtml:

@foreach (var item in Model.People) 
{ 
    <tr class="item"> 
     <td class="person @(Model.IsInAttendedList(item.PersonID) ? "green" : "red");"> 
      <input type="hidden" name="PersonID" value="@item.PersonID" /> @item.FullName 
     </td> 
     <td> 
      <button value="@item.PersonID" class="action present">Present</button> 
      <button value="@item.PersonID" class="action absent">Absent</button> 
     </td> 
    </tr> 
} 

использование HiddenFor и DisplayFor неверно, потому что для этого вам необходимо использовать модель, плюс вы должны иметь разные attr id для каждого случая или не использовать id.

редактировать для комментария

добавить класс для ПОЛУЧИТЬ элементов тр. Вы можете отправить данные на сервер, как это:

$('.item').each(function(i, el) { 


    var tr = $(this); 
    tr.find('.action').bind('click', function(event) { 

     var type = $(this).hasClass('present') ? 'present' : 'absent'; 
     $.post('URL', {personID: $(this).val(), typeAction= type }) 
      .done(function() { 

       var class = type == 'present' ? 'green' : 'red'; 
       tr.find('.person').removeClass('green red').addClass(class); 
      }) 
      .fail(function() { 

      }); 
    }); 

}); 

Answer 2

Я сейчас строит свою таблицу с JSON ответ, как это:

$.getJSON("/Attendance/People/", function(data) { 
      var table='<table>'; 
      $.each(data, function(index, item){ 
       table+='<tr><td class='+item.personID+'>'+item.FullName+'</td><td><button value='+item.personID+' class="present">Present</button><button value='+item.personID+' class="absent">Absent</button></td></tr>';  
      }); 
      table+='</table>'; 
      $('#table1').html(table); 

Я заходящего первоначальный цвет тд здесь:

$('td').each(function() { $(this).css('color', 'red') }) 

Я скорректировал тд назад на зеленый, исходя из отзыва присутствующего сообщения:

$.getJSON("/Attendance/Attendances/", function (data) { 
       $.each(data, function (index, item) { 
        $('td.' + item.returnedPersonID).css('color', 'green');