Can not bind Collections of Model Types

Question

I have these two model classes:-

public partial class SkillLevel
{
  public int SkillID { get; set; }
  public int LevelID { get; set; }
  public string Description { get; set; }
  public string TestProcess { get; set; }

  public virtual Level Level { get; set; }
  public virtual Skill Skill { get; set; }
}

public partial class Skill
{
  [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
  public Skill()
  {
    this.SkillLevels = new HashSet<SkillLevel>();
    this.SkillLevelStaffs = new HashSet<SkillLevelStaff>();
    this.SkillVersionHistories = new HashSet<SkillVersionHistory>();
    this.Customers = new HashSet<Customer>();
    this.LinkToKBs = new HashSet<LinkToKB>();
  }

  public int SkillID { get; set; }
  public string Name { get; set; }
  public bool IsAllCustomer { get; set; }
  public string Description { get; set; }
  //code goes here

  [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
  public virtual ICollection<SkillLevel> SkillLevels { get; set; }

}

Now each skill will have zero to four SkillLevel records and I need to modify the Skill create view to display four sections, where user can add skilllevel.Description and skilllevel.TestProcess. I know that I can bind a collection by using [i] , but not sure how i need to modify my EditorFor to handle this, so to have something such as inside the Skill Create view:

@model SkillManagement.Models.Skill
<h2>Create</h2>
@using (Html.BeginForm()) 
{
  @Html.AntiForgeryToken()
  <div class="form-horizontal">
    <h4>Skill</h4>
    <hr />
    @Html.ValidationSummary(true)
    **//TESTING ONLY
    @Html.EditorFor(model => model.SkillLevels.[0].TestProcess)
    @Html.EditorFor(model => model.SkillLevels.[0].Description)
    <br/>
    @Html.EditorFor(model => model.SkillLevels.[1].TestProcess)
    @Html.EditorFor(model => model.SkillLevels.[1].Description)**
    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Create" class="btn btn-default" />
      </div>
    </div>
  </div>
}
<div>
  @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

The post Create action method is:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create( Skill skill)
{
  if (ModelState.IsValid)
  {

Can anyone adivce on this please?

EDIT

I wrote the following inside my Create view:-

@for (var i = 0; i < 4; i++)
{  
  <div>
    @Html.Editor("SkillLevels[" + i.ToString() + "].TestProcess") 
    @Html.Editor("SkillLevels[" + i.ToString() + "].Description") 
    @{string v = (i + 1).ToString();}
    @Html.Hidden("SkillLevels["+i.ToString()+"].LevelID", v  ) 
  </div>
}

and i have the following Post Create Action method:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create( Skill skill)
{
  if (ModelState.IsValid)
  {
    db.Skills.Add(skill);        
    await db.SaveChangesAsync();
    return RedirectToAction("Index");
  }

Now i was able to add the Skill + the 4 SkillLevels which is great.

But if I use the same view for Edit, then the

....     
@Html.Editor("SkillLevels[" + i.ToString() + "].TestProcess") 
@Html.Editor("SkillLevels[" + i.ToString() + "].Description") 
....

will be rendering empty fields, instead of that I though that it will read the model properties and display the 4 skillLevels so the user can edit them. Can you advise how i need to construct my Edit view? Thanks