Dynamically growing text fields

What's the best way to approach the following situation in asp.net mvc2 (c#):

I have a form where a user can add more fields ... for example I ask user the details of personal computing devices that they have. For simplicity sake let's 开发者_运维百科say I ask for the brand and type (dropdown list of Desktop/Laptop/Tablet/Other) and they can provide unlimited devices. I will start with a pair of text boxes:

<label>Type</label>
<select><option>Desktop</option><option>Laptop</option><option>Tablet</option><option>Other</option></select>
<label>Brand</label>
<input type="text" />
<input type="button" value="Add more device" />

And then as user click the "Add more device" button I will display another pair of Brand and Type text boxes ... and so on.

My question is how should I use HTML helper for this, how I construct the viewModel, etc.

I am from PHP background and I used to use the following in PHP:

<input type="text" name="brand[]" />

which on the back end will give me an array of brands ... not sure if that's doable in asp.net environment. I would appreciate any input. Thank you.

[I added the following lines to make my question clearer] I think I have not been very clear with my question.

Suppose I have the following viewmodel:

public class UserRegisterViewModel
{
    public string DeviceBrand { get; set; }
    public string DeviceType { get; set; }
}

That works well when I have two text boxes:

<%: Html.TextBoxFor(m => m.DeviceBrand) %>
<%: Html.TextBoxFor(m => m.DeviceType) %>

but the situation that I am facing is I need to allow user to add more pair of device brand and type text boxes ... user should be able to add as many as he needs to.

How should I write my viewmodel and view?

I hope this makes my question a bit clearer. I don't have problem in hiding and showing the text boxes (and yes I use JQuery for that).

Thank you.

In C#, like C++ arrays are fixed sizes. You can however use a List<> to do something similar. It allows you to dynamically add data with an add function. Like so:

List<object> name = new List<object>();
name.Add(an_object);

So say a list of strings:

List<string> myStrings == new List<string>();
myStrings.Add("Blah");

They're accessed just like arrays - Console.WriteLine(myStrings[0]) outputs Blah

Depending on scenarion there are following solutions:

• If you already know which Textboxes will be shown add them in your page and set their visiblity to false (like in CSS "display:none") And show them later.

• If you dont know in advance which textboxes will be shown you can still append them in HTML DOm (Add it to your page's controls collection)

To show them there are two apporaches:

• In first case Either use jQuery or Javascript to show them back.

• In first case Use can also do it from server side that will result in whole page post back.

• In second Apporach Also you can use jQuery or Javascript to add new textboxes in the form

• In second case you can add new boxes from your C# code on server but again it will result in whole page post back.

Use any approach that best suits you

What you can do is having UserRegister as Model and have UserRegisterViewModel whith List property

Then in your view you can have loop to render your viewmodel list property

in a foreach for example in C#

Lets say you have your ViewModel defined as:

 public class BrandListViewModel
 {
      public List<UserRegisterViewModel> Brands {get;set;}
 }

Your View would need to output HTML as:

 <select name="Brands[0].DeviceType">...</select>
 <input type="text" name="Brands[0].DeviceBrand"/>

and

 <select name="Brands[1].DeviceType">...</select>
 <input type="text" name="Brands[1].DeviceBrand"/>

You need to keep the index going so that the model binder can construct your list in the correct order. Now, you could use jQuery to do this and as you append items to the page just get a count and increment by one. If you want to remove a single one, you need to rename all of the fields.

You could also use a pure jQuery method, parse the elements, push items to an array and send the array to the server.