Question Load Dropdown when another Dropdown isChanged

Joined
Dec 24, 2019
Messages
10
Location
Florida, USA
Programming Experience
Beginner
Hello!
I have 3 dropdowns to do a search . year , make and model dropdowns. I need to load the model dropdown when the make dropdown isChanged.all data will be pulled from a MSSql database, can anyone point me to a resource that would help me figure out how to accomplish this?

I have the dropdowns getting loaded from the database with all the years , makes and models. would like to have the model dropdown be empty until the end user selects a make. then the model dropdown gets populated with the models that match the make....I hope that makes sence.

thank you for any help.
 
Specifics please?

What are dropdowns? If you mean combo boxes then, I suggest calling them by the name they were given by their framework creators to save confusion amongst readers.

With some simple boolean checks; and putting them in place to check if the comboboxes are selected in order that you wish, you could say if (dropdownX non selected) then don't load. (Obviously in a more 'codelic' way) using the docs ComboBox Class (System.Windows.Forms) you can surely pick the correct properties and events to work with?

Why not post the snipped of code that populates your comboboxes, and maybe someone will help you change it to your liking? It is often easier to advise you if we can see what you've done so far, and its unlikely someone would be able to point you towards a tutorial for doing exactly as you want. Just remember to post your code in code tags when posting to the forums. ;)
 
Also, list specifically which control you are using? Is it the Dropdown list? If yes, you can also find the same control docs on the link above by searching the site for that control.
 
Ahhh yes...sorry about that..I should have tried to explain a bit further.

so I am creating a website , I am using asp.net core mvc and the controls are select controls.

this is the [HttpGet]
Index Method:
 //GET: Home
        public IActionResult Index()
        {
            using (var db = new CCLdbContext())
            {
                var years = db.Listing.Select(x => x.Year).Distinct().ToList();
                years.Sort();

                var makes = db.Listing.Select(x => x.Make).Distinct().ToList();
                var models = db.Listing.Select(x => x.Model).Distinct().ToList();

                ViewBag.years = years;
                ViewBag.makes = makes;
                ViewBag.models = models;
            }
            return View();
        }

this is the [HttpPost] - this fires after the user selects the year, make and model and clicks the submit button....this all works as expected...
HttpPost:
public IActionResult Index(string year, string make, string model)
        {
            List<Listing> listings = new List<Listing>();
          
            //Initialize the database connection
            using (var db = new CCLdbContext())
            {
                if (year != null && make != null && model != null)
                {
                    listings = db.Listing.Where(x => x.Year.Equals(year)
                                            && x.Make.ToLower().Equals(make.ToLower())
                                             && x.Model.ToLower().Equals(model.ToLower())).Take(30).ToList();
                }

                var years = db.Listing.Select(x => x.Year).Distinct().ToList();
                years.Sort();

                var makes = db.Listing.Select(x => x.Make).Distinct().ToList();
                var models = db.Listing.Select(x => x.Model).Distinct().ToList();

                ViewBag.years = years;
                ViewBag.makes = makes;
                ViewBag.models = models;
                
            }

            return View(listings);
        }

right now all 3 select controls are being populated with all the results in the database. the goal is to have the "makel" select be filled when the user changes the model select.. I seen a few ideas from a Google search where ajax is being used...I am hoping that there is a way to do this with out using javascript or ajax.

thank you
 
Perhaps if you show us the .cshtml for your various views we would understand what you mean by "select controls". Right now it feels like there is a major language barrier.
 
the controls are select controls.
I've never heard of select controls in .Net. Unless you are talking about one of the html fragment pieces :
C#:
<select id="foo">
    <option></option>
</select>
Perhaps if you show us the .cshtml for your various views we would understand what you mean by "select controls".
Since none of us know which control you are using, its a little hard to give you any advice. At this point you need to add some clarity as suggested by Skydiver.
 
ok...here is the cshtml file code.

cshtml:
@model List<Classic_Car_Leads.Models.Listing>
@{
    ViewData["Title"] = "Home Page";
}
<section class="row mb-1" style="background-color:#524533;">
    <div class="col-sm-12">
        <h5>Ad Section</h5>
    </div>
</section>
<section style="border-radius: 10px;">
    <h1 class="text-dark text-center">Classic Car Leads</h1>
    <form asp-controller="Home" asp-action="Index" method="post">
        <div class="row">
            <div class="col-sm-6">
                <div class="card card-bg-gradient-grey card-box-shadow">
                    <div class="card-body">
                        <div class="card-title text-center">Search Query</div>
                        <div class="col-sm-12">
                            <p class="mb-1">
                                <select class="form-control" name="year">
                                    <option value="">Year</option>
                                    @foreach (var item in ViewBag.years)
                                    {
                                        <option value="@item" name="">@item</option>
                                    }
                                </select>
                            </p>
                            <p class="mb-1">
                                <select class="form-control" name="make">
                                    <option value="">Make</option>
                                    @foreach (var item in ViewBag.makes)
                                    {
                                        <option value="@item">@item</option>
                                    }
                                </select>
                            </p>
                            <p class="mb-1">
                                <select class="form-control" name="model">
                                    <option value="">Model</option>
                                    @foreach (var item in ViewBag.models)
                                    {
                                        <option value="@item">@item</option>
                                    }
                                </select>
                            </p>
                            <input type="submit" Value="Submit" class="btn btn-primary mb-2 mt-2" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 car">
                <img src="~/img/head-to-head.png" />
            </div>
        </div>
    </form>
</section>
<section>
    @if (Model != null)
    {
        if (Model.Count < 1)
        {
            <div class="alert alert-dark mt-5 box-shadow">
                Your query return 0 results. Either there are 0 Listings or your query was in the wrong format.
            </div>
        }
        else
        {
     <div class="row mt-5">
         <div class="container">
                 @foreach (var listing in Model)
                 {
                     <div class="col-sm-12 align-content-center">
                         <div class="card card-box-shadow border-dark card-bg-gradient-grey mb-3" style="width: 67rem;">
                             <div class="row no-gutters">
                                 <div class="col-sm-4">
                                     @if (listing.MainImgUrl == null)
                                     {
                                         <label>no image available</label>
                                     }
                                     else
                                     {
                                         <img src="@Url.Content(listing.MainImgUrl)" class="card-img img-fluid img-box-shadow m-3" alt="...">
                                     }

                                 </div>
                                 <div class="col-sm-8">
                                     <div class="card-body">
                                         <h6 class="card-subtitle text-black-50 ml-2">@listing.ListingId</h6>
                                         <h5 class="card-title text-warning text-shadow ml-2">@listing.Title</h5>
                                         <p class="card-text ml-2">
                                             @listing.Location
                                             <br />Price:&nbsp;@listing.Price
                                             <br />Make:&nbsp;@listing.Make
                                             <br />Model:&nbsp;@listing.Model
                                             <br />Year&nbsp;@listing.Year
                                             <br />
                                             <div class="mt-5 ml-1">
                                                 @if (listing.DealerUrl != "" || listing.DealerUrl != null)
                                                 {
                                                     <a class="btn btn-drak text-shadow" role="button" asp-controller="SingleListing" asp-action="SingleListing" asp-route-id="@listing.Id">Details</a>
                                                 }
                                             </div>

                                         </p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 }
         </div>     
    </div>
        }
        
    }
</section>

you can see there are 3 select controls that hold the options for "year" , "make" and "model"

I hope this helps !
 
May I suggest using the DropDownList() or DropDownListFor() HtmlHelpers to help with the clutter in the Razor.

I still need to try to grok what you are asking for... Let me look some more into your current views.
 
the goal is to have the "makel" select be filled when the user changes the model select..
I am not seeing any "makel" in the Razor. Did you mean "make"? If so, and you were using the HTML Helpers, you would just mark that SelectListItem.Selected as true and be done with it.
 
Something like:
C#:
ViewBag.years = db.Listing
                  .Select(l => l.Make)
                  .Distinc()
                  .Sort()
                  .Select(m => new SelectListItem()
                          {
                              Text = m,
                              Value = m,
                              Selected = m == make
                          })
                  .ToList();
 
Oh, I see what you are trying to do now, than I've managed to step away for a while. You basically want a web page that looks something like:
C#:
Year: 1950, 1951, 1952, ... 2020
Make: <empty>
Model: <empty>
where the comboboxes fro Make and Model are empty, and the only combobox that is populated is Year. After the user selects a Year, only then will the Make combobox be populated with only the makes that were available for that your to give you something like:
C#:
Year: 2001
Make: Audi, BMW, Cadillac, Ferarri, Ford, ... Saturn
Model: <empty>
And then again, once a Make, then only the models available for that Year and Make are populated in the Model combobox.
C#:
Year: 2001
Make: Saturn
Model: SC1, SC2, SL1, SL2, Ion, Skye

To implement the above, the pre-Web 2.0 way, would require the user to have to keep pressing the "Submit" button because that is the only way to POST back to the server so that a new page can be served up to the user.

With the use of JavaScript can you attempt to detect if a choice has been made in one of the comboboxes, and then do a POST back to the server so that a new page can be served up to the user. Although this frees the user from having to click on the "Submit" button, the page reloads will still be jarring. That's just the way it is with pre-Web 2.0.

For the Web 2.0 experience that most modern users are expecting, you will have to use AJAX and dynamically update the client side HTML with updated data that you get back from the server. With AJAX calls and JavaScript to update the HTML, you can now finally rescue the user from the jarring page loads.
 
So if you accept that you really want to use AJAX and JavaScript to give the user a good experience check out this blogpost that does cascading dropdown lists:
 
Back
Top Bottom