Question

我希望能够在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 );     
        });

Answer 1

试试这个：

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

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

CSS： .red {color：＃FF0000;} .green {color：＃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或不使用{ {1}}。

编辑评论

我为get tr元素添加了类。您可以将数据发送到服务器，如下所示：

id

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的初始颜色：

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

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

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

ASP.Net MVC foreach条件行样式

2 个答案: