2014-10-30 94 views
0

我有一個小表作爲表單的一部分。它顯示一個數字,旁邊有一個下拉列表,允許用戶選擇一個值來跟隨該數字。我想允許用戶使用添加行到這個表,並能夠根據需要分配儘可能多的值。我一直在搜索谷歌並嘗試很多東西,但似乎沒有任何東西符合我的情況。什麼是實現這種功能的最佳方式?ASP.NET MVC 4如何向包含dropdownlist的表添加行

這裏是包含表我的觀點的代碼和我的外接ActionLink的:

<div class="form-group"> 
    @Html.LabelFor(m=>m.Part.PartConnectionTypes, new {@class = "control-label col-md-5"}) 
     <div class="col-md-7"> 
      <table class="table table-condensed table-striped table-bordered"> 
       <thead> 
        <tr> 
         <td>Number</td> 
         <td>Value</td> 
        </tr> 
       </thead> 
       <tbody> 
        @{ 
         for(var i = 0; i < Model.Part.PartConnectionTypes.Count; i++) 
         { 
          var count = i + 1; 
          <tr> 
           <td>@count</td> 
           <td>@Html.DropDownListFor(m => m.Part.PartConnectionTypes[i].ConnectionType, new SelectList(Model.ConnectsTo, "CodeId", "ValChar"), "", new { @class = "form-control" })</td> 
          </tr> 
          } 
         } 
        </tbody> 
       </table> 
       @Html.ActionLink("Add Connection", "AddNewPartConnection", "Home", new { id = "addConnection"}) 
      </div> 

這裏是從操作鏈接我的控制器方法:

public ActionResult AddNewPartConnection(IndexViewModel model) 
    { 
     var newPartConnectionType = new PartConnectionType(); 

     model.Part.PartConnectionTypes.Add(newPartConnectionType); 

     return View("Index", model); 
    } 

和索引方法:

public ActionResult Index(string searchString) 
    { 
     var model = new IndexViewModel { Part = new Part() }; 
     model.Part.PartConnectionTypes.Add(new PartConnectionType()); 
     if (!String.IsNullOrEmpty(searchString)) 
     { 
      model.Part = CoreLogic.GetPartByPartCode(searchString); 
      if (model.Part == null) 
      { 
       model.Part = new Part(); 
       model.Part.PartConnectionTypes.Add(new PartConnectionType()); 
       ViewBag.SearchMessage = "That is not a current part"; 
      } 
     } 
     return View(model); 
    } 

我很欣賞任何人都可以提供的幫助。

+0

爲什麼不只是使用webgrid來做到這一點:http://www.c-sharpcorner.com/UploadFile/2b481f/include-dropdown-list-inside-webgrid-in-web-api/?該鏈接向您展示了這個概念,其餘部分在谷歌上。 Bhavin的答案也應該起作用,但爲什麼要重新發明輪子,除非webgrid無法滿足您的需求。 – RandomUs1r 2014-10-30 20:26:05

+0

如果您想要動態添加新行並回發整個集合,那麼您將需要使用javascript/jquery。 [這個答案](http://stackoverflow.com/questions/24026374/adding-another-pet-to-a-model-form/24027152#24027152)可以幫助你開始。 – 2014-10-31 00:02:47

回答

0

我只是將「表格行」的視圖分開爲「部分視圖」,並在添加按鈕單擊事件時進行渲染。

二是你可以做到這一點,

1)使用jQuery,調用Ajax和讓MVC返回HTML給你,你 放置在表 2)使用MVC AJAX的「最後一排」之後 窗體並告訴它該怎麼做 - 在 結尾渲染一個額外的行(佔位符),並將其作爲id來取代成功的html。

希望這會有所幫助。

相關問題