Create a logic to check if viewModel == 0 & show <div> tag

I am trying to show a <div> when checking model is 0. However, after creating a logic to check whether model is 0, i am getting white blank page. If the model is != 0 it is displaying the <div> with the model != 0

I have put a breakpoint debugger to check whether the the api is successfully called & everything works fine. The api is getting count = 0 if there is no premises in db & the count is != 0 if there is premises in db.

I have tried giving a div id to the <div> tag & style display = none so that it will be hidden by default & create a logic in script to check whether model is 0 then show the div with the id but it is still not working.

views.cshtml:

@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.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>
}

controller:

    [HttpGet("ConnectToMyHome")]
    public async Task<ActionResult> ConnectToMyHome()
    {
        try
        {
            var premises = await _hmoHelper.GetHMOPremisesAsync();

            return View(premises);
        }
        catch (Exception)
        {
            return RedirectToAction("Error", "Home");
        }
    }

viewModel:

using System;

namespace MyTNB.MyHome.Web.Areas.Application.Models.MyHomeChecklist
{
    public class HMOPremisesViewModel
    {
        public Guid PremisesID { get; set; }
        public string PremiseNickname { get; set; }
        public string ApplicationType { get; set; }
        public string ApplicationID { get; set; }
        public int TaskType { get; set; }
    }
}

response:

    namespace MyTNB.MyHome.Web.Services.ApiModels.MyHomeChecklist
{
    public class GetHMOPremisesResponse : ApiResponseBody
    {
        public GetHMOPremisesViewModelContent Content { get; set; }
    }

    public class GetHMOPremisesViewModelContent
    {
        public List<HMOPremisesViewModel> Premises { get; set; }
    }

}

> I am trying to show a when checking model is 0. However, after
> creating a logic to check whether model is 0, i am getting white blank
> page. If the model is != 0 it is displaying the with the model != 0

Actually, Model.Count wouldn't help you get your desire result because in view we cannot count the overall model but its index element or items count in perticular. For instance, you can do like Model.FirstOrDefault().YourModelElements so if the list empty this block will not be executed.

However, the most easy and efficient way you can achieve that using Model.Any() which will execute if block if the list not empty other than it will execute else block.

Let's have a look in practice:

Controller:

public IActionResult Index()
        {
            var countCheckModel = new List<HMOPremisesViewModel>
            {

                new HMOPremisesViewModel(){ PremisesID = new Guid(), PremiseNickname = "Microsoft",ApplicationType = "A", ApplicationID ="101",TaskType =1},
                new HMOPremisesViewModel(){ PremisesID = new Guid(), PremiseNickname = "Amazon",ApplicationType = "B", ApplicationID ="201",TaskType =2},
                new HMOPremisesViewModel(){ PremisesID = new Guid(), PremiseNickname = "Google",ApplicationType = "C", ApplicationID ="303",TaskType =2},
            };

            var emptyList = new List<HMOPremisesViewModel>();
            return View(countCheckModel);
        }

Note: For testing I am passing empty list at first time and then List with 3 items.

View:

@model List<DotNet6MVCWebApp.Controllers.HMOPremisesViewModel>

@{
    ViewData["Title"] = "Index";
}

@if(Model.Any())
{
    Console.WriteLine(Model.Count());
}
else{
   Console.WriteLine("else executed because model is zero");
}

Output: