CRUD - 创建选择下拉列表自动填充另一个输入框 ASP.NET Razor Pages

Question

我正在尝试在 Excel 中创建类似于组合框的内容。选择站点将自动选择 JobNum 和 Manager。 Site、JobNum 和 Manager 来自名为 master 的单独表。目前在我正在尝试做的创建表单中，它们都是从数据库主表中提取的下拉列表。

编辑 - 忘了提到主表有一个简单的 ID，只是从 1 开始的增量。添加了一张图片，说明它在数据库中的外观

This is how it currently looks

Master table

How I want it to be - selecting site, autofills the bottom two

Master Table from DB showing all columns

选择列表代码：

        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>

编辑了@StriplingWarrior 所说的内容，一个错字。

Answer 1

在.cshtml.cs 页面中，您可以创建a handler method 以根据所选站点检索数据。然后，在.cshtml页面，可以附加DropDownListonchange事件，在该事件中，获取DropDownList选择值，使用JQuery.Ajax调用Handler方法，获取相关的JobNum和Manager，然后，设置文本框值。

更多详细信息，请参考以下示例：

创建以下模型：

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

数据库上下文：

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

迁移并添加数据后，Masters表如下：

.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=GetJobNumManager&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>
    }

结果如下：