Разбить большой список объектов на ASP. NET Razor view - PullRequest
Новая
       40

Разбить большой список объектов на ASP. NET Razor view

2 голосов
/ 04 марта 2020

У меня есть представление в моем проекте, которое позволяет пользователю вводить данные для нескольких записей одновременно. Контроллер передает список объектов в представление, и у меня есть библиотека jquery -steps. js для разбивки на страницы. Однако эта библиотека мертва и не разрабатывается. Это также очень медленно при рендеринге вида. Вот как выглядит вид сейчас.

Каждая страница - это новая модель, которая передается в контроллер. Он представлен в виде списка, который повторяется.

This is an example of the current view

Модель для представления 

public class AddDrinkingWaterModel 
    {
        public AlertModel Alert { get; set; }
        public int SID { get; set; }
        public int? LocationId { get; set; }
        public int? Replicate { get; set; }
        public bool TransferPumpRunning { get; set; }
        public DateTime? CollectionDate { get; set; }
        public TimeSpan? CollectionTime { get; set; }
        public string Collectors { get; set; }
        public string Chlorinated { get; set; }
    //other properties
    }

Контроллер GET способ заполнения представления (упрощенно): 

public async Task<ActionResult> AddMultiDrinkingWaterLog(AlertModel alert)
        {
            var sampleList = (from s in await Context.SampleLog
                              where s.FPProgram.Program == ("Drinking Water") 
                              && !s.FPDrinkingWater.Any(m => (m.SID == s.SID))
                              select s.SID).ToList();

            var locations = from a in await Context.FPDrinkingWaterLocations
                            orderby a.Location
                            select new SelectListItem
                            {
                                Text = a.Location,
                                Value = a.Id.ToString()
                            };

            var modelCollection = sampleList.Select(s => new AddDrinkingWaterModel
            {
                Data = new List<int> { s },
                Locations = new SelectList(locations, "Value", "Text")
            }).ToList();               

            return PartialView("_AddDrinkingWaterModal", modelCollection);
        }

И представление 

@model List<MyApplication.Areas.FP.Models.AddDrinkingWaterModel>

@{
    Layout = null;
}
<div class="modal-body">
     @using (Ajax.BeginForm(actionName: action, routeValues: null, htmlAttributes: new { id = "steps-form", @class = "form-horizontal" }, ajaxOptions: new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "DrinkingWatersContent",
        OnSuccess = "closeModal",
        LoadingElementId = ajax
    }))
    {
        if (Model.Count() > 0)
       {
        @Html.AntiForgeryToken()
           for (int i = 0; i < Model.Count; i++)
           {
            <h3>@Html.DisplayFor(m => m[i].Data) </h3>
            <div style="display: none;">@Html.EditorFor(m => m[i].Data)</div>

            <section>
            <div class="form-group">
                    @Html.LabelFor(m => m[i].LocationId, "Location", new { @class = "col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label" })
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                   @Html.DropDownListFor(m => m[i].LocationId, new SelectList(Model[i].Locations, "Value", "Text"), "Select location", new { @class = "form-control select-chosen" })
                    </div>
                </div>
    //other properties left out for brevity
    }
 }
</div>
 <script>
    $('#steps-form').steps({
        headerTag: "h3",
        bodyTag: "section",
        enableAllSteps: true,
        showFinishButtonAlways: true,
        enableKeyNavigation: true,
        enableCancelButton: true,
        stepsOrientation: "vertical",
        transitionEffect: "slide",
        titleTemplate: '#title#',
        labels: {
            finish: "Submit"
        },
        onCanceled: function (event) {
            var modal = $(this).closest('.modal');
            modal.modal('hide');
            clearModal(modal);
        },
        onFinished: () => $("form#steps-form").submit()
    });
</script>

В файле _Layout.cs html у меня есть ссылки на jquery - шаги css и js файлы.

Что может быть более эффективной альтернативой библиотеке jquery -шагов, которая бы достигла sh, как я хочу создать это представление? Может быть, есть другой шаблон дизайна, который проще и эффективнее, чем я, возможно, пропускаю? Или это что-то простое, например, создание html помощника в javascript, который обрабатывает все это?

...