How to set visibility criteria in Asp.net Core 6 MVC web forms

Question

I have this

<div class="mb-3">
                                        <label asp-for="DeliveryDt" class="control-label"></label>
                                        <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly />
                                        <span asp-validation-for="DeliveryDt" class="text-danger"></span>
                                    </div>

i want to hide this field from my razor view.but i have no idea. In Asp.net simple we Visible = 'False' ,but this is not working in .Net core 6 MVC please show me idea except $('#DeliveryDt').hide();

I have tried this $('#DeliveryDt').hide(); this is working but it only hides textbox ,label is still dispalying as it is.

please share some idea except jquery or javascript.

Answer 1

You can use css display: none:

<div class="mb-3" style="display:none">
    <label asp-for="DeliveryDt" class="control-label"></label>
    <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly />
    <span asp-validation-for="DeliveryDt" class="text-danger"></span>
</div>

If you want to optional control the div visible by backend, you could define a property in your model.

1. Model

   public class YourViewModel
    {
         public DateTime DeliveryDt { get; set; }
         public bool ShowDeliveryDt { get; set; } = true; // Default to true, set to false to hide
    }
   

2. View

• use if statement

   @if (Model.ShowDeliveryDt)
   {
       <div class="mb-3">
            <label asp-for="DeliveryDt" class="control-label"></label>
            <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly />
            <span asp-validation-for="DeliveryDt" class="text-danger"></span>
       </div>
   }
  

• Or you can use css

   <div class="mb-3 @(Model.ShowDeliveryDt ? "" : "hidden-field")">
       <label asp-for="DeliveryDt" class="control-label"></label>
       <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly />
       <span asp-validation-for="DeliveryDt" class="text-danger"></span>
   </div>
   @section Scripts {
       @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
       <style>
           .hidden-field {
               display: none;
           }
       </style>
   }
  

3. Controller

   public IActionResult YourActionMethod()
   {
       var model = new YourViewModel
       {
           // Set other properties as necessary
           ShowDeliveryDt = false // Set to false to hide the field
       };
   
       return View(model);
   }
   

Answer 2

In this case if you want to hide the entire div (label, textbox, validation message) you can do the following:

<div id="DeliveryDtGroup" class="mb-3">
    <label asp-for="DeliveryDt" class="control-label"></label>
    <input asp-for="DeliveryDt" type="text" class="datepicker form-control" autocomplete="off" autofocus="true" readonly />
    <span asp-validation-for="DeliveryDt" class="text-danger"></span>
</div>

Then using jQuery, you can call the following:

$('#DeliveryDtGroup').hide();

Answer 3

var DeliveryDt= '@Model.DeliveryDt'.toLowerCase() == 'true';

Note : replace the above with your condition to hide the control

    // Hide or show the field based on the value
   if (!DeliveryDt) {
        document.getElementById('DeliveryDt').closest('.form-group').style.display = 'none';
    }

In the above case I want to hide the control, when @Model.DeliveryDt is false