更改下拉列表 ASP.NET CORE答案

【问题标题】：Changing Drop down list ASP.NET CORE更改下拉列表 ASP.NET CORE
【发布时间】：2020-08-12 06:11:16
【问题描述】：

我正在使用带有 SQL 服务器的 ASP.NET CORE。

我有 2 张桌子：Review 和 WorkSchedule。 WorkSchedule 表包含 ManagerID 和 StaffID。 Review 表包含 ReviewerID 和 RevieweeID。 ManagerID,StaffID,ReviewerID和RevieweeID是Staff表中StaffID的外键。

例如，如果我在CreateReview 页面中创建新评论，我将手动设置ReviewerID 和RevieweeID。我想让WorkScheduleID 下拉菜单自动更改，以便WorkScheduleID 出现在ManagerID = ReviewerID 和StaffID = RevieweeID 的位置

型号：

namespace Starbucks.Models
{
    public class ReviewModel
    {
        [Key]
        [Display(Name = "Review ID")]
        public Guid ReviewID { get; set; }


        [Display(Name = "Reviewer")]
        public Guid ReviewerID { get; set; }
        [ForeignKey("ReviewerID")]
        public StaffModel Staff { get; set; }


        [Display(Name = "Reviewee")]
        public Nullable<Guid> RevieweeID { get; set; }
        [ForeignKey("RevieweeID")]
        public StaffModel Staffs { get; set; }


        [Display(Name = "WorkSchedule ID")]
        public Nullable<Guid> WorkScheduleID { get; set; }
        [ForeignKey("WorkScheduleID")]
        public WorkScheduleModel WorkSchedules { get; set; }
    }


    public class WorkScheduleModel
    {

        [Key]
        [Display(Name = "Work Schedule ID")]
        public Guid WorkScheduleID { get; set; }


        [Display(Name = "Staff ID")]
        public Nullable<Guid> StaffID { get; set; }
        [ForeignKey("StaffID")] 
        public StaffModel Staffs { get; set; }



        [Display(Name = "Manager ID")]
        public Guid ManagerID { get; set; }
        [ForeignKey("ManagerID")]
        public StaffModel Staff { get; set; }
    }
}

控制器：

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> CreateReview([Bind("ReviewID,ReviewCategoryID,ReviewRating,ReviewComment,ReviewDateTime,ReviewerID,RevieweeID,WorkScheduleID")] ReviewModel reviewModel)
        {
            if (ModelState.IsValid)
            {      
                reviewModel.ReviewID = Guid.NewGuid();
                reviewModel.ReviewDateTime = DateTime.Now;
                _context.Add(reviewModel);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(ProfilePage));
            }
            ViewData["RevieweeID"] = new SelectList(_context.Staff, "StaffID", "StaffName", reviewModel.RevieweeID);
            ViewData["ReviewerID"] = new SelectList(_context.Staff, "StaffID", "StaffName", reviewModel.ReviewerID);
            ViewData["WorkScheduleID"] = new SelectList(_context.WorkSchedule, "WorkScheduleID", "WorkScheduleID");
            return View(reviewModel);
        }

查看页面：

<body>
    <div class="row">
        <div class="col-md-8">
            <form asp-action="CreateReview">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>                
                <div class="form-group">
                    <label asp-for="ReviewerID" class="control-label"></label>
                    <select asp-for="ReviewerID" class="form-control" asp-items="ViewBag.ReviewerID"></select>
                </div>
                <div class="form-group">
                    <label asp-for="RevieweeID" class="control-label"></label>
                    <select asp-for="RevieweeID" class="form-control" asp-items="ViewBag.RevieweeID"></select>
                </div>
                <div class="form-group">
                    <label asp-for="WorkScheduleID" class="control-label"></label>
                    <select asp-for="WorkScheduleID" class="form-control" asp-items="ViewBag.WorkScheduleID"></select>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <input type="submit" value="Save" class="btn btn-primary btn-block" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

【问题讨论】：

标签： c# asp.net-core model-view-controller entity-framework-core dropdown

【解决方案1】：

您可以创建一个过滤数据的方法，并使用 ajax 调用它，然后使用返回的数据填充选择列表。

控制器：

public IActionResult Index()
{

    ViewData["RevieweeID"] = new SelectList(_context.Staff, "StaffID", "StaffName");
    ViewData["ReviewerID"] = new SelectList(_context.Staff, "StaffID", "StaffName");
    ViewData["WorkScheduleID"] = new SelectList(_context.WorkSchedule, "WorkScheduleID", "WorkScheduleID");
    return View();
}

[HttpGet]
public IActionResult FilterWorkScheduleID(Guid reviewerid, Guid revieweeid)
{
    var WorkScheduleIDs = _context.WorkSchedule.Where(x => x.StaffID == revieweeid && x.ManagerID == reviewerid).ToList();
    return Json(new { items = WorkScheduleIDs });
}

查看：

@model ReviewModel
@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

<div class="row">
    <div class="col-md-8">
        <form asp-action="CreateReview">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ReviewerID" class="control-label"></label>
                <select asp-for="ReviewerID" class="form-control" asp-items="ViewBag.ReviewerID"></select>
            </div>
            <div class="form-group">
                <label asp-for="RevieweeID" class="control-label"></label>
                <select asp-for="RevieweeID" class="form-control" asp-items="ViewBag.RevieweeID"></select>
            </div>
            <div class="form-group">
                <label asp-for="WorkScheduleID" class="control-label"></label>
                <select asp-for="WorkScheduleID" class="form-control" asp-items="ViewBag.WorkScheduleID"></select>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input type="submit" value="Save" class="btn btn-primary btn-block" />
                </div>
            </div>
        </form>
    </div>
</div>

@section scripts{ 
    <script>
        $("select").on("change", function () {
            var reviewerID = $("#ReviewerID").find(":selected").val();
            var revieweeID = $("#RevieweeID").find(":selected").val();
            $.ajax({
                type: 'get',
                url: '/Staff/FilterWorkScheduleID',
                data: {
                    reviewerid: reviewerID,
                    revieweeid:revieweeID
                },
                success: function (result) {
                    $("#WorkScheduleID").empty();
                    $.each(result.items, function (i, obj) {
                        var option = "<option value=" + obj.workScheduleID + ">" + obj.workScheduleID + "</option>";
                        $(option).appendTo("#WorkScheduleID"); 
                    })
                
                }
            })
        })
    </script>
}

结果：

【讨论】：