Hiding and showing the div tags in Razor page

Question

I have the following code in my controller:

 

 public async Task<IActionResult> Index()
        {
            string destinationDirectory = _configuration["DestinationPath"].ToString();
       
            string DocHash = hd.GetUploadedDocumentHash(destinationDirectory);
            ViewBag.Message = await ap.verifyHash(DocHash);
            return View();
        }

This is my View:

 @model Models.basicInfo

Fill out basic details.
<div id="IDShow">
    <h4>@ViewBag.Message</h4>
</div>
  
    <div class="row" id="idHide">
       
            <form asp-action="Edit">
                 <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group row">
                    <div class="col-md-6">
                        <label asp-for="TransactionNumber" class="control-label"></label>
                        <input asp-for="TransactionNumber" class="form-control" />
                        <span asp-validation-for="TransactionNumber" class="text-danger"></span>
                   </div>
                <div class="col-md-6">
                    <label asp-for="ProcessedDate" class="control-label"></label>
                    <input asp-for="ProcessedDate" class="form-control" type="date" />
                    <span asp-validation-for="ProcessedDate" class="text-danger"></span>
                </div>
              </div>
                   <div class="form-group row">
                <div class="col-md-6">
                    <label asp-for="CustNumber" class="control-label"></label>
                    <input asp-for="CustNumber" class="form-control" />
                    <span asp-validation-for="CustNumber" class="text-danger"></span>
                   </div>
</div>
</div>
if  @ViewBag.Message message has something in it then, I want to hide the "idHide" div tag and show the "IDShow"  div tag. 

and if the @ViewBag.Message is blank then I want to show the idHide section and hide the "IDShow" tag.

Answer 1

Hi @Anjali Agarwal

if @ViewBag.Message message has something in it then, I want to hide the "idHide" div tag and show the "IDShow" div tag. and if the @ViewBag.Message is blank then I want to show the idHide section and hide the "IDShow" tag.

You can add an if-elsestatement in the view page to check ViewBag.Message value, then based on the result to show the related section. Code in the view page like this:

@if (ViewBag.Message != null && !string.IsNullOrEmpty(ViewBag.Message))
{
    <div id="IDShow">
        <h4>@ViewBag.Message</h4>
    </div>
}
else
{
    <div class="row" id="idHide">
        <h2>Edit Form</h2>

    </div>
}

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion