連接兩個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調用服務器以從數據庫中獲取數據以使用此數據更新第二個下拉列表。