Want to hide the div if sql value is 0 with c#, jquery-CodePudding

I am creating a location management system using C#, SQL and ASP.NET. I want to hide the card div if either my home base location count, pouch count or bunker count is equal to 0 in my database and show all the locations when the value is < 0. Here's my code is below.

HTML

    @foreach (var item in Model.allItems)
    {


        \<div  style="width: 50px;"\>
            \<div  src="@item.ImageURL" alt="Card Image Cap"\>\</div\>
        \</div\>

        \<div \>
            \<div \>
                \<div  src="@item.ImageURL" alt="Card Image Cap"\>\</div\>
                \<h5 \>\<p\>Test\</p\>@item.Name\</h5\>
                \<h6 \>@item.ItemType\</h6\>
                \<h6 \>@item.GroupType\</h6\>
                \<p  style="color: black;"\>@item.HomebaseCount\</p\>
                \<p  style="color: black;"\>@item.PouchCount\</p\>
                \<p  style="color: black;"\>@item.BunkerCount\</p\>

                \<input type="text"  /\>

            \</div\>
        \</div\>

    }

\</div\>

        $("#homebase").add("#bunker").add("#pouch").click(function () {
            $('.container-2').fadeTo(500, 1);
            $('.container-1').hide();
            $('.container-3').hide();
            $('.pouch').hide();
            $('.bunker').hide();
            $(function () {
                if ($('.homebase') === '0') {
                    $('.homebase').hide();
                } else {
                    $('.homebase').show();
                }
            });
        });

</script>

CodePudding user response：

Hiding

Hiding a div can be done with style="display: none;". You want to do this on some condition.

Example for HomeBaseCount only:

<div  @Html.Raw((item.HomebaseCount == 0 ? “style=‘display: none;’” : “”))

Because style is used, the HTML is rendered and you could make it visible with JavaScript later if you like.

Not rendering the HTML

If a div should not be rendered (no HTML for that div should be send to the client), you can use

@if(item.HomebaseCount != 0 || ..)
{
    // your div
}

If all HTML between the braces of the foreach loop should not be rendered you could also use a .Where() statement:

@foreach (var item in Model.allItems.Where(x => x. HomebaseCount != 0 || ..)
{
    // more divs
}

CodePudding user response：

Just add a if validation before the div card

@if (item.HomebaseCount !== 0 || item.HomebaseCount !== 0) 
{
  <div \>
    @* code goes here *@
  </div\> 
}