-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.cshtml
73 lines (64 loc) · 2.3 KB
/
Index.cshtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
@model HomeViewModel
<div class="text-center mb-3">
<h1 class="display-4">Cascading Dropdown Lists Demo</h1>
</div>
<div class="my-2 col-md-5">
<p>
Change the left dropdown to see the Cascade in the right dropdown.
This can be chained for multiple dropdowns.
</p>
</div>
<form>
<div class="row">
<div class="col-2 form-group">
<select asp-for="SelectedLesson.CourseLevelId" class="form-select" id="courseLevelId"
asp-items="@Model.CourseLevelList">
</select>
</div>
<div class="col-2 form-group">
<select asp-for="SelectedLesson.Id" class="form-select" id="lessonId"></select>
</div>
<div class="mt-2">
<div class="col-2 form-group">
<button type="button" class="btn btn-primary form-control">Submit</button>
</div>
</div>
</div>
</form>
<div class="my-2">
<p>Check the browser Console to view the server response.</p>
</div>
@section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
getLessonsListByCourseLevelId();
});
// Remember to type the selectors correctly in jQuery or it won't work.
// On each new selection you make in the CourseLevel Dropdown,
// the event is invoked
$("#courseLevelId").change(function () {
getLessonsListByCourseLevelId();
});
// AJAX call to Action for fetching lessons according to CourseLevel ID
var getLessonsListByCourseLevelId = function () {
$.ajax({
// Pass in Query Path by concatenation
url: 'lessons/' + $('#courseLevelId').val(),
type: 'GET',
// Note: The data field will pass parameters in the "Query Params", not in "Query Path"
//data: {
// levelId: $('#courseLevelId').val()
//}
success: function (data) {
console.log(data);
// Removing all existing options in dropdown and loading with data from Action
$('#lessonId').find('option').remove();
$(data).each(function (index, item) {
$('#lessonId').append('<option value="' + item.lessonId + '">' + item.lessonName + '</option>');
});
}
});
}
</script>
}