Get value from selected option and pass it to the function

Hi im making a reservation page in razor pages asp.net. On my page I have two drop downlist. One for the location other for the rooms of that specific location. I want to pass the value of that selected location to the function which shows the rooms (function is named showRoom()), so that the rooms will be shown depending on which location you selected. How do i do that with html? I tried something but didnt really work. Here is the html code

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

Here is the function 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();
                }
            }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Here is a demo(I use fake data to test):

class:

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

        }
    }

result:
Get value from selected option and pass it to the function


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x