如何在 asp.net mvc 视图中 select 来自 ienumerable 的一行

Question

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

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

Answer 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);
            }
        });
    }

Answer 2

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

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

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

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

如何在 asp.net mvc 视图中 select 来自 ienumerable 的一行

How to select one row from ienumerable in asp.net mvc view

html

javascript

asp.net-mvc

ienumerable