Estoy creando un sistema de administración de ubicación usando C#, SQL y ASP.NET. Quiero ocultar la división de la tarjeta si el recuento de la ubicación de mi base de operaciones, el recuento de la bolsa o el recuento del búnker es igual a 0 en mi base de datos y mostrar todas las ubicaciones cuando el valor es <0. Aquí está mi código a continuación.
HTML
@foreach (var item in Model.allItems) { \<div class="card" style="width: 50px;"\> \<div class="card-img-top" src="@item.ImageURL" alt="Card Image Cap"\>\</div\> \</div\> \<div class="card"\> \<div class="card-body"\> \<div class="card-img-top" src="@item.ImageURL" alt="Card Image Cap"\>\</div\> \<h5 class="card-title"\>\<p\>Test\</p\>@item.Name\</h5\> \<h6 class="card-title"\>@item.ItemType\</h6\> \<h6 class="card-title"\>@item.GroupType\</h6\> \<p class="homebase" style="color: black;"\>@item.HomebaseCount\</p\> \<p class="pouch" style="color: black;"\>@item.PouchCount\</p\> \<p class="bunker" style="color: black;"\>@item.BunkerCount\</p\> \<input type="text" class="textBoxHome defaultTextBox" /\> \</div\> \</div\> } \</div\><script>
$("#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>
Ocultación
Se puede ocultar un div con style="display: none;" . Quieres hacer esto con alguna condición.
Ejemplo solo para HomeBaseCount :
<div class="card" @Html.Raw((item.HomebaseCount == 0 ? "style='display: none;'" : "")) Debido a que se usa el style , el HTML se procesa y puede hacerlo visible con JavaScript más adelante si lo desea.
No renderizar el HTML
Si no se debe representar un div (no se debe enviar HTML para ese div al cliente), puede usar
@if(item.HomebaseCount != 0 || ..) { // your div } Si todo el código HTML entre las llaves del bucle foreach no debe representarse, también puede usar una .Where() :
@foreach (var item in Model.allItems.Where(x => x. HomebaseCount != 0 || ..) { // more divs }Simplemente agregue una validación if antes de la tarjeta div
@if (item.HomebaseCount !== 0 || item.HomebaseCount !== 0) { <div class="card"\> @* code goes here *@ </div\> }