asp.net Razor Pages - 根据另一个选择列表的选择更新选择列表

Posted 2023-03-27

【中文标题】asp.net Razor Pages - 根据另一个选择列表的选择更新选择列表

【英文标题】：asp.net Razor Pages - Update select list based on the selection of another select list

【发布时间】：2022-01-06 09:10:07

【问题描述】：

当用户在另一个选择列表中选择一个值时，我想更新一个选择列表。我已经设法获得第一个选择列表，以使用参数在模型上调用 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();
        

【参考方案1】：

每当您的#departureStation 选择发生变化时，您的代码都会调用 getDestinationStations 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>

【讨论】：

是的，这行得通。我原以为选择会在调用出发站的 get 时自动更新。感谢您的帮助

不要忘记在每次执行 ajax 时清除您的 destinationStationSelect，否则您将获得附加到先前选项的选项。