2 модели для одного просмотра и конвертация не работает - PullRequest
0 голосов
/ 28 ноября 2018

Мне нужно переключить две разные модели в одном представлении.

Для этого я создал класс, который содержит мои два "подкласса" моих моделей.

Пока все хорошо, мойпроблема заключается в преобразовании этих классов в .ToList(), у меня есть ошибка, которая говорит мне, что я не могу преобразовать List<Events> в Events (что я прекрасно понимаю).

За исключением этого, если в моем основномclass (EventViewModel) Я изменяю и говорю, что мои подклассы являются списками, тогда, когда я перехожу на мой взгляд, я не делаю parivens больше для доступа к элементам моих подклассов.

Действительно, у меня есть, например,@Html.LabelFor(model => model._Events.) За исключением того, что нет способа найти нужный элемент моего объекта, поскольку он представляет собой список.

Я по-прежнему указываю, что results имеет тип IEnumerable, а также что мне нужно восстановитьнесколько событий по запросу.

Для этого я использовал эту страницу ( Две модели в одном представлении в ASP MVC 3 ), особенно второй ответ.

Контроллер

[Authorize]
[HttpGet]
public async Task<ActionResult> Index()
{
    ViewBag.sessionv = HttpContext.Session.GetInt32("idMember");
    FileMakerRestClient client = new FileMakerRestClient(serverName, fileName, userName, password);
    var toFind = new Models.EventsLines { Zkf_CTC = 1053 };
    var results = await client.FindAsync(toFind);

    Models.EventViewModel oEventViewModel = new Models.EventViewModel
    {
        _EventsLines = (from o in results select o).ToList()
    };

    ViewBag.JsonList = oEventViewModel;

    return View(oEventViewModel);
}


[Authorize]
[HttpGet]
public async Task<ActionResult> GetEventsDetails(int Id_Event, int Id_CTC)
{
    ViewBag.sessionv = HttpContext.Session.GetInt32("idMember");
    FileMakerRestClient client = new FileMakerRestClient(serverName, fileName, userName, password);
    var toFind = new Models.SubEventsLines { Zkp_WEB_SEL = ViewBag.sessionv, Zkf_CTC = Id_CTC, Zkf_EVL = Id_Event };
    var results = await client.FindAsync(toFind);

    Models.EventViewModel oEventViewModel = new Models.EventViewModel
    {
        _SubEventsLines = (from o in results select o).ToList()
    };

    Console.WriteLine(oEventViewModel);

    return Json(oEventViewModel);
}

    public class EventViewModel
    {
        public Events _Events { get; set; }
        public SubEvents _SubEvents { get; set; }
    }



**View**


@model jak.formulaire.Models.EventViewModel

<div class="container">
    <div class="col-5" style="margin-top:2%">
        <h3>Registration History</h3>
        </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>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model._EventsLines)
                    {
                    <tr>
                        <td>@item.Event_Name</td>
                        <td>@item.Event_DateStart</td>
                        <td>@item.Event_DateEnd</td>
                        <td>@item.Event_Status</td>
                        <td><a href="#myModal" class="myModal" data-toggle="modal" data-target="#myModal" onclick="GetEventsDetails()" data-id="@item.Zkp">View Details</a></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="myModalTitle">Details : </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">
                                @foreach (var item in Model._EventsLines)
                                {
                                <div class="form-horizontal col-6" style="margin-left:-5%">

                                    @Html.HiddenFor(model => model._EventsLines.FirstOrDefault().Zkp, new { data_val = "false" })
                                    @Html.HiddenFor(model => model._EventsLines.FirstOrDefault().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>
                                        <input name="Event_StartDate" id="Event_StartDate" value="@item.Event_Name" class="form-control col-md-7" readonly="" />
                                        @*@Html.EditorFor(model => model._Events.FirstOrDefault().Event_Name, 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._EventsLines.FirstOrDefault().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._EventsLines.FirstOrDefault().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._EventsLines.FirstOrDefault().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._EventsLines.FirstOrDefault().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._EventsLines.FirstOrDefault().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._EventsLines.FirstOrDefault().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 class="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">
                                                <table id="SubEventsDatatables" class="display col-12">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">Name</th>
                                                            <th scope="col">Start Date</th>
                                                            <th scope="col">Status</th>
                                                            <th scope="col">Fees</th>
                                                        </tr>
                                                    </thead>
                                                </table>
                                            </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 the button, open the modal
            //btn.onclick = function () {
            //    modal.style.display = "block";
            //}

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

            ////triggered when modal is about to be shown
            //$('#myModal').on('show.bs.modal', function (e) {

            //    GetEventsDetails();

            //    //get data-id attribute of the clicked element
            //    var id = $(this).data('id');
            //    //populate the textbox
            //    $(e.currentTarget).find('input[name="Event_StartDate"]').val('id');

            //});

            //once the modal has been shown
            $('#myModal').on('shown.bs.modal', function () {
                //Get the datatable which has previously been initialized
                var dataTable = GetEventsDetails();
                //recalculate the dimensions
                dataTable.columns.adjust().responsive.recalc();

                //get data-id attribute of the clicked element
                var id = $(this).data('id');
                //populate the textbox
                $(e.currentTarget).find('input[name="Event_StartDate"]').val('id');

            });

            $(document).ready(function () {
            });

            //$(function () {
            //    $(".myModal").click(function () {
            //        var my_id = $(this).data('id');
            //        $(".modal-body #hiddenValue").val(my_id);
            //    })
            //});


            function GetEventsDetails() {
                return $('#SubEventsDatatables').DataTable({
                    "paging": false,
                    "ordering": false,
                    "searching": false,
                    "info": false,
                    processing: true,
                    ajax: {
                        "url": '@Url.Action("GetEventsDetails", "Events")' + "/" + 1053 + "/" + 1454,
                        "type": "GET",
                        "datatype": "json",
            succes: function (data) {
                $("#Name").val(data['Name_cU']);
                $("#Name").val(data['Date']);
                $("#Name").val(data['Status']);
                $("#Name").val(data['Fee_cU']);
            },

        },
        columns: [
            { "data": "Name_cU" },
            { "data": "Date" },
            { "data": "Status" },
            { "data": "Fee_cU" },
        ]

    });
}
        </script>
    }

1 Ответ

0 голосов
/ 28 ноября 2018

Исходя из вашего последнего комментария, вам просто нужно изменить свою EventViewModel на что-то вроде этого (хотя, похоже, вы уже сделали это):

public class EventViewModel
{
    public List<Events> _Events { get; set; }
    public List<SubEvents> _SubEvents { get; set; }
}

Затем, по вашему мнению, выможет просто сделать что-то вроде этого (но, очевидно, используя свойства типа _Events):

<table>
   <thead>
     <tr>
       <td>Name</td>
       <td>Start Date</td>
     </tr>
   </thead>
   <tbody>
    @foreach(var item in Model._Events)
    {
      <tr>
       <td>@item.Name</td>
       <td>@item.StartDate</td> 
      </tr>
    }
   </tbody>
</table>

EDIT

Я бы тогда предложил что-то подобное.Постройте таблицу, как я показал ранее (обновите, чтобы соответствовать вашей модели, насколько я могу).Используйте кнопку с атрибутом «data-», который содержит некоторый идентификатор для этого события.Используйте javascript , чтобы обрабатывать нажатие кнопки и вызывать метод на вашем контроллере, который получит вложенные события для выбранного события (даже вернет частичное представление).В функции успеха заполните html для модальных вложенных событий и отобразите модальные.Когда вы говорите «datatables», вы имеете в виду datatables.net?

<table id="example" class="table table-hover" style="width:100%; margin-top:2%">


<thead>
        <tr>
           <th></th>
           <th scope="col">Event Name</th>
           <th scope="col">Start Date</th>
           <th scope="col">End Date</th>
           <th scope="col">City</th>
           <th scope="col">Country</th>
           <th scope="col">Type</th>
           <th scope="col">Status</th>
           <th scope="col">Total Due</th>
         </tr>
        </thead>
<tbody>
    @foreach(var item in Model._Events)
    {
      <tr>
       <td><button data-id="@item.Id">View Details</button></td>
       <td>@item.Event_Name</td> 
       <td>@item.Event_DateStart</td> 
       <td>@item.Event_DateEnd</td> 
       <td>@item.Event_City</td> 
       <td>@item.Event_Country</td> 
       <td>@item.Event_Type</td> 
       <td>@item.Event_Status</td> 
       <td>@item.Event_TotalDue</td> 
      </tr>
    }
    </tbody>
     </table>

Возможно, вам лучше опубликовать новый вопрос (-ы) для достижения остальных целей.Надеюсь, это поможет вам двигаться в правильном направлении.

...