jQuery 在 ASP.NET MVC 视图中隐藏引导表

Question

我有一个 ASP.NET MVC 驱动的站点，它在表格中显示记录。该表是一个引导 3 表。如果没有记录，我会显示一个 div。根据另一位用户的建议，我修改了视图，以便表格与我的“没有记录”div 一起呈现。

我的申请中有的东西：

1. 在我的 CSS 中，我设置了表格显示：无

2. 在我的 JS 文件的顶部，我这样做...

   var absenceRows = $("#absencesTable tbody").find("tr").length;
   
   var $absTable = $("#absencesTable");
   
   var emptyAbsenceDiv = $("#no-absences");
   
   console.log(absenceRows);
   
   if (absenceRows === 0)
   {
      emptyAbsenceDiv.show("fast");
      $absTable.hide("fast");
   }
   else
   {
      emptyAbsenceDiv.hide("fast");
      $absTable.show("fast");
   }
   

3. 然后我有一个 AJAX 调用来获取数据：

    $("#chosenDate").on("dp.change", function (e) {
   
       var formattedDate = moment(e.date._d).format('DD/MM/YYYY');                    
   
       $(document).ajaxStart(function () {
           $("#absencesTable, #no-absences").fadeOut('0');
           $("#loading").show();
       });
       $(document).ajaxComplete(function () {
           $("#loading").hide();
           $("#absencesTable").fadeIn('200');
       });
   
       var ajaxOptions = {
           url: absenceDateUrl,
           type: 'post',
           contentType: 'application/json',
           dataType: 'json',
           data: '{selectedDate:' + JSON.stringify(formattedDate) + '}'
       };    
   
       $.ajax(ajaxOptions).done(function (data) {
   
           console.log(data);
           if (data !== null && data.length !== 0) {
               renderData(data);
           }
           else
           {
               console.log("No data! " + $("#absencesTable").is(":visible"));
               hideAbsences();
   
           }
       });
   });
   

4. 在 renderData 我构造我的数据然后显示表格并隐藏我的无缺席 div

   $("#no-absences").hide("fast", function () {
       $("#absencesTable").show("fast");
   });
   

   顺便说一句，这很好用。

5. 如果没有返回数据，则调用 hideAbsences()

   if ($("#absencesTable").is(":visible")) {
       $("#absencesTable").hide("fast");
       $("#no-absences").show("fast");
   }
   

我知道我不需要检查表格是否可见，但我正在尝试一切。

当没有数据时，我的表格不会被隐藏。我同时显示了 div 和 table。

这是我的观点供参考。

    @if (Model.Count() == 0)
{
    <div class="well well-lg" id="no-absences"><h3>Everybody is in! There are no absences today :)</h3></div>
}

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

返回数据时，表格的显示属性设置为“display:table”，但我认为这不是我的显示/隐藏不起作用的原因。我可能是错的。我只想隐藏 div 并显示表格，反之亦然。

仅供参考，我确实尝试在 jsFiddle 中复制此内容，但无法复制错误 (http://jsfiddle.net/f2r9mdah/)。我在想我的 jQuery 或 View 有点时髦。

Answer 1

在经历了很多头痛之后，我找到了解决方案。我不明白为什么它会起作用，但确实如此。

When the date in the calendar control is selected I have an ajax call.我将代码包装在 try/catch 块中：

$("#chosenDate").on("dp.change", function (e) {

        try
        {
            console.log("$absTable = " + $absTable.is(":visible"));
            console.log("emptyAbsenceDiv = " + emptyAbsenceDiv.is(":visible"));

            var formattedDate = moment(e.date._d).format('DD/MM/YYYY');                    

            var ajaxOptions = {
                url: absenceDateUrl,
                type: 'post',
                contentType: 'application/json',
                dataType: 'json',
                data: '{selectedDate:' + JSON.stringify(formattedDate) + '}'
            };    

            $.ajax(ajaxOptions).done(function (data) {

                console.log("inside ajax done = " + data);
                if (data !== null && data.length !== 0) {
                    renderData(data);
                }
                else
                {
                    hideAbsences();
                }
            });

        }
        catch(Exception)
        {
            //throw Exception;
        }
    });

另外，为了更好地衡量，我将表格包裹在一个 div 中，并在新的 div 上使用了隐藏和显示。添加 div 并没有使代码工作，只有 try/catch 块可以。

我不知道为什么这是有效的。为什么在表格元素上显示/隐藏不够？这是 Bootstrap 3 的问题，还是我正在使用的 calendar control...？如果其他人有任何想法，请告诉我。