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

【问题标题】：How to select one row from ienumerable in asp.net mvc view如何在 asp.net mvc 视图中从 ienumerable 中选择一行
【发布时间】：2020-03-16 16:18:24
【问题描述】：

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

@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>

为了澄清，包详细信息模型具有以下属性

  public string Ref_Num { set; get; }

        [Display(Name = "Name")]
        public string Customer_Name { set; get; }

        [Display(Name = "PACKAGE DESCRIPTION")]
        public string Package_Description { set; get; }

        [Display(Name = "RESERVED ON")]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime Package_Authorization_Date { set; get; }

        [Display(Name = "ARRIVAL DATE")]
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime Package_Arrival_Date { set; get; }

        [Display(Name = "TOTAL AMOUNT")]
        public decimal Package_Total { set; get; }

        [Display(Name = "PAID AMOUNT")]
        public decimal Percentage_Due_Now { set; get; }

        [Display(Name = "PENDING BALANCE")]
        public decimal Pending_Balance { set; get; }

        [Display(Name = "DAYS PENDING")]
        public int DateDifference { set; get; }

        [Display(Name = "SEND REMINDER")]
        public bool SendReminder { set; get; }


//additional fields to be shown only on modal 
        public string Package_EMailAddress { set; get; }
        public string Package_Detail { set; get; }
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime Expire_Date { set; get; }
        [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
        public DateTime Pay_Pending_Balance_By { set; get; }

【问题讨论】：

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

标签： javascript html asp.net-mvc ienumerable

【解决方案1】：

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

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

...并添加此 JavaScript 代码。

 $("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);
            }
        });
    }

【讨论】：

【解决方案2】：

编辑：也许先检查这个bootstrap 文档。

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

注意 onclick="blah(this)" 用于显示模式的 span 元素。

注意 JS 函数 function blah(x) 在调用时获取其行值并替换模态模板的某些部分。

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

另外请注意，这个新的 onclick 事件可能会与现有的模态事件发生冲突。我不确定事情的顺序，所以你必须看看它是怎么回事。

最后一点，我不推荐这个。我可能会改用 Razor 组件，但那是另一回事。

<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>
}

【讨论】：