MVC dynamically load a dropdown based on a selection from another - asp.net-mvc

Question

I am using MVC and I would like to have two dropdowns where ones values are dependent on another. Additionally based on the combination on the two dropdowns saved the corresponding ID.
I have a code table that consists of
I would like to have dropdown one be a list of Manufacturers then based off the selection I would like dropdown two to be any models that have that as a Manufacturer. Then when I save the record that these dropdowns are used for I would like to record the ManufacturerModelID that is assigned to that combination. Is this possible?

Answer 1

If I understood well, you want to apply the MVC model to your application.
If yes, there is not a matter of "if", you can implement anything. You just need to separate your model from your view and controller.
In your case, I would go for "object oriented" javascript. Having separated the Models in Objects helps understanding the MVC itself.
Programming everything under a namespace like "MANUFACTUREAPP" would be helpful too.
1)For the Model
a) You need to have an object "Manufacturer" with fields like this.id, this.description, this.models = []. Then you need the setters, getters and your magic function that would push to this.models the models it has. So in the end just one more function like getManufacturer() that will get you an object filled with eeeverything this manufacturer has.
b) You need a "ManufacturerModel" with this.model, this.modelDescription, this.manufacturerID = [], setters, getters, init and all your funky functions.
2) For the View
a) You need your "View" object with functions like:
onManufacturerClick = function(){
manufacturersModels = MANUFACTUREAPP.manufacturers.getMeWhatIwant(howIwantIt);
}
So now you can be proud that your app supports the MVC architecture.
3) For the controller just follow the same concept.
In your main you want to create your object in your init function like:
init = function(){
MANUFACTUREAPP.manufacturers = new MANUFACTUREAPP.init();
}
Two friendly advices. Study the MVC in theory because it might get tricky if you didn't understood it 100%. And my best advice would be...grab a pen and draw your models before if you want to save tiiiime and energy!
EDIT
just noticed the asp.net tag.. Anyway, I am gonna leave that here. I am not familiar with asp.net but I guess the theory should be the same..

Answer 2

You can do it using jQuery and ajax.
Assuming your razor view renders the markup like this.
<select name="Manufacturer" id="Manufacturer">
<option value="1">Aaaaa</option>
<option value="2">Bbbbb</option>
<option value="3">Ccccc</option>
</select>
<select name="Model" id="Model">
</select>
Now have this javascript in your page, which listens to the change event of the first select element and get the value of the selected option and send it to your server using ajax. Let your server action method returns the models belongs to the manufacturer id.
$(function(){
var urlForModesl = "/Manufacturer/Models";
$("#Manufacturer").change(function(){
var manufacturerId= $(this).val();
$.getJSON(urlForModesl,function(data){
var modelsHtml="";
$.each(data,function(a,b){
modelsHtml+="<option value='"+b.Id+"'>"+b.Name+"</option>";
});
$("#Model").html(modelsHtml);
});
});
});
Assuming your Models action method returns a list of objects with Id and Name property in JSON format.
public ActionResult Models(int id)
{
var list= db.ModelManufactors.Where(s=>s.ManufacturerId==id)
.AsEnumerable()
.Select(s=> new { Id=s.ManufacturerModelId, Name=s.Name}).ToList();
return Json(list,JsonRequestBehaviour.AllowGet);
}