Question

这是我的目标：

我有一个'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 ..当我刷新页面并再次打开模式...

Answer 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);

尝试加载包含模式中不同对象的2个列表的模型

1 个答案: