CSHTML中用户数为0时if块不显示的问题排查

核心问题点 #

1. AJAX更新逻辑缺陷 #

当用户数为0时，页面初始状态大概率不存在#nouser元素，此时执行$('#nouser').html(...)会因找不到目标元素，导致“No user found”内容无法渲染。同时，这种场景下分部视图返回的内容里没有.table和.pagination，相关的空操作也完全无效。

2. 分部视图冗余代码 #

else块内部重复编写了@if (Model.users.Count() == 0)的判断，由于else本身就是用户数不为0的分支，这部分代码永远不会被执行，属于无效冗余代码。

解决方案 #

方案一：直接替换容器内容（最简洁可靠） #

放弃分元素更新的逻辑，直接将AJAX返回的整个分部视图内容替换到主页面的容器中，无论返回的是无用户提示还是表格分页，都能正确渲染：

$.ajax({
    url: "/Admin/User",
    type: "POST",
    data: {
        SearchInputdata: keyword,
    },
    success: function (response) {
        $('#loadPartialView').html(response);
    }
})

方案二：优化分元素更新逻辑（保留原有思路） #

如果必须分元素更新，需要处理元素不存在的情况，确保无用户提示能被正确添加：

$.ajax({
    url: "/Admin/User",
    type: "POST",
    data: {
        SearchInputdata: keyword,
    },
    success: function (response) {
        var $response = $(response);
        var $nouser = $response.find('#nouser');
        var $table = $response.find('.table');
        var $pagination = $response.find('.pagination');

        // 处理无用户提示
        if ($nouser.length > 0) {
            var $existingNouser = $('#nouser');
            if ($existingNouser.length > 0) {
                $existingNouser.html($nouser.html());
            } else {
                $('#loadPartialView').append($nouser);
            }
            $('.table, .pagination').hide();
        } else {
            // 有用户时显示表格分页，隐藏无用户提示
            $('#nouser').hide();
            $('.table').html($table.html()).show();
            $('.pagination').html($pagination.html()).show();
        }
    }
})

优化分部视图代码 #

删除冗余的无效判断，精简代码：

<div class="table-responsive">
    @if (Model.users.Count() == 0)
    {
        <div class="d-flex mt-5 flex-column" id="nouser">
            <div class="mx-auto"><h3>No user found</h3></div>
        </div>
    }
    else
    {
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Firstname</th>
                    <th scope="col">Lastname</th>
                    <th scope="col">Email</th>
                    <th scope="col">Employee id</th>
                    <th scope="col">Department</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var user in Model.users)
                {
                    <tr>
                        <td>@user.FirstName</td>
                        <td>@user.LastName</td>
                        <td>@user.Email</td>
                        <td>@user.EmployeeId</td>
                        <td>@user.Department</td>
                    </tr>
                }
            </tbody>
        </table>
        <div class="d-flex justify-content-center page">
            @if (Model.users.PageCount > 1)
            {
                <ul class="pagination use">
                    @if (Model.users.HasPreviousPage && Model.users.PageNumber > 1)
                    {
                        <li class="page-item"> <a class="page-link" id="@Convert.ToInt32(@Model.users.PageNumber -1)"> &#60;&#60; </a></li>
                    }
                    else
                    {
                        <div class="page-item"> <a class="page-link disabled" id="@Convert.ToInt32(@Model.users.PageNumber -1)"> &#60;&#60; </a></div>
                    }
                    @for (int i = 1; i <= Model.users.PageCount; i++)
                    {
                        if (i == Model.users.PageNumber)
                        {
                            <li class="page-item active"><a class="page-link" id="@i">@i</a></li>
                        }
                        else
                        {
                            <li class="page-item"><a class="page-link" id="@i">@i</a></li>
                        }
                    }
                    @if (Model.users.HasNextPage && Model.users.PageNumber < Model.users.PageCount)
                    {
                        <li class="page-item"><a class="page-link" id="@Convert.ToInt32(@Model.users.PageNumber + 1)"> >></a></li>
                    }
                    else
                    {
                        <div class="page-item"><a class="page-link disabled" id="@Convert.ToInt32(@Model.users.PageNumber + 1) "> >></a></div>
                    }
                </ul>
            }
        </div>
    }
</div>

内容的提问来源于stack exchange，提问作者GALAXY A50