我有一个 asp.net mvc View ，它有一个 IEnumerable 类型的模型。在这个 View 中有一个表，其中有传递给它的数据。我的目标是在单击该行时显示包含该特定元素的所有详细信息的模式。目前，传递给 View 的模型包含所有正在显示的信息以及应该在模式上显示的信息字段。
@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; }
最佳答案
您可以在第一个列表中生成一个按钮。
<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);
}
});
}
关于javascript - 如何在 asp.net mvc View 中从 ienumerable 中选择一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58962960/