0

Spent a bit of time coming up with a suitable title, I'm not sure if I worded it correctly. For my example, I will use a Person object, but my real application is using something more domain-specific:

public class Person {
    public string Name { get; set;}
    public string Gender { get; set; }
    public string HairColor{ get; set; }
}

Basically, my requirements are to allow the user can input 0 - 10 Person objects, which will map to a List<Person> People property in the model.

The way I was thinking about doing this is having a block of inputs related to a single Person:

<div>
  <label for="name">Name</label>
  <input type="text" name="name">
</div>

<div>
  <label for="gender">Gender</label>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
</div>

<div>
  <label for="hairColor">Hair Color</label>
  <input type="radio" name="hairColor" value="black"> Black
  <input type="radio" name="hairColor" value="brown"> Brown
  <input type="radio" name="hairColor" value="blonde"> Blonde
  <input type="radio" name="hairColor" value="red"> Red
</div>

with a "Add another" button on the bottom, which will append an additional block of these inputs using JQuery.

My question is, how would I generate the name attribute in the html input tags to bind to the List<Person> properly? Would <input type="text" name="People[0].Name"> work?

Steve Pak
  • 152
  • 1
  • 13

2 Answers2

0

Split your page into 2 partial views. The first partial view is going to return the list of saved people. the second partial view would be the view where you add a new person.

So one first load of your page you are just showing you list with a button for "Add another". Clicking "Add another" will call the AddPerson partial view getter using jquery and replace a div with the partial view you just called.

Clicking save in the AddPerson partial view would then post the new person and refresh the list.

Fran
  • 6,440
  • 1
  • 23
  • 35
  • I forgot to mention, this isn't the only part of the form. The application has many other parameters. So posting in the middle of the inputting a single one of these blocks is not ideal. I would prefer it if the user can enter each "Person" and only post it at the very end. But I am confused how to configure the "name" attribute of the html input tag to properly bind to the list in my model. – Steve Pak Jul 21 '16 at 16:04
0

I'm not sure how you're intending on taking the data from the page and accessing it on the asp.net side. Typically you need runat="server" tags for things that will be accessed by the server.

You specify that you want duplicates of that block to be generated on button click, but via JQuery. If you want to do this, you need to make a string variable of the HTML block you're trying to duplicate. Using some basic string concatenating and looping, you can have name=name0, name=gender0, ... etc. in your inputs. When you press "add another", add +1 to an increment that gets appended to the names in your string, so that they're name=name1, name=gender1, etc.

peyote boy
  • 66
  • 1
  • 2
  • From my understanding using ASP.NET MVC, when you use a form and send it back to the server using a post request, it would get sent to the post action of the controller, which will then bind the form elements to the properties of the model. I had a pretty good idea on how to generate the blocks using JQuery, so thanks for confirming on that, but that's not the area I needed help in. – Steve Pak Jul 21 '16 at 20:12
  • @StevePak On the server side, however you access the POST parameters, just loop a counter up to the amount of "Add Person" blocks you created. Access the data like `POST["name" & counter]`, `POST["gender" & counter]`, etc. Is that more along the lines of what you're asking? – peyote boy Jul 21 '16 at 20:27