2014-10-30 58 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。

希望这会有所帮助。

相关问题