连接两个dropdownlist mvc 4

Question

我有一个优惠产品销售。 经销商可以有分销商 经销商可以设置每个产品的价格 ，他有最大义务为每个产品。 现在我喜欢在我的mvc c＃网站项目的销售页面中有两个DropDowmList 当我从第一个ddl产品中查找时我想从我的数据库连接我的其他ddl（他有多少产品必须销售）。

编辑： 例如经销商有三个产品销售： 产品A - 5个单位到销售 产品B - 20 productC - 15 当他选择产品B在第二DDL或上一个textboxForNumber（最小，最大）他应该看到的范围从1到20

我尝试创建一个新的模式是这样的：

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

，但我不能这两DDL连接在一起。

编辑：

我试图与ViewBag做到这一点像其他DDL资源列表。

var AllObligoProdact = db.ProductObligo.Where(p => p.DealerID == currentDealer.DealerID); 

foreach (var item in AllObligoProdact) 
ViewBag.ProductObligo[item.Product.ProductID].max = item.MonthObligo; 

，并在CSHTML侧

<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> 

但我还是什么也没得到：/ 它在数据库使用新表是一个好主意，也许有更好的方式来做到这个？

Answer 1

首先，我会摆脱ViewBag将数据（对于Dropdownlist）从控制器传输到视图。我会添加，作为我的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>(); 
    } 
} 

在我的GET动作，我会成立了产品收集和发送到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); 
} 

而在你的强类型视图，

@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" /> 
} 

现在，我们需要当用户从下拉列表中选择一个产品时，一些JavaScript加载数字以销售。我们将包含jQuery库到这个视图（或布局视图），我们将这个Java脚本添加到我们的视图。

<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> 

它是什么，它监听到change事件的第一个下拉列表中，当它一切发生的时候，它让让使用getJSON法（写在我们包括jQuery库）get调用并获得结果JSON格式并解析它并将其附加到第二个下拉列表中。

假设GetSaleNumbers是Product控制器，其接受该产品的ID和发送所有产品出售编号为该产品在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

您必须编写JavaScript，并在第一个下拉列表中更新（选择更改）执行ajax调用服务器以从数据库中获取数据以使用此数据更新第二个下拉列表。