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 pro

Answer 1

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.

Answer 2

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);
}