show an element by checking bool value from model

Question

I want to show bootstrap badges like accepted, rejected according to a bool value from the model called status . the problem here is I tried doing it using jquery but it's either all shown or all hide. so I guess it can't read the status values. I opened developer tools and there is no error. I need guidance. I appreciate your help.

 @for (int i = 0; i < Model._Requests.Count(); i++)
                            {


                                <tr>

                                    <td>
                                        @Html.DisplayFor(x => Model._Requests[i].Account_Name)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(x => Model._Requests[i].LOB)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(x => Model._Requests[i].Operation_Date)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(x => Model._Requests[i].Employee_no)
                                    </td>

                                    <td>
                                        @Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate)
                                    </td>

                                    <td>
                                        <span name="badge" class="badge badge-warning" id="pend">WTF</span>

                                    </td>
<!--for the accept button-->

                                    @using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post))
                                    {
                                        @Html.AntiForgeryToken()

                                        <td>
                                            <button id="btnAccept" class="btn  btn-success" name="a_button" type="submit" value="true">Accept</button>
                                            @Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
                                            @Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })

                                        </td>
                                    }
                                    <!--for the reject button-->

                                    @using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post))
                                    {
                                        @Html.AntiForgeryToken()


                                        <td>
                                            <button id="btnReject" class="btn  btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="button" value="false">Reject</button>
                                            @Html.Hidden("Request_ID", Model._Requests[i].Request_ID)

                                            @Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
                                        </td>
                                        <!--this is the note modal of the reject button -->
                                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">


                                                        <div class="form-group">


                                                            @Html.TextArea("Note", Model._Requests[i].Note, htmlAttributes: new { @class = "form-control" })
                                                        </div>

                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                        <input type="submit" value="submit" class="btn btn-success" id="finalSave" />

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </tr>
                            }
                                </tbody>

                                </table>

script

 var flag = $('[name = "Status"]').val();
        if (flag === false) {
            $('#pend').show();
        }
        else {
            $('#pend').hide();
        }

the badge i'm trying to show

<span name="badge" class="badge badge-warning" id="pend">WTF</span>

[Here are a few ways](https://stackoverflow.com/questions/16361364/accessing-mvcs-model-property-from-javascript) to access model values using javascript — wahwahwah, Jan 13 '20 at 14:44
hi, @wahwahwah I came across this post but my problem is my model is ViewModel that has a list inside it. so I can't access the status directly.thank you though ✌ — 2766, Jan 13 '20 at 15:07

meneroush · Answer 1 · 2020-01-13T15:12:49.360

1

If status doesnt change afterwards, just set some class dynamically to this item in your cshtml

<span name="badge" class="badge badge-warning @{Model.Status ? "visible" : "invisible"}" id="pend">WTF</span>

If it does change you have to trigger events on that value change

edited Jan 13 '20 at 15:12

answered Jan 13 '20 at 14:42

meneroush

61
4

may I ask what do you mean about triggering it? you mean write a function in js like the one I'm showing in the post? Status allows null, I wrote it this way `status??` it gives me error due to the third question mark. how to specify it that it allows null.thanks in advance – 2766 Jan 13 '20 at 15:05
Try `@{Model.Status.GetValueOrDefault() ? "visible" : "invisible"}` `GetValueOrDefault` will return false if Status is null. – meneroush Jan 13 '20 at 15:13
By triggering I mean that in this case, you will have to add `onchange` event handlers somewhere in your app and manage the appearance of your badge when event is called – meneroush Jan 13 '20 at 15:15
good morning, I tried running it after using .GetValueOrDefault() there is a compilation error showing that `;` was expected. I tried placing it in different places but it won't work. for the trigger, I used this but I didn't test it yet ` $('span').trigger('change');` . thanks in advace. – 2766 Jan 14 '20 at 08:14
The following code `WTF` does not produce any errors fro me. – meneroush Jan 14 '20 at 14:19
I cant provide any suggestions on the case when Status value changes without seeng the code. In your example Status value remains the same after the view is rendered. – meneroush Jan 14 '20 at 14:21

show an element by checking bool value from model

1 Answers1