如何绑定列表 <T> 在ASP.Net MVC C＃的表单发布中

Question

I have a model that contains a list property List<EducationalBackground> EducationalBackground and in the razor form I want the user to enter multiple institutions.

Model

public class Application
{
    ...
    [Required(ErrorMessage = "Required Field")]
    public List<EducationalBackground> EducationalBackground { get; set; }
    ...
    public Application() 
    {
        ...
        EducationalBackground = new List<Library.EducationalBackground>();
        ...
    }
}

Here is the class:

public class EducationalBackground
{
    public string InstituteName { get; set; }
    ...
}

In the razor view I am trying like this

@Html.TextBoxFor(m => m.EducationalBackground[0].InstituteName, new { @class = "form-control" })

but obviously it doesn't work because the list ( EducationalBackground ) is empty.

The user will have a "Add New Institution" button, so the initial list size is unknown

How do I properly accomplish this?

UPDATE Found my solution. Look for my post in the answer section

Answer 1

I am not quite sure what is the purpose of your view to edit a list of EducationalBackground or to add new ones. If you want to edit them you obviously need to take them from somewhere like database for example.

1. Edit case:

In the action you have:

EducationalBackground = new List<Library.EducationalBackground>
{
     new EducationalBackground(...),
     new EducationalBackground(...),
     new EducationalBackground(...),
     ..... //How many you want
}

In the view you have:

@foreach(var educationbackground in Model)
{
    @Html.TextBoxFor(m => educationbackground.InstituteName, new { @class = "form-control" })
}

2. Add new ones.

If you want to add new ones and as you have answered you may use simple html syntax to achieve that: If you dont know the size of the list you want to add you may choose another way like in jQuery or angularjs to do this for you:

<script type="text/javascript">
    $(document).ready(function(){
        var size = 0;
        $("#btnAdd").click(function(){
             $(".someDiv").append("<input type='text' name='EducationalBackground["+size+"].InstituteName' class='form-control' />");
             size++;
        })
    })
</script>

EDIT for fiddle

Take a look at this fiddle here

Answer 2

Change the constructor of the Application class to this:

EducationalBackground = new List<Library.EducationalBackground>() 
{
    new Library.EducationalBackground()
};

Answer 3

I found my answer. I can bind multiple EducationalBackground items like this

<input type="text" name="EducationalBackground[0].InstituteName" class="form-control" />
<input type="text" name="EducationalBackground[1].InstituteName" class="form-control" />
<input type="text" name="EducationalBackground[2].InstituteName" class="form-control" />

When the form posts, it will create a list of size 3

The user will have a "Add New Institution" button, so following this pattern, I will use JS to generate, on the fly, new input elements