ユーザ入力に基づいて実行時にドロップダウンリストを生成する方法

Question

ユーザが入力したカウントに基づいてドロップダウンリストを生成したい。ユーザが3を入力すると、3つのドロップダウンリストを生成する必要がある。 はここで、iはdropdownlistsを生成したい私は姫が、その数にcount..based入力するように求めていdropdownlist..afterから値を選択し、ユーザー2を求めていますすべての最初の私の見解

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <div class="form-horizontal"> 
     <div class="form-group"> 
      @Html.Label("Make", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownList("Make", ViewBag.Make as SelectList, "Select", new { @id = "ddlSelect",onchange ="GetOption();"}) 
      </div> 
     </div> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.Label("Count", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.TextBox("Count","", new { @id = "textCount",onblur ="GetCount();"}) 
      </div>  
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Category, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Cost, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Cost, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Cost, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Make, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Make, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.ValidationMessageFor(model => model.Make, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" id="click" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 
<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

です&は、ビューバックのデータを使用してそれらを設定します。

私のモデルクラスは、ここで

public partial class Cables_List 
{ 
    public int ID { get; set; } 
    public string Category { get; set; } 
    public Nullable<decimal> Dlink { get; set; } 
    public Nullable<decimal> Molex { get; set; } 
} 

&である私のコントローラは、私はちょうどViewbag.Dlink & Viewbag.Molexからデータをロードしたい

public class BOMController : Controller 
{ 
    private InventoryContext db = new InventoryContext(); 

    // GET: BOM 
    public ActionResult Cables() 
    { 
     ViewBag.Make = new SelectList(db.Make, "ID", "Name"); 
     ViewBag.Dlink = new SelectList(db.Cables_List, "Dlink", "Category"); 
     ViewBag.Molex = new SelectList(db.Cables_List,"Molex","Category") 
     return View(); 
    } 

です。ドロップダウンリストからのユーザーの選択に基づいています。私はデータベースの最初のアプローチを使用しています。 MVCでこれを達成する方法はありますか、jquery.Kindly guideを使用する必要があります。

Answer 1

ケーブルモデル：

public class Cable 
{ 
    public int ID { get; set; } 
    public string Category { get; set; } 
    public decimal? Dlink { get; set; } 
    public decimal? Molex { get; set; } 
} 

あなたのViewModel：

public class HomeViewModel 
{ 
    public int Amount { get; set; } 
    public List<Cable> Cables { get; set; } 
} 

コントローラ方法：

public ActionResult GetCables(int Amount) 
{ 
    var model = new HomeViewModel(); 
    model.Cables = db.Cables_List.ToList(); 

    return PartialView("_Cable.cshtml", model); 
} 

_Cable.cshtml部分図：

@model HomeViewModel 

@for (var i = 0; i < Model.Amount; i++) 
{ 
    @Html.DropDownList("DDname", new SelectList(Model.Cables, "ID", "Category")) 
} 

jQueryのコール：

<div id="CableWrapper"></div>