asp.netRazorPages-根據另一個選擇串列的選擇更新選擇串列

當用戶在另一個選擇串列中選擇一個值時，我想更新一個選擇串列。我已經設法獲得第一個選擇串列，以使用引數在模型上呼叫 get（或 post）方法，并且可以更新基礎資料。但是第二個選擇串列從不顯示新值。

我對 asp.net 不是很有經驗，所以我做錯了什么？

下面的代碼

.cshtml

<div>
    <form method="post">
        <select id="departureStation" asp-items="Model.DepartureStations" onchange="getDestinationStations()"></select>
        <select id="destinationStation" asp-items="Model.DestinationStations"></select>
    </form>
</div>


@section Scripts {
<script type="text/javascript">
    function getDestinationStations() {
        var selectedDepartureStationID = $("#departureStation").find(":selected").val();
        console.log("selectedDepartureStationID = "   selectedDepartureStationID);

        $.ajax({
            type: "GET",
            url: "/Index?handler=Departure",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: {
                selectedDepartureStationID: selectedDepartureStationID
            },
            success: function(result) {
                console.log("success - "   result);
            },
            error: function() {
                console.log("failure");
            }
        })
    }
</script>
}

。CS

public List<SelectListItem> DestinationStations
        {
            get
            {
                if (this._selectedDepartureStationID == -1)
                    return new List<SelectListItem>();

                List<Models.Station> stations = new List<Models.Station>();

                List<Models.RouteSegment> routeSegments = this._context.RouteSegments.Where(x => x.StationID == this._selectedDepartureStationID).ToList();
                foreach (Models.RouteSegment routeSegment in routeSegments.DistinctBy(x => x.RouteID))
                {
                    List<Models.RouteSegment> routeSegments2 = this._context.RouteSegments.Where(x => x.RouteID == routeSegment.RouteID).Include(x => x.Station).ToList();
                    stations.AddRange(routeSegments2.Select(x => x.Station));
                }

                return new List<SelectListItem>(stations.Distinct().ToList().Select(x => new SelectListItem { Value = x.StationID.ToString(), Text = x.StationName }).ToList());
            }
        }

        public IndexModel(MyViewContext context)
        {
            this._context = context;
        }

        public void OnGet()
        {
            this.DepartureStations = this._context.Stations.Select(x => new SelectListItem { Value = x.StationID.ToString(), Text = x.StationName }).ToList();
        }

        public IActionResult OnGetDeparture(int selectedDepartureStationID)
        {
            this._selectedDepartureStationID = selectedDepartureStationID;

            return Page();
        }

uj5u.com熱心網友回復：

每當您的 #departureStation 選擇更改時，您的代碼將呼叫 getDestinationStation javascript 代碼。在該函式中，如果我理解正確，您將向后端服務器發送請求以接收可能的目標站。這里你需要做的是當ajax請求成功時，根據你回傳的陣列或資料動態添加選項。

我假設您的“/Index?handler=Departure”回傳一個 JSON，如：

[
{
    id: 1,
    name: "station1"
},
{
    id: 2,
    name: "station2"
}
]

檢查下面的代碼是否有效。

$.ajax({
            type: "GET",
            url: "/Index?handler=Departure",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: {
                selectedDepartureStationID: selectedDepartureStationID
            },
            success: function(result) {
                let destinationStationSelect = $('#destinationStationSelect');
                let optionTemplate = $('<option></option>');
                $.each(result, (index, element) => {
                  let option = optionTemplate.clone();
                  option.append(element.name);
                  option.attr('value', element.id);
                  destinationStationSelect.append(option);
                });
            },
            error: function() {
                console.log("failure");
            }
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

標籤：C＃ 网站 剃刀页面

上一篇：有沒有辦法在每次單擊按鈕時打開一個新面板？

下一篇：標簽回傳零值