ASP.NET MVC 4 How to add rows to table containing dropdownlistfor

Question

I have a small table as part of a form. It displays a number alongside a dropdown that allows a user to select a value for to go along with that number. I want to allow the user use add rows to this table and be able to assign as many values as is required. I've been searching Google all day and trying many things but nothing seems to fit my situation. What is the best way to achieve this functionality?

Here is the code from my view containing the table and my add 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>

And here is my controller method from for the action link:

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

        model.Part.PartConnectionTypes.Add(newPartConnectionType);

        return View("Index", model);
    }

and the index method:

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

I appreciate any help anyone can provide.

why not just use a webgrid to do this: http://www.c-sharpcorner.com/UploadFile/2b481f/include-dropdown-list-inside-webgrid-in-web-api/? The link's to show you the concept, rest is on google. Bhavin's answer should work too, but why reinvent the wheel unless the webgrid somehow doesn't fit your needs. — RandomUs1r, Oct 30 '14 at 20:26
If you want to dynamically add new rows and post back the whole collection, then you will need to use javascript/jquery. [This answer](http://stackoverflow.com/questions/24026374/adding-another-pet-to-a-model-form/24027152#24027152) may help you get started. — , Oct 31 '14 at 00:02

score 0 · Answer 1 · answered Oct 30 '14 at 20:19

I would just separate the view for "table rows" to be as a "partial view" and render that on add button click event.

Two was you can achieve this,

1) using jquery, call ajax and let mvc return html to you and you place it right after your "last row" in the table 2) Use mvc ajax form and tell it what to do - render an extra row(placeholder) in the end and give that as an id to replace html on success.

Hope this helps.

ASP.NET MVC 4 How to add rows to table containing dropdownlistfor

1 Answers1