D如果模型计数为空,则显示HTML元素-ASP.NET MVC视图
DIsplaying HTML element if model count is empty - ASP.NET MVC View
我有一个视图,它显示基于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();
}
当然,你可以给你的井一个身份证,也可以这样做。
相关文章:
- 我应该怎么做才能避免在网页上移动元素(html、css、jQuery)
- 更改元素HTML,但忽略最后一个子项
- 增加在选择元素HTML中搜索的时间
- Jquery无法获取元素html
- 从所选元素 html 上方的元素获取属性值
- 在 JS 的单选按钮元素 (HTML) 中使用 title 属性
- 如何在页面上播放每个音频元素(HTML,JQuery,Javascript)
- 我需要一种新的方法来检测元素 HTML 是否有更改
- 获取父元素 html 以及子内容
- AngularJS指令:如何在ng-repeat中动态更改元素html
- html 属性中的引号被标记为 ”来自元素.html()的结果
- 在指令's链接中替换angular元素html
- 如果元素有子元素html元素
- 如何下推表格中的元素- HTML
- 如何在纯javascript中使用变量插入数组值,如元素HTML
- jQuery textilate .js -如何“重置”元素HTML并重新启动动画
- 将元素HTML附加到新附加的textarea中
- 在添加类的情况下,CSS 3的过渡是否不能与模板元素(HTML 5)一起工作?
- jQuery没有更新DOM元素HTML
- 在jQuery中更快地替换元素HTML