ASP.NET MVC form Edit and Add to a collection property

I have a model that looks like this:

public class Book
{
    public string Name { get; set; }
    public IEnumerable<Author> Authors { get; set; }
}

public class Author
{
    public string FullName { get; set; }
    public DateTime BirthDate { get; set; }
}

I have a form in a view for editing a book. The section for editing the Authors collection is in a partial view. The form fields are generated with the Html.Editor开发者_运维问答For() method.

It works well for editing existing data. What I would like to do is to put in the Authors editing partial view multiple blank entries that if the user fills them they will be added as new items to the Authors collection.

The final view should look something like this: http://s1.postimage.org/6g9rqfp20/image.jpg

What is the correct way to achieve this behavior?

If you are using MVC2 this is your best bet

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx#related-results

I am not sure how interested you are in using javascript libraries to get what you are looking to get done, but here is a great example of what you are trying to do: Contact Editor Example

It uses the knockouts library which allows you to work with JavaScript data binding. This also gives you a nice thick application feel on the web which users generally like.

If you are still curious about how this works with serverside, you can look at this presentation from Mix11

Good luck.