Question

我有一个视图，它根据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);
            }


        });

我的问题是如何更改我的代码以便我的视图保持不变 - 只有在有数据的情况下才会创建表格，否则会显示＆＃34; no records＆＃34;元件。

Answer 1

如果我理解这一点，你可以通过动作加载初始数据（代码的if Model.Count部分），那么你也可以通过AJAX动态加载数据。

我可能做的就是让你的好人总是在DOM中，在视图的定义中检查Model.Count，如果它大于0则设置你的样式to display = none;然后为你的桌子做相反的事情。

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

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

当然，你也可以给你的井一个ID并以这种方式引用它。

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

1 个答案: