How to implement a client registration form providing additional dynamically-generated fields using jQuery and Asp.Net MVC 3?

I want to create a registration form for a sport competition using Asp.net MVC 3 (Razor view engine).

Each school can have only one team consisting of at most 20 members plus 1 team leader.

The team leader has to register the members by filling in the registration form I provide.

Rather than displaying 20 sets of member fields, it is a good idea开发者_如何学C if I can provide a button Add One More Member to render an additional set of member fields. This mechanism behaves like Add file when you want to attach one more file in Yahoo mail.

Shortly speaking, I have no idea:

1. Is there a mature implementation of jQuery available to implement a form providing additional dynamically-generated form fields?
2. How to implement this scenario in Asp.net MVC 3? How to manage the unknown number of posted form fields?

Edit

Each member has 4 fields:

1. FirstName (string)
2. LastName (string)
3. BirthDate (datetime)
4. Photograph (image file)

---

use a form collection in your controller if you don't know the names:

public ActionResult(FormCollection formFields)
{
        return View();
}

or if you have something like a bunch of team member input textboxes you could give them all the same name and then have an array or list as the parameter:

public ActionResult(String[] teamMembers)
{
        return View();
}

Further still you can do this with objects:

<input type="textbox" name="TeamMember[0].FirstName" />
<input type="textbox" name="TeamMember[0].LastName" />
<input type="textbox" name="TeamMember[1].FirstName" />
<input type="textbox" name="TeamMember[1].LastName" />

and then in your controller

public ActionResult(List<TeamMember> teamMemberList)
{
        return View();
}