Здравствуйте!
Есть страница .cshtml, на которой прописаны несколько полей Select:
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.
@model voteCollector.Models.Friend
@{
ViewData["Title"] = "Create";
}
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions {
public string GetAntiXsrfRequestToken()
{
return Xsrf.GetAndStoreTokens(Context).RequestToken;
}
}
<hr />
<div class="row">
<input type="hidden" id="RequestVerificationToken"
name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-row">
<div class="form-group col-md-6">
<label asp-for="CityId" class="control-label"></label>
<select id="CityId" asp-for="CityId" class="form-control" asp-items="ViewBag.CityId"></select>
</div>
<div class="form-group col-md-6">
<label asp-for="StreetId" class="control-label"></label>
<select id="StreetId" asp-for="StreetId" class="form-control" asp-items="ViewBag.StreetId"></select>
</div>
<div id="divHouse" class="form-group col-md-6">
<label asp-for="HouseId" class="control-label"></label>
<select id="HouseId" asp-for="HouseId" class="form-control" asp-items="ViewBag.HouseId" style="width:100%"></select>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<input type="submit" value="Добавить" class="btn btn-primary btn-block" />
</div>
<div class="form-group col-md-6">
<a asp-action="Index" class="btn btn-secondary btn-block"><i class="fa fa-table"></i>Вернуться к списку</a>
</div>
</div>
</form>
</div>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
</environment>
@section Scripts {
<script type="text/javascript" src="~/js/JS_Create_Friend.js"></script>
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
@{
if (TempData["msg"] != null)
{
<script>
alert('@TempData["msg"]')
</script>
}
}
}
Поле "HouseId" зависит от "StreetId", а "StreetId" зависит от "CityId". Для их динамического обновления были написаны функции с ajax-запросами к серверу:
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.
// Обновление списка улиц после выбора города
$(function () {
$("#CityId").change(function () {
var formData = { 'CityId': Number.parseInt($('#CityId').val()), 'Name': $('#CityId>option:selected').text() };
$.ajax({
url: "http://localhost:18246/api/API/searchStreets",
headers:
{
'Accept': 'application/json',
'Content-Type': 'application/json',
'RequestVerificationToken': $('#RequestVerificationToken').val()
},
type: 'POST',
dataType: "json",
data: JSON.stringify(formData),
success: function (data) {
dataFilling(data, 'idStreet', 'name', '#StreetId', '<option/>');
},
error: function (result, status, er) {
alert("error: " + result + " status: " + status + " er:" + er);
}
});
});
});
// Обновление списка домов после выбора улицы
$(function () {
$("#StreetId").change(function () {
var formData = { 'IdStreet': Number.parseInt($('#StreetId').val()), 'Name': $('#StreetId>option:selected').text() };
$.ajax({
url: "http://localhost:18246/api/API/searchHouse",
headers:
{
'Accept': 'application/json',
'Content-Type': 'application/json',
'RequestVerificationToken': $('#RequestVerificationToken').val()
},
type: 'POST',
dataType: "json",
data: JSON.stringify(formData),
success: function (data) {
dataFilling(data, 'idHouse', 'name', '#HouseId', '<option/>');
},
error: function (result, status, er) {
alert("error: " + result + " status: " + status + " er:" + er);
}
});
});
});
//Заполнение объекта html данными из json массива
function dataFilling(data, nameProperty1, nameProperty2, idObject, propertyHtml) {
var objectHtml = $(idObject);
objectHtml.empty();
$.each(data, function (index, dataInstance) {
objectHtml.append($(propertyHtml,
{
value: dataInstance[nameProperty1],
text: dataInstance[nameProperty2]
}));
});
}
Если значения Select меняется интерактивно (пользователем), то все вроде работает нормально, но если значения Select меняется программно, то значение Select не обновляется. Пример:
Пользователь выбрал город, значение Select поменялось программно - загрузился новый список улиц, 1 ой улицей установилось какое-то значение, тут после обновления улиц должен бы обновиться и список домов, но он не обновляется.
Как можно исправить, чтобы список домов обновлялся после программного обновления списка улиц?
