How to use conditional JavaScript statement based on model value on a razor view?

Question

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?

Jonas Weinhardt · Accepted Answer · 2021-09-30 06:56:26Z

1

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://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-5.0#conditionals-if-else-if-else-and-switch

edited Sep 30, 2021 at 6:56

answered Sep 30, 2021 at 5:58

Jonas Weinhardt

1,0967 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

decoder · Accepted Answer · 2021-09-30 06:26:10Z

1

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>

}

answered Sep 30, 2021 at 6:26

decoder

9261 gold badge23 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to use conditional JavaScript statement based on model value on a razor view?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related