Connection between two mvc 4 dropdowns

Question

I have a sale of preepay products. the dealer may have sub-dealers; the dealer may set a price for each product and it has a maximum amount for each product. now I like in my mvc project C # on the sale page to have two DropDowmList when I spew the product from the first ddl, I want my other ddl (how much product it has for sale) to be connected from my db.

EDIT: for example, the dealer has three products for sale: productA - 5 units for sale productB - 20 productC - 15 When he selects productB in the second ddl or in the ForNumber (min, max) text box, he should see a range from 1 to 20

I am trying to create a new model as follows:

public int ProductObligoByDealerID { get; set; } public int DealerID { get; set; } public virtual Dealer Dealer { get; set; } public int ProductID { get; set; } public virtual Product Product { get; set; } public uint MonthObligo { get; set; } 

but i can't connect these two ddl together.

EDIT:

I tried to do this using ViewBag, like another ddl resource list.

 var AllObligoProdact = db.ProductObligo.Where(p => p.DealerID == currentDealer.DealerID); foreach (var item in AllObligoProdact) ViewBag.ProductObligo[item.Product.ProductID].max = item.MonthObligo; 

and on the cshtml side

  <div class="editor-label"> @Html.LabelFor(model => model.DealerProductID) </div> <div class="editor-field"> @Html.DropDownList("DealerProductID", string.Empty) @Html.ValidationMessageFor(model => model.DealerProductID) </div> <div class="editor-label"> @Html.LabelFor(model => model.NumOfMonth) </div> <div class="editor-field"> @*Html.EditorFor(model => model.NumOfMonth)*@ @Html.TextBoxFor(model => model.NumOfMonth , new {type="number",min="0",max=ViewBag.ProductObligo[Model.DealerProductID].max }) @*.DropDownList("NumOfMonth", string.Empty)*@ @Html.ValidationMessageFor(model => model.NumOfMonth) </div> 

but I still get nothing: / is it a good idea to use a new table in db, or maybe there is a better way to do this?

Answer 1

First of all, I would get rid of the ViewBag in order to transfer data (for Dropdownlist) from the controller to View. I would add that this is a property of my ViewModel.

 public class ProductSale { public IEnumerable<SelectListItem> Products{ get; set; } public int SelectedProduct { get; set; } public IEnumerable<SelectListItem> SaleNumbers{ get; set; } public int SelectedSaleNumber { get; set; } //Other Existing properties also. public ProductSale() { Products=new List<SelectListItem>(); SaleNumbers=new List<SelectListItem>(); } } 

Now in my GET action I installed the Products collection and send it to the View,

 public ActionResult Add() { var vm=new ProductSale(); //The below code is hardcoded for demo. you mat replace with DB data. vm.Products= new[] { new SelectListItem { Value = "1", Text = "Product A" }, new SelectListItem { Value = "2", Text = "Dealer B" }, new SelectListItem { Value = "3", Text = "Product C" } }; return View(vm); } 

And in your highly typed view

 @model ProductSale @using(Html.Beginform()) { @Html.DropDownListFor(x => x.SelectedProduct, new SelectList(Model.Products, "Value", "Text"), "Select Product") @Html.DropDownListFor(x => x.SelectedSaleNumber, new SelectList(Model.SaleNumbers, "Value", "Text"), "Select Number to sell") <input type="submit" /> } 

Now we need some javascript to load numbers for sale when the user selects one product from the drop-down list. We will include the jQuery library in this view (or layout view), and we will add this java script to our view.

 <script type="text/javascript"> $(function () { $("#SelectedProduct").change(function () { var self = $(this); var items=""; $.getJSON("@Url.Action("GetSaleNumbers","Product")/"+self.val(), function(data){ $.each(data,function(index,item){ items+="<option value='"+item.Value+"'>"+item.Text +"</option>"; }); $("#SelectedSaleNumber").html(items); }); }); }); </script> 

What he does, he listens to the change event of the first dropdown list and when it happens, he gets a GET call using the getJSON method (recorded in the jquery library that we included) and get the results in JSON and JSON it and add to the second drop down list .

Assuming GetSaleNumbers is an action method in the Product controller that takes a product identifier and sends all the product numbers for this product in JSON .

 public ActionResult GetSaleNumbers(int id) { List<SelectListItem> saleNumbers=new List<SelectListItem>(); //The below code is hardcoded for demo. you mat replace with DB data //based on the input coming to this method ( product id) saleNumbers.Add(new SelectListItem { Value="1" , Text="1" }, new SelectListItem { Value="2" , Text="2" }, new SelectListItem { Value="3" , Text="2" } ); return Json(saleNumbers,JsonRequestBehavior.AllowGet); } 

Answer 2

You need to write javascript and in the first drop-down list of the update (change of choice) make an ajax call to the server to get data from the database in order to update the second drop-down list with this data.