Html 从所选选项中获取值并将其传递给函数

您好，我在razor pages asp.net中创建预订页面。在我的页面上，我有两个下拉列表。一个用于该位置，另一个用于该特定位置的房间。我想将所选位置的值传递给显示房间的函数，该函数名为showRoom，以便根据您选择的位置显示房间。如何使用html实现这一点？我尝试了一些东西，但没有真正起作用。下面是html代码

<td>Select location</td>
                                    <div class="form-group">
                                        <select id="locations" name="Location">
                                            @foreach(var reservations in @Model.PopulateReservations())
                                            {                                        
                                                <option>@Html.DisplayFor(m => reservations.LocationName)</option>
                                                
                                            }
                                        </select>                                       
                                    </div>
                                <td>Select Room</td>
                                    <div class="form-group">
                                        <select id="rooms" name="Room">
                                            @foreach(var reservations in @Model.ShowRoom(string LocationName))
                                            {
                                               <option>@Html.DisplayFor(m => reservations.RoomName)</option>
                                                 
                                            }
                                        </select>                                       
                                    </div>

这是功能陈列室

public List<WorkspaceModel> ShowRoom(string loc)
        {
            var cs = Database.Database.Connector();
            List<WorkspaceModel> res = new List<WorkspaceModel>();
            using var con = new NpgsqlConnection(cs);
            {
                string query = "Select room FROM workspaces WHERE location = '"+ loc +"'";
                using NpgsqlCommand cmd = new NpgsqlCommand(query, con);
                {
                    cmd.Connection = con;
                    con.Open();
                    using (NpgsqlDataReader dr = cmd.ExecuteReader())
                    {
                        while (dr.Read())
                        {
                            res.Add(new WorkspaceModel { RoomName = dr["room"].ToString() });
                        }
                    }
                    
                    con.Close();
                }
            }

---

下面是一个演示，我使用假数据进行测试：

类别：

public class PopulateReservation
    {
        public string LocationName { get; set; }

    }
    public class WorkspaceModel
    {
        public string RoomName { get; set; }
    }

TestDropDown.cshtml：

<td>Select location</td>
<div class="form-group">
    <select id="locations" name="Location">
        @foreach (var reservations in @Model.PopulateReservations)
        {
            <option>@Html.DisplayFor(m => reservations.LocationName)</option>

        }
    </select>
</div>
<td>Select Room</td>
<div class="form-group">
    <select id="rooms" name="Room">
        @foreach (var reservations in @Model.Rooms)
        {
            <option>@Html.DisplayFor(m => reservations.RoomName)</option>

        }
    </select>
</div>

<form>
    @Html.AntiForgeryToken()
</form>
@section scripts{ 
    <script>
        $('#locations').on('change', function () {
            var arr = [];
        $.ajax({
                    type: "POST",
            url: '?handler=ShowRoom',
            headers: {
                RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
            },
            data: { "loc": $("#locations").val() },
            dataType:"json"
        }).done(function (data) {
            $("#rooms").empty();
            $.each(data, function (i, item) {
                $("#rooms").append('<option> ' + item["roomName"] + ' </option>');
            });
           
        });
    });
    </script>
}

TestDropDown.cshtml.cs：

public class TestDropDownModel : PageModel
    {
        [BindProperty]
        public List<PopulateReservation> PopulateReservations { get; set; }
        [BindProperty]
        public List<WorkspaceModel> Rooms { get; set; }
        public IActionResult OnGet()
        {
            PopulateReservations = new List<PopulateReservation> {
                new PopulateReservation { LocationName = "location1" },
                new PopulateReservation { LocationName = "location2" },
                new PopulateReservation { LocationName = "location3" }
            };
            Rooms = new List<WorkspaceModel> {
                new WorkspaceModel { RoomName = "Room1" },
                new WorkspaceModel { RoomName = "Room2" },
                new WorkspaceModel { RoomName = "Room3" },
            };
            return Page();
        }
        public IActionResult OnPost()
        {
            
            return Page();
        }
        public IActionResult OnPostShowRoom(string loc)
        {
            List<WorkspaceModel> l= new List<WorkspaceModel> {
                new WorkspaceModel { RoomName = loc + "Room1" },
                new WorkspaceModel { RoomName = loc + "Room2" },
                new WorkspaceModel { RoomName = loc + "Room3" },
            };
            return new JsonResult(l);

        }
    }

结果:

---

这种模式称为级联下拉列表，如果您搜索它，您可以在线阅读大量示例等。基本上，它通常是通过使用javascript来处理第一个下拉列表的更改事件来完成的，然后该事件向服务器发送一个AJAX请求，其中包含所选项目的ID，服务器将根据该ID返回有效选项以放入第二个下拉列表。