ASP.NET MVC 4 如何将行添加到包含下拉列表的表中答案

【问题标题】：ASP.NET MVC 4 How to add rows to table containing dropdownlistforASP.NET MVC 4 如何将行添加到包含下拉列表的表中
【发布时间】：2014-10-30 20:04:26
【问题描述】：

我有一张小桌子作为表格的一部分。它在下拉列表旁边显示一个数字，允许用户选择一个与该数字一起使用的值。我希望允许用户使用向该表添加行并能够根据需要分配尽可能多的值。我整天都在搜索谷歌并尝试了很多东西，但似乎没有什么适合我的情况。实现此功能的最佳方法是什么？

这是我的视图中包含表格和添加操作链接的代码：

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

感谢任何人提供的任何帮助。

【问题讨论】：

为什么不直接使用 webgrid 来做到这一点：c-sharpcorner.com/UploadFile/2b481f/…？该链接向您展示了这个概念，其余的都在谷歌上。 Bhavin 的答案也应该有效，但是除非 webgrid 不符合您的需求，否则为什么要重新发明轮子。
如果要动态添加新行并回发整个集合，则需要使用 javascript/jquery。 This answer 可能会帮助您入门。

标签： javascript c# jquery asp.net-mvc html.dropdownlistfor

【解决方案1】：

我只是将“表格行”的视图分离为“部分视图”并在添加按钮单击事件时呈现它。

二是你可以做到这一点，

1) 使用jquery，调用ajax，让mvc返回html给你和你将其放在表格中的“最后一行”之后 2) 使用 mvc ajax 形成并告诉它要做什么 - 在中渲染一个额外的行（占位符）结束并将其作为 id 来替换成功时的 html。

希望这会有所帮助。

【讨论】：