[英]Cascading drop down lists in .NET Core 6
I am just getting started with .NET Core 6 and VS2022.我刚刚开始使用 .NET Core 6 和 VS2022。 I've created a C# MVC website with Razor pages and have run into a problem.
我创建了一个带有 Razor 页面的 C# MVC 网站并遇到了问题。 I've no idea how I can produce cascading lists, I guess I need to setup an event handler and maybe subscribe.
我不知道如何生成级联列表,我想我需要设置一个事件处理程序并可能订阅。 Is AJAX still an appropriate method for solving this problem?
AJAX 仍然是解决这个问题的合适方法吗? I have seen JsonResult being returned from methods as a possible solution.
我已经看到从方法返回 JsonResult 作为一种可能的解决方案。 Can somebody please advise?
有人可以建议吗?
FYI, I have bound my lists fine using services and Entity Framework, all is working apart from this UI bit.仅供参考,我已经使用服务和实体框架很好地绑定了我的列表,除了这个 UI 位之外,所有这些都在工作。 Thanks.
谢谢。
HTML markup: HTML 标记:
<label>Course</label>
<select id="ddlCourse" name="ddlCourse">
@foreach (var row in Model.Courses)
{
<option value="@row.Id.ToString()">@row.Course</option>
}
</select>
<label>Course Distance</label>
<select id="ddlDistance" name="ddlDistance">
@foreach (var row in Model.MedianTimes)
{
<option value="@row.RowId">@row.Distance</option>
}
</select>
C# code in cshtml.cs: cshtml.cs 中的 C# 代码:
public List<Courses> Courses { get; set; }
public List<MedianTimes> MedianTimes { get; set; }
public void OnGet()
{
if (DataInMemoryCache.GetFromCache(_courseCacheKey) != null)
{
Courses = (List<Courses>)DataInMemoryCache.GetFromCache(_courseCacheKey);
}
else
{
Courses = _courseDbContext.Courses.ToList();
}
DataInMemoryCache.AddToCache(_courseCacheKey, Courses);
if (DataInMemoryCache.GetFromCache(_medianTimesCacheKey) != null)
{
MedianTimes = (List<MedianTimes>)DataInMemoryCache.GetFromCache(_medianTimesCacheKey);
}
else
{
MedianTimes = _medianTimesDbContext.MedianTimes.ToList();
}
DataInMemoryCache.AddToCache(_medianTimesCacheKey, MedianTimes);
}
Here is a working demo to produce cascading lists with js:这是一个使用 js 生成级联列表的工作演示:
cshtml: cshtml:
<label>Course</label>
<select id="ddlCourse" name="ddlCourse">
@foreach (var row in Model.Courses)
{
<option value="@row.Id.ToString()">@row.Course</option>
}
</select>
<label>Course Distance</label>
<select id="ddlDistance" name="ddlDistance">
@foreach (var row in Model.MedianTimes)
{
<option value="@row.RowId">@row.Distance</option>
}
</select>
@section Scripts{
<script>
$("#ddlCourse").change(function () {
$.getJSON("?handler=MedianTimes", { Id: $("#ddlCourse").val() }, function (data) {
var items = '';
$("#ddlDistance").empty();
$.each(data, function (index, MedianTimes) {
items += "<option value='" + MedianTimes.rowId + "'>" + MedianTimes.distance + "</option>";
});
$('#ddlDistance').html(items);
});
});
</script>
}
cshtml.cs: cshtml.cs:
public List<Courses> Courses { get; set; }
public List<MedianTimes> MedianTimes { get; set; }
public void OnGet()
{
if (DataInMemoryCache.GetFromCache(_courseCacheKey) != null)
{
Courses = (List<Courses>)DataInMemoryCache.GetFromCache(_courseCacheKey);
}
else
{
Courses = _courseDbContext.Courses.ToList();
}
DataInMemoryCache.AddToCache(_courseCacheKey, Courses);
if (DataInMemoryCache.GetFromCache(_medianTimesCacheKey) != null)
{
MedianTimes = (List<MedianTimes>)DataInMemoryCache.GetFromCache(_medianTimesCacheKey);
}
else
{
MedianTimes = _medianTimesDbContext.MedianTimes.ToList();
}
DataInMemoryCache.AddToCache(_medianTimesCacheKey, MedianTimes);
}
public JsonResult OnGetMedianTimes(int Id) {
//get MedianTimes with Id
//MedianTimes =.....
return new JsonResult(MedianTimes);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.