I am basically trying to hide the ACCEPT or REJECT buttons inside "buttons" div on my view based on the values of "d_status" which is either "ACCEPTED" or "REJECTED" or "PENDING" and these values are coming from the model, however I am quite to new to asp.net, here is my code:
<tbody>
@foreach (var Data in Model)
{
<script>
if (@Data.d_status == "ACCEPTED" || @Data.d_status == "REJECTED") {
document.getElementById("buttons").style.display = 'none';}
</script>
<tr>
<td>@Data.donor_ID</td>
<td>@Data.donor_Name</td>
<td>@Data.donor_condition</td>
<td>@Data.donor_BG</td>
<td>@Data.donor_date</td>
<td>@Data.drequest_date</td>
<td>@Data.d_status</td> //checks status
<td>
<div id="buttons"> //hide this div
<a href="@Url.Action("AcceptDonorRequest","Admin", new {ID = Data.donor_ID })"
class="btn btn-success btn-lg">ACCEPT</a>
<a href="@Url.Action("RejectDonorRequest","Admin", new {ID = Data.donor_ID })"
class="btn btn-danger btn-lg">REJECT</a>
</div>
</td>
</tr>}
</tbody>
Is there a better approach to this? Or how this can be fixed?
You can easily do this like this (Simplified the code a bit for readability):
@if (!(Data.d_status == "ACCEPTED" || Data.d_status == "REJECTED")) {
<div> //hide this div
<a class="btn btn-success btn-lg">ACCEPT</a>
<a class="btn btn-danger btn-lg">REJECT</a>
</div>
}
There is no need for javascript in this case. If the if condition is false everything inside it wont get rendered.
Heres a link to Microsoft Docs for this. Maybe it helps you to understand the Razor syntax more: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-5.0#conditionals-if-else-if-else-and-switch
You can do it like below
@if (Data.d_status == "ACCEPTED" || Data.d_status == "REJECTED")
{
<div>
</div>
}
else
{
<div id="buttons">
//hide this div
<a href="@Url.Action("AcceptDonorRequest","Admin", new {ID = Data.donor_ID })"
class="btn btn-success btn-lg">ACCEPT</a>
<a href="@Url.Action("RejectDonorRequest","Admin", new {ID = Data.donor_ID })"
class="btn btn-danger btn-lg">REJECT</a>
</div>
}