ASP.NET MVC Razor, get ID in JQuery function

Question

I'm using .net mvc and razor and I'm displaying items (itemRoom, itemDescription) in my view like this:

@foreach (var item in Model) {
                            <li class="errorItem">
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-warning fa-fw"></i> @Html.DisplayFor(modelItem => item.room) : @Html.DisplayFor(modelItem => item.title)
                                    <span class="pull-right text-muted small"><em>5 min ago</em>
                                    </span>
                                    <div>
                                        <ul id="errorExtra" class="nav nav-second-level" style="display: none;">
                                        <li>
                                            <p> @Html.DisplayFor(modelItem => item.description)</p>

                                            <input type="button" id="btnFixed" value="Fixed" class="btn btn-success"/>                                                        
                                        </li>
                                        </ul>
                                    </div>

                              </a>

                            </li>
                            }

At the bottom of my page I'm using JQuery to let every item slide open when it's clicked on so that the details and 'Fixed' button become visible. When the user clicks on the Fixed button he gets directed to a confirmation page to delete the item.

    <script src="../Assets/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

        var isOpen = false;

        $(".errorItem").click(function (e) {
            isOpen = !isOpen;
            if (isOpen) {
                $(this).find("#errorExtra").slideToggle("slow");

            } else {
                $(".btn-success").click(function (e) {
                    window.location.replace("Reports/Delete/2")

                })
            };
        });


       });


</script>

Everything works quite all right but the link 'window.location.replace("Reports/Delete/2")' actually has to be 'Reports/Delete/itemID' but how can I mange to get the ID of the item that the user has clicked on and that has slide open? So that THIS item will be deleted on the confirmation page?

Answer 1

do a little change in view, assuming your unique id is with property name Id:

@foreach (var item in Model) {
                            <li class="errorItem">
                                <a href="#" class="list-group-item">
                                    <i class="fa fa-warning fa-fw"></i> @Html.DisplayFor(modelItem => item.room) : @Html.DisplayFor(modelItem => item.title)
                                    <span class="pull-right text-muted small"><em>5 min ago</em>
                                    </span>
                                    <div>
                                        <ul id="errorExtra" class="nav nav-second-level" style="display: none;">
                                        <li>
                                            <p> @Html.DisplayFor(modelItem => item.description)</p>

     --> change is here             <input type="button" id="btnFixed" data-url="@Url.Action("Delete","Reports",new{id=item.Id})" value="Fixed" class="btn btn-success"/>                                                        
                                        </li>
                                        </ul>
                                    </div>

                              </a>

                            </li>
                            }

In Jquery:

$(".btn-success").click(function (e) {
                    var url = $(this).data("url");
                    window.location.replace(url);

                });

Answer 2

Just a small notice: you'll have multiple buttons with the same id="btnFixed" because it's inside of the @foreach loop. Maybe adding some kind of index to it would be reasonable or changing it to the class="btnFixed". The same with the <ul id="errorExtra" ...>.