Как добавить выбор с помощью помощника тега asp-item - PullRequest
Новая
       11

Как добавить выбор с помощью помощника тега asp-item

0 голосов
/ 24 октября 2019

У меня есть функциональность, где я добавляю выбранный HTML при нажатии кнопки с помощью jQuery. У меня уже есть выбор, который использует помощник тега asp-item, чтобы заполнить его моей соответствующей моделью. Я использую платформу asp-net core 2.2, и для своей страницы я использую бритву.

Мой вопрос: как мне отредактировать мой jQuery, чтобы при нажатии на кнопку asp-элемент уже загружался в select?

Вот мой код jQuery: 

$("#AddButton").click(function () {
    tc = tc + 1;
    $("#totalContacts").val(tc)
    $(".addselection").append('<div> <select class="form-control" name="[' + (tc) + '].DriverID" asp-for="TripDrivers.DriverID" asp-items="Model.DriverList" > <option value = ""> Select a driver </option></select></div>')
 });

и это мой OnGet для загрузки предметов 

public IActionResult OnGet()
{

    DriverList = _context.Drivers.Select(a =>
                              new SelectListItem
                              {
                                  Value = a.ID.ToString(),
                                  Text = a.FullName
                              }).ToList();
}

Это мой первый вопрос, так что, пожалуйста, потерпите меня, если есть какие-либо грамматические ошибки или недостающая информация. Я добавлю их, если необходимо.

РЕДАКТИРОВАТЬ: Вот дизайн, который я пытаюсь сделать.

После нажатия кнопки плюса. В него должен быть добавлен ряд выпадающего списка, в котором каждый параметр загружается из списка метода OnGet.

ДРУГОЕ РЕДАКТИРОВАНИЕ: в соответствии с инструкциями пользователя @itminus я создал одну страницу примера и частичное представление дляпримените приведенный ниже код.

Вот как выглядит мой FirstPage.cshtml 

@page
@model MasigasigTrackingSystem.Pages.TestingPages.FirstPageModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>FirstPage</title>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script>
        $("#AddButton").click(function () {
            tc = tc + 1;
            $("#totalContacts").val(tc)
            $.ajax('?handler=DropdownList', {
                method: "GET",
                data: { tc: tc },
                success: function (d) { $(".addselection").append(d); }
            });
        });
    </script>

</head>
<body>
    <button id="AddButton" class="btn" type="button">+</button>
    @*<select asp-for="Mode" asp-items="Model.DropdownListViewModel.Drivers" class="form-control">
        <option value="">Select a driver</option>
    </select>*@
    <div class="addselection">
        <partial name="_SecondPage.cshtml" />
    </div>
</body>
</html>

My FirstPageModel 

namespace MasigasigTrackingSystem.Pages.TestingPages
{
    public class FirstPageModel : PageModel
    {
        private readonly MasigasigTrackingSystem.Data.ApplicationDBContext _context;

        public FirstPageModel(MasigasigTrackingSystem.Data.ApplicationDBContext context)
        {
            _context = context;
        }

        [BindProperty]
        public Drivers Drivers { get; set; }

        public List<SelectListItem> DriverList { get; set; }

        [BindProperty]
        public DropdownListViewModel DropdownListViewModel { get; set; }

        public void OnGet()
        {
            DriverList = _context.Drivers.Select(a =>
                              new SelectListItem
                              {
                                  Value = a.ID.ToString(),
                                  Text = a.FullName
                              }).ToList();

            DropdownListViewModel = new DropdownListViewModel();

            DropdownListViewModel.Drivers = DriverList;
        }

        public IActionResult OnGetDropdownListAsync(int tc)
        {
            var list = _context.Drivers.Select(a => new SelectListItem
            {
                Value = a.ID.ToString(),
                Text = a.FullName,
            }).ToList();  // or filter by Where( ... tc...).ToList()
            return Partial("/Pages/TestingPages/_SecondPage.cshtml", new DropdownListViewModel
            {
                Drivers = list,
                ID = tc,
            });
        }
    }
}

Мой частичный _SecondPage 

@using MasigasigTrackingSystem.Models
@model DropdownListViewModel

<div>
    <select class="form-control dropdown" name="[@Model.ID].DriverID" asp-items="@Model.Drivers">
        <option> Select a driver </option>
    </select>
</div>

Мой DropdownlistViewModel 

namespace MasigasigTrackingSystem.Models
{
    public class DropdownListViewModel
    {
        public int ID { get; set; }
        public IList<SelectListItem> Drivers { get; set; }
    }
}

1 Ответ

0 голосов
/ 24 октября 2019

Вот демонстрационная программа, которая динамически получает частичное представление с сервера.

  1. Создание обработчика OnGetDropdownListAsync(int tc) в вашей модели страницы: 

    public class YourPageModel : PageModel
{
    ... other handler methods, e.g. OnGet() render the Index

    public IActionResult OnGetDropdownListAsync(int tc)
    {
        var list = _context.Drivers.Select(a =>new SelectListItem{
            Value = a.ID.ToString(),
            Text = a.FullName,
        }).ToList();  // or filter by Where( ... tc...).ToList()
        return Partial( "/Pages/Shared/Selection.cshtml" , new DropdownListViewModel{
            Drivers = list,
            Index = tc,
        });
    }
}

    Здесь DropdownListViewModel представляет собой простой ViewModel, содержащий данные: 

    public class DropdownListViewModel{
    public IList<SelectListItem> Drivers{get;set;}
    public int Index {get;set;}
}

  2. Переместите исходный HTML-фрагмент в jQuery в новый файл частичного просмотра: /Pages/Shared/Selection.cshtml 

    @using App.Pages
@model DropdownListViewModel

<div> 
    <select class="form-control dropdown" name="[@Model.Index].DriverID" asp-items="@Model.Drivers">
        <option> Select a driver </option>
    </select>
</div>

  3. Наконец, измените JavaScript, чтобы отправить запрос ajax, и обновите интерфейс следующим образом: 

    $("#AddButton").click(function () {
    tc = tc + 1;
    $("#totalContacts").val(tc)
    $.ajax('?handler=DropdownList',{
        method:"GET",
        data:{ tc: tc },
        success:function(d){ $(".addselection").append(d); }
    });
});

[Редактировать]

  1. Вы неявно передаете правильные ViewData в <partial>, что приводит к ошибке этого типа. Вам нужно изменить его на: 

    <partial name="/Pages/TestingPages/_SecondPage.cshtml" model="@Model.DropdownListViewModel" />

  2. Вы ссылаетесь на тонкий jQuery, который не имеет ajax. Пожалуйста, измените script на <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>.

  3. Вы связываете событие для #AddButton до создания этого элемента. Вам нужно обернуть JS в $(document).ready(function(){ .... }. Вы также можете создать script вручную после элемента #AddButton. Или введите <script> в @section Scripts{}, если вы используете значение по умолчанию Layout, которое позволит скрипту вступить в силу после загрузки страницы.
  4. Также вы не инициализировали переменную tc.

Короче, вам нужно исправить ошибки, как показано ниже: 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
        var tc = 0;
        $("#AddButton").click(function () {
            tc = tc + 1;
            $("#totalContacts").val(tc)
            $.ajax('?handler=DropdownList', {
                method: "GET",
                data: { tc: tc },
                success: function (d) { $(".addselection").append(d); }
            });
        });
    });
</script>

...

<div class="addselection">
    <partial name="/Pages/TestingPages/_SecondPage.cshtml" model="@Model.DropdownListViewModel" />
</div
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...