更改下拉列表 ASP.NET 核心
Changing Drop down list ASP.NET CORE
我正在使用 ASP.NET CORE 和 SQL 服务器。
我有 2 个 table:Review
和 WorkSchedule
。 WorkSchedule
table 包含 ManagerID
和 StaffID
。 Review
table 包含 ReviewerID
和 RevieweeID
。 ManagerID
、StaffID
、ReviewerID
和RevieweeID
是Staff
table.[=37=中StaffID
的外键]
例如,如果我在 CreateReview
页面中创建新评论,我将手动设置 ReviewerID
和 RevieweeID
。我想让 WorkScheduleID
下拉菜单自动更改,以便 WorkScheduleID
出现在 ManagerID
= ReviewerID
和 StaffID
= RevieweeID
[=37 的位置=]
型号:
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>
您可以创建一个方法来过滤数据,并使用 ajax 调用它,然后用返回的数据填充 select 列表。
控制器:
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>
}
结果:
我正在使用 ASP.NET CORE 和 SQL 服务器。
我有 2 个 table:Review
和 WorkSchedule
。 WorkSchedule
table 包含 ManagerID
和 StaffID
。 Review
table 包含 ReviewerID
和 RevieweeID
。 ManagerID
、StaffID
、ReviewerID
和RevieweeID
是Staff
table.[=37=中StaffID
的外键]
例如,如果我在 CreateReview
页面中创建新评论,我将手动设置 ReviewerID
和 RevieweeID
。我想让 WorkScheduleID
下拉菜单自动更改,以便 WorkScheduleID
出现在 ManagerID
= ReviewerID
和 StaffID
= RevieweeID
[=37 的位置=]
型号:
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>
您可以创建一个方法来过滤数据,并使用 ajax 调用它,然后用返回的数据填充 select 列表。
控制器:
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>
}
结果: