connecting between two dropdownlist mvc 4

Question

I have an preepay products sale. dealer can have subdealers dealer can Set a price for each product and he have max obligo for each product. now I like in my mvc c# site project in the sale page to have two DropDowmList when I chack product from the first ddl I want my other ddl(how much product he have to sale) to be connected from my db.

EDIT: for example a dealer have three product to sale: productA - 5 units to sale productB - 20 productC - 15 When he chooses productB on the second ddl or on a textboxForNumber(min,max) he should see the range from 1 to 20

I try to create a new model like this:

    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 this two ddl together.

EDIT:

I tried to do this with the ViewBag like the other ddl resources 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 in 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 :/ it is a good idea to use a new table in the db, or maybe there is a better way to do this?

Answer 1

First of all I would get rid of the ViewBag to transfer the Data (for Dropdownlist) from controller to View. I would add that as the 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 would set the Products collection and send that 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 Strongly 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 the Numbers to sell when user select one product from the drop down. We will include jQuery library to this view (or the 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 it does is, It listens to the change event of the first dropdown and when it happenes, it get make a GET call using getJSON method (written in the jquery library we included) and get the results in JSON format and parse it and append that to the second dropdown.

Assuming GetSaleNumbers is an Action method in Product controller which accepts the id of the Product and Send all Product Sale Numbers for that product in JSON format.

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 have to write javascript and on first dropdown list update (selection change) do ajax call to server to get data from database to update second dropdown list with this data.