D如果模型计数为空,则显示HTML元素-ASP.NET MVC视图

DIsplaying HTML element if model count is empty - ASP.NET MVC View

本文关键字:元素 HTML 显示 -ASP NET 视图 MVC 模型 如果      更新时间:2023-09-26

我有一个视图,它显示基于Model.Count属性的两个元素之一。代码如下:

@if (Model.Count() == 0)
{
    <div class="well well-lg"><h3>Everybody is in! There are no absences today :)</h3></div>
}
else
{
    <table class="table table-striped table-bordered" id="absencesTable">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Date Out
                </th>
                <th>
                    Return Date
                </th>
                <th>
                    Absence Type
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @item.FullName
                    </td>
                    <td>
                        @item.DateFrom.Value.ToLongDateString()
                        <span class="label label-default">@item.AbsencePeriodFrom.PeriodText</span>
                    </td>
                    <td>
                        @item.DateTo.Value.ToLongDateString()
                        <span class="label label-default">@item.AbsencePeriodTo.PeriodText</span>
                    </td>
                    <td>
                        @item.AbsenceType.AbsenceTypeText
                    </td>
                </tr>
            }
        </tbody>    
    </table>

在我的应用程序中,我使用jQuery根据从日历控件中选择的日期来获取数据。然后,我的JavaScript代码将行附加到absencesTable元素。如果当天没有缺席,则表元素将永远不会出现在DOM中。如果我选择有记录的日期,我会修改表中的行。我意识到为什么它不起作用,因为它只是因为表不存在,所以我的ajax代码被忽略了。这是我的jQuery ajax调用:

  $.ajax(ajaxOptions).done(function (data) {
            if (data != null && data.length != 0) {
                var $target = $("#absencesTable");
                $("#absencesTable tbody > tr").remove();
                $.each(data, function (index, element) {
                    var fromDate = new Date(element.DateFrom);
                    var toDate = new Date(element.DateTo);
                    var detailsStr = "<tr><td>" + element.FullName + "</td>"
                        + "<td>" + moment(fromDate).format("DD MMMM YYYY") + " <span class='"label label-default'">"
                        + element.AbsencePeriodFrom.PeriodText + "</span></td>"
                        + "<td>" + moment(toDate).format("DD MMMM YYYY") + " <span class='"label label-default'">"
                        + element.AbsencePeriodTo.PeriodText + "</span></td>"
                        + "<td>" + element.AbsenceType.AbsenceTypeText + "</td>"
                        + "</tr>";
                    $("#absencesTable > tbody").append(detailsStr);
                });
            }
            else {
                $("#absencesTable tbody > tr").remove();
                var detailsStr = "<tr><td colspan='"4'">No absences on that day</td></tr>";
                $("#absencesTable > tbody").append(detailsStr);
            }

        });

我的问题是如何更改代码以使视图保持不变——只有在有数据的情况下才会创建表,否则会显示"无记录"元素。

如果我理解这一点,那么操作(代码的ifModel.Count部分)会加载初始数据,那么AJAX也会动态加载数据。

我可能会做的是让你的井总是在DOM中,在视图的Model.Count定义检查中,如果它大于0,那么将井的样式设置为display=none;然后对你的桌子采取相反的做法。

在您的javascript代码中调用类似的东西

if (data != null && data.length != 0) {
    $(".well").hide();
    $("#absencesTable").show();
}
else {
    $(".well").show();
    $("#absencesTable").hide();
}

当然,你可以给你的井一个身份证,也可以这样做。