1

我希望能够有条件地在 MVC 视图中设置表格的行样式。

这是我构建表格的方式。您可以看到我想根据模型中的出勤实体中是否存在 personID 来设置 td 样式。当我调试时，我看到样式正在设置，但由于页面没有刷新，所以在手动刷新之前不会出现样式。

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

编辑，我决定不想在每次加载页面时都重新加载人员列表，所以我现在使用 ajax 来构建表格。使用 ajax 构建表时如何找到 jQuery 选择器？

 $.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 );     
        });
4

2 回答 2

0

尝试这个：

在您的模型类中添加此方法：

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

使用HiddenForandDisplayFor是错误的，因为您必须为此使用模型，而且您必须id为每种情况使用不同的 attr 或不使用id.

编辑评论

我添加了获取 tr 元素的类。您可以像这样向服务器发送数据：

$('.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() { 

           });
    });

});
于 2013-09-10T01:49:47.750 回答
0

我现在正在使用 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 的初始颜色：

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

我根据出勤响应有条件地将 td 设置回绿色：

 $.getJSON("/Attendance/Attendances/", function (data) {
                $.each(data, function (index, item) {
                    $('td.' + item.returnedPersonID).css('color', 'green');
于 2013-09-16T15:11:54.127 回答