Javascript 如何在asp.net mvc视图中从ienumerable中选择一行

我有一个asp.net mvc视图，它的模型类型为IEnumerable。在这个视图中有一个表，其中的数据被传递给它。我的目标是在单击该行时显示包含该特定元素的所有详细信息的模式。此时，传递给视图的模型包含所有正在显示的信息，以及应在模型上显示的信息字段

@model IEnumerable<TestApplication.DataModels.PackageDetails>

    <div class="table-responsive " style="height: 300px">
        <table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Ref_Num)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Customer_Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Package_Description)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Package_Authorization_Date)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Package_Arrival_Date)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Package_Total)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Percentage_Due_Now)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Pending_Balance)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.DateDifference)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.SendReminder)
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td style=" font-style:italic; color:#000066; text-decoration: underline;">
                            <span class="show-package-details" data-id="@item.Ref_Num"  data-toggle="modal" data-target="#basicModal" style="cursor: pointer;">@Html.DisplayFor(x => item.Ref_Num)</span>
                        </td>
                        <td style="font-size: 12px; ">
                            @Html.DisplayFor(modelItem => item.Customer_Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Package_Description)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Package_Authorization_Date)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Package_Arrival_Date)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Package_Total)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Percentage_Due_Now)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Pending_Balance)
                        </td>
                        @if ((item.DateDifference < 5) && (item.DateDifference > 0))
                        {
                            <td style="color: #ff0000;">
                                @Html.DisplayFor(modelItem => item.DateDifference)
                            </td>
                        }
                        else
                        {
                            <td>
                                @Html.DisplayFor(modelItem => item.DateDifference)
                            </td>

                        }
                        <td>
                            @if (item.DateDifference > 0)
                            {
                                <button id="btnSendReminder" type="button" class="btn btn-light" style="font-size : 10px; width: 100%; height: 20%;">
                                    Send
                                </button>
                            }
                            else
                            {
                                <button id="btnSendReminder" type="button" class="btn btn-light" disabled style="font-size : 10px; width: 100%; height: 20%;">
                                    Send
                                </button>
                            }

                        </td>
                    </tr>




                }
            </tbody>

        </table>
    </div>



@*Modal For Details*@
    <div class="modal fade" id="basicModal" tabindex="-1"
         role="dialog" aria-labelledby="basicModal" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="container-fluid">


                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col">
                                    REFERENCE NUMBER: 
                                </div>
                                <div class="col">
                                    RESERVED ON:
                                </div>
                                <div class="col">
                                    PAID AMOUNT:
                                </div>

                            </div>
                            <div class="row">
                                <div class="col">
                                    CUSTOMER NAME:
                                </div>
                                <div class="col">
                                    ARRIVAL DATE:
                                </div>
                                <div class="col">
                                    PENDING BALANCE:
                                </div>

                            </div>
                            <div class="row">
                                <div class="col">
                                    PACKAGE DESCRIPTION:

                                </div>
                                <div class="col">
                                    PACKAGE TOTAL:
                                </div>
                                <div class="col">
                                    OFFER EXPIRES ON:
                                </div>

                            </div>
                            <div class="row">
                                <div class="col">
                                    PACKAGE DETAILS: 
                                </div>
                                <div class="col">

                                </div>
                                <div class="col">
                                    BALANCE TO BE PAID BY: <div class="balancepaid">    </div>
                                </div>

                            </div>




                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Edit</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                </div>

                </div>
            </div>
    </div>

---

您可以在第一个列表中生成一个按钮

 <th>
     <button type="button" class="btn btn-default showmodal" id="@item.Ref_Num">Show Modal</button>  
 </th>

编辑：也许先检查一下这张单据

看看这个。它有从下面的Razor视图代码生成的源代码。它使用DOM遍历来获取给定行所需的值

注意，显示模态的跨度元素的onclick=blahthis

注意JS函数blahx，它获取其行值，并在调用时替换模态模板的某些部分

希望这能让你知道你需要做什么。您仍在编写代码，但避免了对服务器的调用

另一个注意事项是，这个新的onclick事件可能与现有的模式事件发生冲突。我不确定事情的顺序，所以你得看看进展如何

最后一点，我不建议这样做。我可能会看看剃须刀的部件，但那完全是另一回事

<div class="row">
    <div class="col">
        <table class="table table-striped mt-4">
            <tr style="background-color:#004A88;color:white;">
                <th scope="col">Name</th>
                <th scope="col">Title</th>
                <th scope="col">Procedure</th>
                <th scope="col">Method</th>
                <th scope="col">All Staff</th>
                <th scope="col"></th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Name</td>
                    <td>@item.Description</td>
                    <td>@item.Procedure</td>
                    <td>@item.Method</td>
                    <td>@Html.DisplayFor(modelItem => item.AllRequired)</td>
                    <td>
                        <span id="span@(item.Id)" data-toggle="modal" data-target="#exampleModal" onclick="blah(this)">Show Modal @item.Id</span> |
                        <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                        <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                        <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

<!-- Modal -->
<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">Modal title</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>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script>

        function blah(x) {
            var parentrow = x.parentElement.parentElement;
            var myvalue = parentrow.children[0].innerText;
            var myvalue2 = parentrow.children[1].innerText;
            $(".modal-title").text(myvalue);
            $(".modal-body").text(myvalue2);
        }
    </script>
}

---

我看这里没有一个明确的问题。如果您试图使用索引访问IEnumerable的元素，则不能。您可以使用IEnumerable构造列表，然后使用索引器。您还可以在运行foreach循环时自己增加一个运行索引。问题是什么？我想我知道您想要什么-您想要的不是带您到新视图的典型详细信息链接，而是弹出一个模式。到目前为止你试过什么？我没有太多地使用modals，但我希望您需要Javascript和某种方式来传递每个记录的值。您可以使用ElementAti为IEnumerable选择一个元素。如何确定单击了哪一行，然后从IEnumerable列表中选择该行信息，然后在html modal div中显示该行？我尝试了一些方法我自己动手实现modals并不像“细节”视图那样简单。看harmath的答案-这是一条路要走，但似乎只是为了情态动词做了很多努力。除非您为所有结果预生成modals，隐藏它们，然后单击显示，否则您需要像答案中那样调用服务器。简言之，这里发生的事情是将记录的唯一标识符传递给JS函数，该函数对一个操作进行AJAX调用，您需要在控制器中创建一个操作，该操作将单个记录发送回以处理为模式。

 $("document").ready(function () {

        $('.showmodal').on('click', function () {
            var Id=this.value;
            getAjaxRequest(Id,fillDOMelements);
        });
    });
 function fillDOMelements(yourObj)
    {
        if(typeof yourObj!=null && typeof yourObj!==undefined)
        {
            //your modal fields
            $("[name='modal_Customer_Name']").val(yourObj.Customer_Name);
            $("[name='modal_Package_Description']").val(yourObj.Package_Description);
            ....
        }
    }
 function getAjaxRequest(id,callbackFunction)
    {
        $.ajax({
            type: "POST",
            url: "/Controller/Action",
            data: "{'Id' : "+id+"}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                callbackFunction(response);
            }
        });
    }

<div class="row">
    <div class="col">
        <table class="table table-striped mt-4">
            <tr style="background-color:#004A88;color:white;">
                <th scope="col">Name</th>
                <th scope="col">Title</th>
                <th scope="col">Procedure</th>
                <th scope="col">Method</th>
                <th scope="col">All Staff</th>
                <th scope="col"></th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Name</td>
                    <td>@item.Description</td>
                    <td>@item.Procedure</td>
                    <td>@item.Method</td>
                    <td>@Html.DisplayFor(modelItem => item.AllRequired)</td>
                    <td>
                        <span id="span@(item.Id)" data-toggle="modal" data-target="#exampleModal" onclick="blah(this)">Show Modal @item.Id</span> |
                        <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                        <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                        <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

<!-- Modal -->
<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">Modal title</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>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script>

        function blah(x) {
            var parentrow = x.parentElement.parentElement;
            var myvalue = parentrow.children[0].innerText;
            var myvalue2 = parentrow.children[1].innerText;
            $(".modal-title").text(myvalue);
            $(".modal-body").text(myvalue2);
        }
    </script>
}