尝试在模态中加载包含 2 个不同对象列表的模型答案

【问题标题】：Trying to load a model that contains 2 lists of different objects in a modal尝试在模态中加载包含 2 个不同对象列表的模型
【发布时间】：2018-12-02 11:50:30
【问题描述】：

这是我的目标：

我有一个“EventViewModel”类，其中包含一个列表 <_eventsline> 和一个列表 <_subeventsline>。
我显示一个成员的所有事件列表（根据一个成员的id）。
如果用户单击事件的名称，将打开一个模式，并且必须显示事件的详细信息（在模式的上部）和一个表格，其中列出了会员注册的所有子事件.

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

我确实在模态中对事件的详细信息有一个部分视图，并且我对模态中的表（子事件）也有第二个部分视图。

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

你有什么想法吗？

控制器

[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 的部分视图

@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 的表格的部分视图

@模型列表

@foreach（模型中的变量项） {

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

}

加载时

有时我只看到事件：

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

【问题讨论】：

Model._SubEventsLines 是 _SubEventsLine 的列表。所以你在Partial View中的模型应该是@model jak.formulaire.Models.SubEventsLine 和GetSubEventsDetails动作方法的参数一样
我应该在 List 中转换“结果”吗？
已经有一个 for 循环，您正在为每个子事件调用局部视图。因此，您可以更改上面的代码以调用局部视图并将该循环带到您的局部视图，而不仅仅是一个 tr
谢谢！我试图将 foreach 保留在子事件的部分视图中，但我不工作。我可以做类似“@foreach（Model.SubEvent_Name 中的变量项）”之类的事情，因为我知道 SubEvent_Name 永远不会为空？
对于 EventLines，您的操作方法具有此代码 EventsLines oEventViewModel = new EventsLines(); oEventViewModel = results.ToList().First();。 SubEventLines 的方式相同，它必须像这样 SubEventsLines oSubEventViewModel = new SubEventsLines(); oSubEventViewModel = results.ToList();

标签： javascript c# jquery asp.net asp.net-mvc

【解决方案1】：

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

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

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

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

在 GetSubEventDetails 操作方法中更改以下内容

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

  oEventViewModel = results.ToList();

  return PartialView(oEventViewModel);

【讨论】：

它不起作用，因为模型（来自模型中的 => var 项）“不能使用 'SubEventsLines' 类型的变量，因为 'SubEventsLines' 不包含 'GetEnumerator' 的公共实例”。
SubEventLines 应该和 EventLines 类一样。因此，两者都应该通过 for 循环进行迭代。检查两个类的实现。
是的，我知道，但这正是不起作用的：/我刚刚做了：SubEventsLines oEventViewModel = new SubEventsLines(); oEventViewModel = results.ToList();但是 results.ToList() 以红色突出显示，并说“无法在 jak.formulaire.Models.SubEventsLines 中转换 System.Collections.Generic.List”。它适用于 EventsLines，因为我只有一个事件，所以我可以添加 .First() （所以它不是列表）。
我想我应该将 oEventViewModel 转换为列表，不是吗？
没问题。我修改了上面的代码。看看它是否有效:)