从选定的选项中获取值并将其传递给函数答案

【问题标题】：Get value from selected option and pass it to the function从选定的选项中获取值并将其传递给函数
【发布时间】：2021-03-22 00:21:15
【问题描述】：

您好，我在 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>

这里是showRoom函数

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();
                }
            }

【问题讨论】：

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

标签： html asp.net .net asp.net-core razor

【解决方案1】：

这是一个演示（我用假数据来测试）：

类：

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);

        }
    }

结果：

【讨论】：