Model计数为0时页面空白问题求助（ASP.NET MVC）

问题根源 #

页面空白的核心原因是Model为null时访问Model.Count抛出空引用异常，导致视图渲染失败。尽管API在无房产状态下返回count=0，但_hmoHelper.GetHMOPremisesAsync()可能返回了null而非空列表，使得视图中@if (Model.Count == 0)的判断触发异常，中断页面渲染。

解决方案 #

1. 在Controller层确保返回非null列表

修改Controller代码，将可能的null值替换为空列表：

[HttpGet("ConnectToMyHome")]
public async Task<ActionResult> ConnectToMyHome()
{
    try
    {
        var premises = await _hmoHelper.GetHMOPremisesAsync();
        // 若premises为null，返回空列表而非null
        return View(premises ?? new List<MyTNB.MyHome.Web.Areas.Application.Models.MyHomeChecklist.HMOPremisesViewModel>());
    }
    catch (Exception)
    {
        return RedirectToAction("Error", "Home");
    }
}

2. 在视图层增加null判断

直接在视图中先检查Model是否为null，再判断计数：

@model List<MyTNB.MyHome.Web.Areas.Application.Models.MyHomeChecklist.HMOPremisesViewModel>

<div class="px-md-5 px-4 mt-4">
    <div class="card-title-blue-20-16 mb-2 font-weight-bold">@Localizer.GetLocalizedString("HMO_ConnectToMyHome_MyPremises")</div>
</div>
@if (Model == null || Model.Count == 0)
{
    <!--#region No Premises Card-->
    <div class="container-fluid default-spacing-24 mt-md-3">
        <div class="block block--light br-xs-0">
            <div class="no-premise-icon">
                <img src="~/assets/img/hmo-connectmyhome-no-premise-icon.png" />
            </div>
            <div class="no-premise-text card-title-inverse-lighter">
            @Localizer.GetLocalizedString("HMO_ConnectToMyHome_NoPremise_Desc")
            </div>
        </div>
    </div>
    <!--#endregion No Premises Card-->
}
else
{
    <!-- 原有非空状态下的渲染代码 -->
    <div class="myhome-ul px-md-5 px-4 mb-2">
        <ul data-role="listview" id="tasks">
            <!--#region My Premises Card-->
            @foreach (var premise in Model)
            {
                <li class="mb-2">
                    <div class="wrapper" id="wrapper_@premise.PremisesID"
                            onmousedown="_taskCardMouseDown(event, @premise.PremisesID)"
                            onmouseup="_taskCardMouseUp(event, @premise.PremisesID)"
                            ontouchstart="_taskCardTouchStart(event, @premise.PremisesID)"
                            ontouchend="_taskCardTouchEnd(event, @premise.PremisesID)">
                        <div class="go" style="width:0%;"></div>
                        <div class="item" id="item_@premise.PremisesID">
                            <div class="block block--light block--cardShadow flex justify-content-between custom-radius mb-md-4 mb-2">
                                <div class="flex center">
                                    <div class="mr-3">
                                        <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
                                    </div>
                                    <div>
                                        <div class="text-left task-description" onclick="MyPremise('@premise.PremisesID.ToString()','@premise.ApplicationType')">
                                            @premise.PremiseNickname
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><div class="block block--light block--cardShadow flex justify-content-between edit" id="edit_@premise.PremisesID" onclick="EditPremise('@premise.PremisesID.ToString()','@premise.ApplicationType')"><img src="~/assets/img/edit-white.svg" /></div><div class="del block block--light block--cardShadow flex justify-content-between" id="del_@premise.PremisesID" onclick="openDelModal('@premise.PremisesID.ToString()')"><img class="" src="~/assets/img/delete-white.svg" /></div>
                    </div>
                </li>                              
            }
            <!--#endregion My Premises Card-->
        </ul>
    </div>
}

3. 优化Helper层返回逻辑

在GetHMOPremisesAsync方法中直接处理null值，确保返回始终是列表（空或有数据）：

public async Task<List<HMOPremisesViewModel>> GetHMOPremisesAsync()
{
    var apiResponse = await _apiClient.GetAsync<GetHMOPremisesResponse>("your-api-endpoint");
    // 链式判断，避免null引用
    return apiResponse?.Content?.Premises ?? new List<HMOPremisesViewModel>();
}

内容的提问来源于stack exchange，提问作者Suraya Zulkifli