Stuck with cascading dropdownlist asp.net c#

Hi guys im trying to make a cascading dropdownlist in razor pages with postgresql. The first dropdown shows the location, and the second shows the room of the location, depending which location you click. Im stuck, i dont know how to go further. I hope you guys can help.
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())
                                            {
                                               <option>@Html.DisplayFor(m => reservations.RoomName)</option>
                                                 
                                            }
                                        </select>                                       
                                    </div>

Here are the two functions used for showing location and room:
public List<WorkspaceModel> PopulateReservations()
        {
            var cs = Database.Database.Connector();
            List<WorkspaceModel> res = new List<WorkspaceModel>();
            using var con = new NpgsqlConnection(cs);
            {
                string query = "Select DISTINCT location FROM workspaces";
                using NpgsqlCommand cmd = new NpgsqlCommand(query, con);
                {
                    cmd.Connection = con;
                    con.Open();
                    using (NpgsqlDataReader dr = cmd.ExecuteReader())
                    {
                        while (dr.Read())
                        {
                            res.Add(new WorkspaceModel { LocationName = dr["location"].ToString() });
                        }
                    }
                    
                    con.Close();
                }
            }


            return res;
        }

        public List<WorkspaceModel> ShowRoom()
        {
            var cs = Database.Database.Connector();
            List<WorkspaceModel> res = new List<WorkspaceModel>();
            using var con = new NpgsqlConnection(cs);
            {
                string query = "Select room FROM workspaces";
                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();
                }
            }


            return res;
        }

Here is the model for the workspace
public class WorkspaceModel
    {
        [BindProperty]
        public string LocationName { get; set; }
        [BindProperty]
        public string RoomName { get; set; } 
        [BindProperty]
        public int SquareMeters { get; set; } = 1;
        [BindProperty]
        public int Lengthws { get; set; } = 1;
        [BindProperty]
        public int Widthws { get; set; } = 1;
        [BindProperty]
        public int Id {get; set;}
    }

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

You can implement it with ajax. Below is a simple demo:

Index.cshtml:

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

        }
    </select>
</div>

@section scripts{ 
<script>
    $("#locations").on("change", function () {
        var location = $(this).val();
        $.ajax({
            method: 'get',
            url: '/Index?handler=GetLocationRoom',
            data: {Location: location },
            success: function (res) {
                $("#rooms").empty();
                var htmlString = "";
                $.each(res, function (k, v) {
                    htmlString += "<option value='" + v.roomName + "'>" + v.roomName + "</option>";
                });
                $("#rooms").append(htmlString);
            }

        })
    })
</script>
}

Index.cshtml.cs:
public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    public void OnGet()
    {
        
    }

    public IActionResult OnGetGetLocationRoom(string Location)
    {

        List<WorkspaceModel> res = new List<WorkspaceModel>();

        if (Location == "A")
        {
            res.Add(new WorkspaceModel { RoomName = "A1" });
            res.Add(new WorkspaceModel { RoomName = "A2" });
        }
        if (Location == "B")
        {
            res.Add(new WorkspaceModel { RoomName = "B1" });
            res.Add(new WorkspaceModel { RoomName = "B2" });
        }
        if (Location == "C")
        {
            res.Add(new WorkspaceModel { RoomName = "C1" });
            res.Add(new WorkspaceModel { RoomName = "C2" });
        }
        return new JsonResult(res);
    }

    public List<WorkspaceModel> PopulateReservations()
    {
        List<WorkspaceModel> res = new List<WorkspaceModel>()
        { 
            new WorkspaceModel { LocationName = "A"},
            new WorkspaceModel { LocationName = "B"},
            new WorkspaceModel { LocationName = "C"}
        };
        return res;
    }

    public List<WorkspaceModel> ShowRoom()
    {
        List<WorkspaceModel> res = new List<WorkspaceModel>()
        {
            new WorkspaceModel { RoomName = "A1"},
            new WorkspaceModel { RoomName = "A2"},
            new WorkspaceModel { RoomName = "B1"},
            new WorkspaceModel { RoomName = "B2"},
            new WorkspaceModel { RoomName = "C1"},
            new WorkspaceModel { RoomName = "C2"}
        };
        return res;
    }
}

Result:

Stuck with cascading dropdownlist asp.net c#


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