Блог

Я пытаюсь создать что-то вроде поля со списком в excel. При выборе Сайта будет автоматически выбран номер вакансии и Менеджер. Сайт, JobNum и менеджер находятся в отдельной таблице, называемой master. В настоящее время в форме создания, которую я пытаюсь выполнить, все они представляют собой выпадающий список, который извлекается из главной таблицы бд.

Редактировать — Забыл упомянуть, что главная таблица имеет простой идентификатор, просто добавочный от 1. Добавлено изображение того, как оно выглядит из БД

Вот как это выглядит в настоящее время

Главный стол

Как я хочу, чтобы это было — выбрав сайт, автоматически заполните два нижних

Главная таблица из базы данных, показывающая все столбцы

Код для списка избранных:

         public SelectList PYSiteSL { get; set; }
        public SelectList PYManagerSL { get; set; }
        public SelectList PYJobNumSL { get; set; }

        public void PopulateSiteDropDownList(FinanceAppARContext _context, object selectedSiteList = null)
        {
            var siteQuery = from s in _context.master
                            select s.Site;
            PYSiteSL = new SelectList(siteQuery.Distinct().AsNoTracking(), selectedSiteList);
        }
        public void PopulateManagerDropDownList(FinanceAppARContext _context, object selectedManagerList = null)
        {
            var managerQuery = from m in _context.master
                               select m.Manager;
            PYManagerSL = new SelectList(managerQuery.Distinct().AsNoTracking(), selectedManagerList);
        }

        public void PopulateJobNumDropDownList(FinanceAppARContext _context, object selectedJobNumList = null)
        {
            var jobnumQuery = from j in _context.master
                              select j.JobNum;
            PYJobNumSL = new SelectList(jobnumQuery.Distinct().AsNoTracking(), selectedJobNumList);
        }


        private readonly FinanceApp.Models.FinanceAppARContext _context;

        public CreateModel(FinanceApp.Models.FinanceAppARContext context)
        {
            _context = context;
        }

        public IActionResult OnGet()
        {
            PopulateSiteDropDownList(_context, PYSiteSL);
            PopulateManagerDropDownList(_context, PYManagerSL);
            PopulateJobNumDropDownList(_context, PYJobNumSL);

            return Page();
        }

 

а это интерфейс .cshtml

 //Site
            <div class="form-group">
                <label asp-for="py21.Sites" class="control-label"></label>
                <select asp-for="py21.Sites" asp-items="Model.PYSiteSL" class="form-control chosen-select"><option disabled selected>-- Select Site --</option></select>
                <span asp-validation-for="py21.Sites" class="text-danger"></span>
            </div>
//Manager
            <div class="form-group">
                <label asp-for="py21.Manager" class="control-label"></label>
                <input asp-for="py21.Manager" class="form-control" readonly />
                @*<select asp-for="py21.Manager" asp-items="Model.PYManagerSL" class="form-control chosen-select"><option disabled selected>-- Select Manager --</option></select>*@
                <span asp-validation-for="py21.Manager" class="text-danger"></span>
            </div>
//JobNum
            <div class="form-group">
                <label asp-for="py21.JobNum" class="control-label"></label>
                <input asp-for="py21.JobNum" class="form-control" readonly />
                @*<select asp-for="py21.JobNum" asp-items="Model.PYJobNumSL" class="form-control chosen-select"><option disabled selected>-- Select Job Number --</option></select>*@
                <span asp-validation-for="py21.JobNum" class="text-danger"></span>
            </div>
 

Отредактировал то, что сказал @Stripling Warrior, опечатка.

На этой .cshtml.cs странице вы можете создать метод обработчика для извлечения данных на основе выбранного сайта. Затем на .cshtml странице вы можете прикрепить onchange событие выпадающего списка, в этом случае получите выбранное значение выпадающего списка и используйте JQuery.Ajax его для вызова метода обработчика и получения соответствующего номера задания и менеджера, затем установите значение текстового поля.

Для получения более подробной информации, пожалуйста, обратитесь к следующему образцу:

Создайте следующие модели:

 public class PYViewModel //page view model
{
    public string Sites { get; set; }
    public string Manager { get; set; }
    public string JobNum { get; set; }
}

public class MasterModel //EF entity
{
    [Key]
    public string JobNum { get; set; }
    public string Site { get; set; }
    public string Manager { get; set; }
    public bool IsActive { get; set; }
}
 

DbContext:

 public class ApplicationDbContext : IdentityDbContext
{  
    public DbSet<MasterModel> Masters { get; set; }
    public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
        : base(options)
    {
    }
}
 

После переноса и добавления данных, основная таблица, как показано ниже:

страница .cshtml.cs:

 public class PYPageModel : PageModel
{
    [BindProperty]
    public PYViewModel py21 { get; set; }
    public SelectList PYSiteSL { get; set; }  
    //you could change the applicationdbcontext to yours.
    private readonly ApplicationDbContext _context;
    public PYPageModel(ApplicationDbContext context)
    { 
        _context = context;
    }
    public void OnGet()
    { 
        //query the master table.
        PYSiteSL = new SelectList(_context.Masters.Distinct().ToList(), nameof(MasterModel.Site), nameof(MasterModel.Site));
    }
    public JsonResult OnGetGetJobNumManager(string selectSite)
    {
        //based on the selected site to filter data.
        return new JsonResult(_context.Masters.Distinct().Where(c=>c.Site == selectSite).Distinct().ToList());
    }
}
 

.страница cshtml:

 @page
@model RazorPageSample.Pages.PYPageModel
<form method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="py21.Sites" class="control-label"></label>
        <select asp-for="py21.Sites" asp-items="Model.PYSiteSL" id="ddlsite" class="form-control chosen-select"><option disabled selected>-- Select Site --</option></select>
        <span asp-validation-for="py21.Sites" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="py21.Manager" class="control-label"></label>
        <input asp-for="py21.Manager" class="form-control" readonly />
        @*<select asp-for="py21.Manager" asp-items="Model.PYManagerSL" class="form-control chosen-select"><option disabled selected>-- Select Manager --</option></select>*@
        <span asp-validation-for="py21.Manager" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="py21.JobNum" class="control-label"></label>
        <input asp-for="py21.JobNum" class="form-control" readonly />
        @*<select asp-for="py21.JobNum" asp-items="Model.PYJobNumSL" class="form-control chosen-select"><option disabled selected>-- Select Job Number --</option></select>*@
        <span asp-validation-for="py21.JobNum" class="text-danger"></span>
    </div>
</form>
    @section Scripts{
        <script>
            $(function () {
                $("#ddlsite").on("change", function () {
                    var site = $(this).val();
                    $.ajax({
                        url: `?handler=GetJobNumManageramp;selectSite=${site}`, 
                        type: 'Get', 
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        },
                        success: function (result) {
                            var manager = [];
                            var JobNum = [];
                            $.each(result, function (i, item) {
                                manager.push(item.manager);
                                JobNum.push(item.jobNum);
                            }); 
                            $("#py21_Manager").val(manager.join(","));
                            $("#py21_JobNum").val(JobNum.join(","));
                        }, 
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                });
            });
        </script>
    }
 

Результат, как показано ниже: