Вот моя цель:
- У меня есть класс EventViewModel, который содержит List <_EventsLine> и List <_SubEventsLine>.
- Я отображаю список всехсобытия участника (в соответствии с идентификатором участника).
- Если пользователь нажимает на название события, открывается модальное окно, в котором должны отображаться сведения о событии (в верхней части окна).модально) и таблица, в которой перечислены все вложенные события, в которых зарегистрирован участник.
- Мне удалось реализовать почти все мои цели, но я пропускаю все, что было последним шагом: отобразить список вложенных событийв модале.
У меня есть частичное представление для подробностей события в модале, и у меня также есть второе частичное представление для таблицы (под-событий) в модале.
В настоящее время модал открывается и отображает верхнюю или нижнюю часть, но не обе.Что я действительно не понимаю, так это то, что иногда я обновляю страницу, и она показывает только верхнюю часть (с подробностями о событии), а когда я обновляю страницу снова, она отображает нижнюю часть (с подробностями подэвентов, но без карты, это только показывает таблицу).
Я действительно потерян здесь, потому что я не понимаю, как иногда можно показать один частичный вид, а иногда и второй.
Iдумаю, я что-то пропустил, но я новичок ...
В настоящее время я открыт для всего, кто может мне помочь.
Есть предположения?
Когда загружается
Иногда отображаются детали события
Иногда отображаются подробности субвентинга
Просмотр индекса
@model jak.formulaire.Models.EventViewModel
<div class="container">
<div class="col-5" style="margin-top:2%">
<h4>Registration History</h4>
</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>
</tr>
</thead>
<tbody>
@foreach (var item in Model._EventsLines)
{
<tr>
<td><a href="#myModal" class="myModal" data-foo="@item.Event_Name" id="@item.Zkp" onclick="GetEventsDetails(this.id)">@item.Event_Name</a></td>
<td>@item.Event_DateStart</td>
<td>@item.Event_DateEnd</td>
<td>@item.Event_Status</td>
</tr>
}
</tbody>
</table>
</div>
</div>
@* Modal with Event details and SubEvents*@
<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="modal-title">Details of the event :</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._EventsLines)
{
<div>
{ Html.RenderPartial("GetEventsDetails"); }
</div>
}
</div>
</div>
<div class="row col-12">
<div class="card border-primary" style="margin-top:5%; margin-left:-4%; width:113%">
<div class="card-header"><h6>Sub-Events</h6></div>
<div class="card-body">
{ Html.RenderPartial("GetSubEventsDetails"); }
</div>
</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>
@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");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// 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";
}
}
function GetEventsDetails(id) {
$.get("@Url.Action("GetEventsDetails", "Events")/" + id,
function (data) {
$('.modal-body').html(data);
})
$.get("@Url.Action("GetSubEventsDetails", "Events")/" + id,
function (data) {
$('.modal-body').html(data);
})
$('#myModal').show();
}
</script>
}
Частичное представление подробностей события
@model jak.formulaire.Models.EventsLines
<div class="row col-12">
<div class="form-horizontal col-6" style="margin-left:-5%">
@Html.HiddenFor(model => model.Zkp, new { data_val = "false" })
@Html.HiddenFor(model => model.Zkf_CTC, new { data_val = "false" })
<div class="form-check-inline col-12" style="margin-top:1%">
<label class="control-label col-md-5" style="font-size:13px">Start Date</label>
@Html.EditorFor(model => model.Event_DateStart, 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%">
<label class="control-label col-md-5" style="font-size:13px">End Date</label>
@Html.EditorFor(model => model.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%">
<label class="control-label col-md-5" style="font-size:13px">City</label>
@Html.EditorFor(model => model.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%">
<label class="control-label col-md-5" style="font-size:13px">Country</label>
@Html.EditorFor(model => model.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>
<div class="form-horizontal col-6">
<div class="form-check-inline col-12" style="margin-top:1%">
<label class="control-label col-md-5" style="font-size:13px">Type</label>
@Html.EditorFor(model => model.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%">
<label class="control-label col-md-5" style="font-size:13px">Status</label>
@Html.EditorFor(model => model.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%">
<label class="control-label col-md-5" style="font-size:13px">Total Due</label>
@Html.EditorFor(model => model.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>
Частичное представление подробностей Subevents
@model List<jak.formulaire.Models.SubEventsLines>
<table id="SubEventstables" class="display col-12">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Status</th>
<th scope="col">Fee</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<div>
<tr>
<td>@item.SubEvent_Name</td>
<td>@item.SubEvent_Date</td>
<td>@item.SubEvent_Status</td>
<td>@item.SubEvent_Fee</td>
</tr>
</div>
}
</tbody>
</table>
Методы контроллера
[Authorize]
[HttpGet]
public async Task<ActionResult> Index()
{
ViewBag.sessionv = HttpContext.Session.GetInt32("idMember");
FileMakerRestClient client = new FileMakerRestClient(serverName, fileName, userName, password);
var toFind = new EventsLines { Zkf_CTC = 1053 };
var results = await client.FindAsync(toFind);
var xtoFind = new SubEventsLines { Zkf_CTC = 1053 };
var xresults = await client.FindAsync(xtoFind);
EventViewModel oEventViewModel = new EventViewModel
{
_EventsLines = (from o in results select o).ToList(),
_SubEventsLines = (from x in xresults select x).ToList()
};
return View(oEventViewModel);
}
[Authorize]
[HttpGet]
public async Task<ActionResult> GetEventsDetails(int id)
{
ViewBag.sessionv = HttpContext.Session.GetInt32("idMember");
FileMakerRestClient client = new FileMakerRestClient(serverName, fileName, userName, password);
var toFind = new EventsLines { Zkp = id };
var results = await client.FindAsync(toFind);
bool isEmpty = !results.Any();
if (isEmpty)
{
return View();
}
EventsLines oEventViewModel = new EventsLines();
oEventViewModel = results.ToList().First();
return PartialView(oEventViewModel);
}
[Authorize]
[HttpGet]
public async Task<ActionResult> GetSubEventsDetails(int id)
{
ViewBag.sessionv = HttpContext.Session.GetInt32("idMember");
FileMakerRestClient client = new FileMakerRestClient(serverName, fileName, userName, password);
var toFind = new SubEventsLines { Zkf_CTC = 1053, Zkf_EVL = id };
var results = await client.FindAsync(toFind);
bool isEmpty = !results.Any();
if (isEmpty)
{
return View();
}
List<SubEventsLines> oEventViewModel = new List<SubEventsLines>();
oEventViewModel = results.ToList();
return PartialView(oEventViewModel);
}
}
}