javascript - 尝试加载一个模型，该模型包含模式中的 2 个不同对象列表

Question

这是我的目标:

1. 我有一个“EventViewModel”类，其中包含一个列表 <_EventsLine> 和一个列表 <_SubEventsLine>。
2. 我显示一个成员的所有事件列表(根据成员的id)。
3. 如果用户单击事件名称，将打开一个模态框，其中必须显示事件的详细信息(在模态框的上部)和一个列出成员(member)注册的所有子事件的表格.

我设法实现了几乎所有目标，但我错过了最后一步:在模态中显示子事件列表。

我确实有模态中事件详细信息的局部 View ，我还有模态中表格(子事件)的第二个局部 View 。

当前模式打开并显示顶部部分但不显示包含子事件的表格，我在 Chrome 调试器上收到错误 500。我认为这个错误必须与我的 View 代码有关，但我不知道如何解决它

你有什么想法吗？

Controller

[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();
        }

        IList<SubEventsLines> oEventViewModel = new List<SubEventsLines>();
        oEventViewModel = results.ToList();

        return PartialView(oEventViewModel);
    }

查看

@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 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="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%">

                                    </div>
                                    <table id="SubEventsDatatables" 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._EventsLines)
                                            {
                                            <div>
                                                { Html.RenderPartial("GetEventsDetails", item); }
                                            </div>
                                            }
                                        </tbody>
                                    </table>
                            </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", userId); }

                                    </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");

            // 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) {

                 //$('#myModal').find('.modal-title').text("Details ");

                 $.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>
    }
                // 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) {

                     //$('#myModal').find('.modal-title').text("Details ");

                     $.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>
        }

_EventLines 的部分 View

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

带有 _SubEventLines 的表格的部分 View

@model 列表

@foreach(模型中的变量项){

    <tr>
        <td>@item.SubEvent_Name</td>
        <td>@item.SubEvent_Date</td>
        <td>@item.SubEvent_Status</td>
        <td>@item.SubEvent_Fee</td>
    </tr>

加载中

有时我只看到事件:

有时我只看到 SubEvent.. 就在我刷新页面并再次打开模式时...

Answer 1

在模态视图中将子事件详细信息更改为以下内容:

     <div class="card-header"><h6>Sub-Events</h6></div>
          <div class="card-body">

              { Html.RenderPartial("GetSubEventsDetails", userId); }

           </div>
      </div>

及以下部分 View

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

在下面更改 GetSubEventDetails 操作方法

  IList<SubEventsLines> oEventViewModel = new List<SubEventsLines>();

  oEventViewModel = results.ToList();

  return PartialView(oEventViewModel);