Question

这是我的目标：

我有一个'EventViewModel'类，其中包含列表<_EventsLine>和列表<_SubEventsLine>。
我显示成员的所有事件的列表（根据成员的ID）。
如果用户单击事件的名称，则会打开一个模式，该模式必须显示该事件的详细信息（在模式的上部）以及一个列出该成员已注册到的所有子事件的表。
我设法实现了几乎所有目标，但我错过了最后一步：在模式中显示子事件列表。

对于模态中的事件，我确实有局部视图，对于模态中的表（子事件），我也具有局部视图。

当前，模态打开并显示顶部或底部，但不能同时显示两者。我真正不明白的是，有时我会刷新页面，并且只显示顶部（带有事件详细信息），而当我再次刷新页面时，它将显示底部（带有子事件详细信息，但没有显示卡），它仅显示表格。

我真的迷失在这里，因为我不明白有时显示一个局部视图而有时显示第二个局部视图的可能性。

我想我错过了一些东西，但我是初学者...

我目前愿意接受任何可以帮助我的人。

有猜到吗？

加载时

有时会显示事件详细信息

有时会显示子事件的详细信息

索引视图

@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">&times;</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>

子事件的局部视图详细信息

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

在同一模式下显示2个不同的视图

0 个答案: