以模态传递值，并通过AJAX调用显示网格
这里是情况：
我有两个基本模型（事件和子事件），它们带有一个模板（EventViewModel）的标题，其中我的两个模板位于列表<>下，因此可以在同一视图中显示。
当我打开网页时，在Index（）方法中，转到“事件”并将其显示在网格中。 这可以正常工作。
在我的网格中，我有一个链接，该链接打开一个必须显示以下两项的模式：左侧是该事件的详细信息（出发日期，结束日期，状态和费用），而右侧是代表子事件。
我的问题在这里，我不知道如何正确显示它。
当前，当我打开模式时，它在左侧显示我的2个事件可用，而在右侧不显示任何内容！
我正在发布当前模态的屏幕截图，以便您可以更好地理解问题：
控制器：
[Authorize]
[HttpGet]
public async Task<ActionResult> Index()
{
ViewBag.sessionv = HttpContext.Session.GetInt32("idMember");
FileMakerRestClient client = new FileMakerRestClient(serverName, fileName, userName, password);
var toFind = new Models.Events { Zkp_WEB_EVL = ViewBag.sessionv, Zkf_CTC = 1053 };
var results = await client.FindAsync(toFind);
Models.EventViewModel oEventViewModel = new Models.EventViewModel
{
_Events = (from o in results select o).ToList()
};
ViewBag.JsonList = oEventViewModel;
return View(oEventViewModel);
}
[Authorize]
[HttpGet]
public async Task<ActionResult> GetEventsDetails(int Id_Event, int Id_CTC)
{
ViewBag.sessionv = HttpContext.Session.GetInt32("idMember");
FileMakerRestClient client = new FileMakerRestClient(serverName, fileName, userName, password);
var toFind = new Models.SubEvents { Zkp_WEB_SEL = ViewBag.sessionv, Zkf_CTC = Id_CTC, Zkf_EVL = Id_Event };
var results = await client.FindAsync(toFind);
Models.EventViewModel oEventViewModel = new Models.EventViewModel
{
_SubEvents = (from o in results select o).ToList()
};
Console.WriteLine(oEventViewModel);
return Json(oEventViewModel);
}
**Model:**
public class EventViewModel
{
public List<Events> _Events { get; set; }
public List<SubEvents> _SubEvents { get; set; }
}
查看：
@model jak.formulaire.Models.EventViewModel
<div class="container">
<div class="col-5" style="margin-top:2%">
<h3>Registration History</h3>
</div>
@* Table of Events member *@
<div>
<table id="example" class="table table-hover" style="width:100%; margin-top:2%">
<thead>
<tr>
<th scope="col">Event Name</th>
<th scope="col">Start Date</th>
<th scope="col">End Date</th>
<th scope="col">Status</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model._Events)
{
<tr>
<td>@item.Event_Name</td>
<td>@item.Event_DateStart</td>
<td>@item.Event_DateEnd</td>
<td>@item.Event_Status</td>
<td><a href="#myModal" data-toggle="modal" data-target="#myModal" data-id="@item.Zkp_WEB_EVL">View Details</a></td>
</tr>
}
</tbody>
</table>
</div>
</div>
@* Modal Details *@
<div class="modal" role="dialog" id="myModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalTitle"></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="myModalContent">
<div class="container" style="width:auto; margin-top:1%">
<div class="row col-12">
<div class="form-horizontal col-6" style="margin-left:-5%">
@foreach (var item in Model._Events)
{
@Html.HiddenFor(model => model._Events.FirstOrDefault().Zkp_WEB_EVL, new { data_val = "false" })
@Html.HiddenFor(model => model._Events.FirstOrDefault().Zkf_CTC, new { data_val = "false" })
<div class="form-check-inline col-12" style="margin-top:1%">
@Html.LabelFor(model => model._Events.FirstOrDefault().Event_DateStart, "Start Date", htmlAttributes: new { @class = "control-label col-md-5", @style = "font-size:13px" })
<input name="Event_StartDate" id="Event_StartDate" value="" class="form-control col-md-7" readonly="" />
@*@Html.EditorFor(model => model._Events.FirstOrDefault().Event_Name, new { htmlAttributes = new { @class = "form-control col-md-7", @style = "font-size:13px, height:10px", @readonly = "", @placeholder = "Date Start", @id = "Event_StartDate" } })*@
</div>
<div class="form-check-inline col-12" style="margin-top:1%">
@Html.LabelFor(model => model._Events.FirstOrDefault().Event_DateEnd, "End Date", htmlAttributes: new { @class = "control-label col-md-5", @style = "font-size:13px" })
@Html.EditorFor(model => model._Events.FirstOrDefault().Event_DateEnd, new { htmlAttributes = new { @class = "form-control col-md-7", @style = "font-size:13px, height:10px", @readonly = "", @placeholder = "Date End", @id = "Event_EndDate" } })
</div>
<div class="form-check-inline col-12" style="margin-top:1%">
@Html.LabelFor(model => model._Events.FirstOrDefault().Event_City, "City", htmlAttributes: new { @class = "control-label col-md-5", @style = "font-size:13px" })
@Html.EditorFor(model => model._Events.FirstOrDefault().Event_City, new { htmlAttributes = new { @class = "form-control col-md-7", @style = "font-size:13px, height:10px", @readonly = "", @placeholder = "City", @id = "Event_City" } })
</div>
<div class="form-check-inline col-12" style="margin-top:1%">
@Html.LabelFor(model => model._Events.FirstOrDefault().Event_Country, "Country", htmlAttributes: new { @class = "control-label col-md-5", @style = "font-size:13px" })
@Html.EditorFor(model => model._Events.FirstOrDefault().Event_Country, new { htmlAttributes = new { @class = "form-control col-md-7", @style = "font-size:13px, height:10px", @readonly = "", @placeholder = "Country", @id = "Event_Country" } })
</div>
<div class="form-check-inline col-12" style="margin-top:1%">
@Html.LabelFor(model => model._Events.FirstOrDefault().Event_Type, "Type", htmlAttributes: new { @class = "control-label col-md-5", @style = "font-size:13px" })
@Html.EditorFor(model => model._Events.FirstOrDefault().Event_Type, new { htmlAttributes = new { @class = "form-control col-md-7", @style = "font-size:13px, height:10px", @readonly = "", @placeholder = "Type", @id = "Event_Type" } })
</div>
<div class="form-check-inline col-12" style="margin-top:1%">
@Html.LabelFor(model => model._Events.FirstOrDefault().Event_Status, "Status", htmlAttributes: new { @class = "control-label col-md-5", @style = "font-size:13px" })
@Html.EditorFor(model => model._Events.FirstOrDefault().Event_Status, new { htmlAttributes = new { @class = "form-control col-md-7", @style = "font-size:13px, height:10px", @readonly = "", @placeholder = "Status", @id = "Event_Status" } })
</div>
<div class="form-check-inline col-12" style="margin-top:1%">
@Html.LabelFor(model => model._Events.FirstOrDefault().Event_TotalDue, "Total Due", htmlAttributes: new { @class = "control-label col-md-5", @style = "font-size:13px" })
@Html.EditorFor(model => model._Events.FirstOrDefault().Event_TotalDue, new { htmlAttributes = new { @class = "form-control col-md-7", @style = "font-size:13px, height:10px", @readonly = "", @placeholder = "Total Due", @id = "Event_TotalDue" } })
</div>
}
</div>
<div class="col-6">
<div class="card border-primary" style="margin-top:2%; width:125%">
<div class="card-header"> <h6>Sub-Events</h6></div>
<div class="card-body">
<table id="SubEventsDatatables" class="display col-12">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Start Date</th>
<th scope="col">Status</th>
<th scope="col">Fees</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section Scripts{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
//var idEvent = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
//btn.onclick = function () {
// modal.style.display = "block";
//}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
//triggered when modal is about to be shown
$('#myModal').on('show.bs.modal', function (e) {
GetEventsDetails();
//get data-id attribute of the clicked element
var id = $(this).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="Event_StartDate"]').val('id');
});
$(document).ready(function () {
});
function GetEventsDetails() {
$('#SubEventsDatatables').DataTable({
processing: true,
ajax: {
"url": '@Url.Action("GetEventsDetails", "Events")' + "/" + 1053 + "/" + 1454,
"type": "GET",
"datatype": "json",
succes: function (data) {
$("#Name").val(data['Name_cU']);
$("#Name").val(data['Date']);
$("#Name").val(data['Status']);
$("#Name").val(data['Fee_cU']);
},
error: function (error) {
toastr.error("An error occurs during the process of your request");
}
},
columns: [
{ "data": "Name_cU" },
{ "data": "Date" },
{ "data": "Status" },
{ "data": "Fee_cU" },
]
});
}
</script>
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？