نمایش لیست آبشاری استان و شهرستان به صورت Ajax

[davidrobert]

سلام و خسته نباشید دوستان میخوام. استان و شهرستان به صورت آبشاری دز select list نمایش بدم توسط Ajax ولی با مشکلی رو به رو شدم از Razor Pages هم استفاده میکنم ولی تو انتخاب استان از دیتابیس میخوام شهرستان نشان بده نشان نمیده ماندم جطوری باید این کاز انجام بدم استان از دیتابیس میاد ولی سعی دارم اندیساش بفرست به شهر تا بیاره نمیاره.
ین محیط قایل آزمایشی که برای خودم درست کردم تا ببرم درون فایل اصلی
150019
وقتی استان انتخاب میکنم شناسه توسط جاوااسکریپتا پایین میندازه ولی سعی کردم هر جور شده این شناسه رو به شهر بدم تا شهرهاش برای بیاره نشد و خطا داد. دستورات صفحه کلاینت
اینم بگم دستورات سمت سرور برای ذخیره نوشتم جواب داده به صورت Ajax ولی برای نمایش اش با مشکل برخورد کردم.

<form method="post" name="Registers">


<label asp-for="ID"></label>
<label asp-for="Province.P_Title" class="col-md-4 col-form-label text-md-right"></label>

<div class="col-md-8">
<select asp-for="Province" id="P_Title" name="P_Title" asp-items="Model.ListProvince" class="form-control"></select>

</div>
<label asp-for="Province.P_ID"></label>
<input type="text" asp-for="Province.P_ID" id="P_ID" class="form-control" name="P_ID" maxlength="250" autofocus>
@ViewData["a"]
<!-------------------------------------------------------------------------------------------------------------------------->
<label asp-for="city.C_Title" class="col-md-4 col-form-label text-md-right"></label>
<div class="col-md-8">
<select asp-for="city" id="C_Title" name="C_Title" asp-items="Model.ListCity" class="form-control"></select>
</div>
<!-------------------------------------------------------------------------------------------------------------------------->
<div class="form-group row">
<input type="submit" name="Btn_OK" id="Btn_OK" value="ثبت" class="btn btn-success" />
</div>
</form>
@section scripts{
<script>
$('#P_Title').on("change", function () {
var country = $('#P_Title').val();
var obj = { country: country };
var id = $('#P_Title').find('option:selected').val();
if (id == '') {
$('#P_ID').val(1157);
}
else if (id != '') {
$('#P_ID').val(id);
}
AjaxCall('/OnPost', JSON.stringify(obj),'POST').done(function (response) {
if (response) {
$('#C_Title').html('');
var options = '';
options += '<option value="Select">Select</option>';
for (var i = 0; i < response.length; i++) {
options += '<option value="' + response[i] + '">' + response[i] + '</option>';
}
$('#C_Title').append(options);

}
}).fail(function (error) {
alert(error.StatusText);
});
});
</script>
}


دستورات سمت سرور

public class IndexModel : PageModel
{
[BindProperty]
public Province.Select Province { get; set; }
private Tbl_Province tblProvince = new Tbl_Province();
public SelectList ListProvince { get; set; }
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
[BindProperty]
public City.Select_City city { get; set; }
private Tbl_City tblCity = new Tbl_City();
public SelectList ListCity { get; set; }
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
[BindProperty]
public string ID { get; set; }
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
public void OnGet()
{
try
{
ListProvince = new SelectList(tblProvince.Select().ToList(), P_Province.P_ID, P_Province.P_Title);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ListCity = new SelectList(tblCity.Select_City(this.Province.P_ID) .ToList(), P_City.C_ID,
P_City.C_Title);
}
catch { }
}
[HttpPost]
public void OnPost()
{
ListCity = new SelectList(tblCity.Select_City(this.Province.P_ID) .ToList(), P_City.C_ID,
P_City.C_Title);

}
}

[davidrobert]

اول از آقای hakim22 تشکر میکنم که دیروز بنده رو کمک کردن و به جواب رسیدم. چون سه هفته گشتم چیزی پیدا نکردم ولی ایشون در زمان 5 دقیقه مشکل بنده رو حل کردن اول از ایشون ممنون هستم.
این هم دستورات لیست آبشاری در Asp Core Razor Pages. برای دوستان عزیز

<label asp-for="Province.P_Title" class="col-md-4 col-form-label text-md-right"></label>
<select asp-for="Province.P_Title" id="P_Title" name="P_Title" asp-items="Model.ListProvince" class="form-control">
<option>استان را انتخاب فرمائید</option>
</select>
<label asp-for="ProCity.C_Title" class="col-md-4 col-form-label text-md-right"></label>
<select asp-for="ProCity.C_Title" id="C_Title" name="C_Title" asp-items="Model.ListCity" class="form-control"></select>
@*<select id="C_Title" class="form-control"></select>*@

@section Scripts
{
<script type="text/javascript">
//Insert default item "Select" in dropdownlist on load
$(document).ready(function () {
var items = "<option value='0'>لطفاً شهرستان را انتخاب فرمائید</option>";
$("#C_Title").html(items);
});
////Bind City dropdownlist
$("#P_Title").change(function () {
var countryId = $("#P_Title").val();
var url = "?handler=test&countryid=";

$.getJSON(url+countryId, function (data) {
var item = "";
$("#C_Title").empty();
$.each(data, function (i, city) {
item += '<option value="' + city.value + '">' + city.text + '</option>'
});
$("#C_Title").html(item);
});
});
</script>
}

مقدار دستور سمت سرور.

[BindProperty] public Province.Select Province { get; set; }
private Tbl_Province tblProvince = new Tbl_Province();

public SelectList ListProvince { get; set; }
[BindProperty]
public City.Select_City ProCity { get; set; }
private Tbl_City city = new Tbl_City();
public SelectList ListCity { get; set; }
public IActionResult OnGetTest(int CountryId)
{
return new JsonResult(new SelectList(city.Select_City(CountryId).ToList(), P_City.C_ID, P_City.C_Title));
///return new OkObjectResult("Done!");
}

این دستور با ADO و بدون رفرش با انتخاب استان شهرستان نمایش داده میشود.