0

I have a form that consists of rows similar to this:

@model  Models.Group

@using (Html.BeginForm("Test", "CreateGroup", FormMethod.Post))
{
<form method="post">

<div class="row" id="user2">
    <div class="col-md-3">
        @Html.TextBoxFor(m => m.UserName_2, new { @class = "form-control" })

    </div>
    <div class="col-md-3">
        @Html.TextBoxFor(m => m.UserEmail_2, new { @class = "form-control", @type = "email" })
    </div>
</div>
<div class="col-md-12">
    &nbsp;
</div>
<div class="row" id="user3">
    <div class="col-md-3">
        @Html.TextBoxFor(m => m.UserName_3, new { @class = "form-control" })

    </div>
    <div class="col-md-3">
        @Html.TextBoxFor(m => m.UserEmail_3, new { @class = "form-control", @type = "email" })
    </div>
</div>
<div class="row">
   <div class="col-md-12">
      <button type="submit" class="btn btn-success btn-lg margin-right">
      <span class="glyphicon glyphicon-save"></span> Save
      </button>
   </div>
  </div>
</form>
}

With a model that currently looks like this:

public class Group
{
    public int Id { get; set; }

    public string UserName_2 { get; set; }

    public string UserEmail_2 { get; set; }

    public string UserName_3 { get; set; }

    public string UserEmail_3 { get; set; }
}

How do I get my View to support something like this where I can be able to add more Users without having to hard code the values into my Group model:

public class Group
{
    public int Id { get; set; }

    public List<User> Users { get; set; }
}

public class User
{
    public string Name { get; set; }

    public string Email { get; set; }
}

Edit: Or is there a better way to send the information from my form to the controller than using a Model? I was trying to use FormCollection but that doesn't seem to have any data when I submit

ferensilver
  • 341
  • 2
  • 4
  • 17
  • Start by removing the invalid nested form (i.e. `
    `)
    –  Dec 13 '17 at 04:32
  • Are you wanting to dynamically add (and remove) `User` items in your view? –  Dec 13 '17 at 04:33
  • I would like to dynamically add and remove eventually. – ferensilver Dec 13 '17 at 04:36
  • Then the answer by Oleksii Aza is not suitable. For some options, refer [this answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308), and for a detailed implementation using `BeginCollectionItem`, refer [this answer](http://stackoverflow.com/questions/40539321/partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) –  Dec 13 '17 at 04:38
  • Thanks. I'll look into those now. – ferensilver Dec 13 '17 at 04:45

1 Answers1

1

Try accessing users by index, model binding should pick it up. The code would look like:

@for(int i = 0; i < Model.Users.Length; i++)
{
<div class="row">
    <div class="col-md-3">
        @Html.TextBoxFor(m => Model.Users[i].Name, new { @class = "form-control" })

    </div>
    <div class="col-md-3">
        @Html.TextBoxFor(m => Model.Users[i].Email, new { @class = "form-control", @type = "email" })
    </div>
</div>
}
Oleksii Aza
  • 5,368
  • 28
  • 35
  • I think this looks right. Am I using a Model correctly here though? This page is a blank form where a user can enter names that I want to store into a list. This is the basic layout: https://i.imgur.com/TZD7WAP.png – ferensilver Dec 13 '17 at 04:32
  • I guess you should initiate a list of users so it contains certain amount of users. – Oleksii Aza Dec 13 '17 at 04:36
  • That would not allow the user to dynamically add (or remove) `User` items n the view (only edit existing ones) –  Dec 13 '17 at 04:39
  • @StephenMuecke agreed, probably then it is better to use JS for handling dynamic adding/removing, which is pretty much covered by links you've pointed. – Oleksii Aza Dec 13 '17 at 04:43