title: Dynamically Add Form Elements in MVC3 Razor Create View
body: <p>I'd like to create a form with a group of text boxes and every time a user clicks the add button those text boxes will be recreated as many time as the user clicks the add button. Here is a picture of what I am looking to do.<img src="https://i.stack.imgur.com/wuHLG.jpg" alt="enter image description here"></p>
  
  <h2>Controller:</h2>
  
  <pre><code>    //
      // GET: /Client/MyMove/Create
  
      public ActionResult Create()
      {
          return View();
      }
  
      //
      // POST: /Client/MyMove/Create
  
      [HttpPost]
      public ActionResult Create(Move move)
      {
          var viewModel = new CreateMoveViewModel();
          MembershipUser currentUser = Membership.GetUser();
          Guid currentUserId = (Guid)currentUser.ProviderUserKey;
          if (ModelState.IsValid)
          {                
              move.UserId = currentUserId;
              db.Moves.Add(move);
              move.AddMoveItem(2);
              db.SaveChanges();
              return RedirectToAction("Index");
          }
  
          return View(move);
      }
  </code></pre>
  
  <h2>Create.cshtml</h2>
  
  <pre><code>@model MovinMyStuff.WebUI.Areas.Client.Models.CreateMoveViewModel
  @using Telerik.Web.Mvc.UI
  @{
      ViewBag.Title = "Create";
  }
  
  &lt;h1&gt;Post a Move&lt;/h1&gt;
  
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;    &lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  @using (Html.BeginForm()) {
  @Html.ValidationSummary(true)
  &lt;fieldset&gt;
      &lt;div class="form-item-group last"&gt;
          &lt;div class="form-item half"&gt;
              &lt;div class="editor-label"&gt;
                  Start Date
              &lt;/div&gt;
  Editorfor for Model1...
      &lt;div&gt;
          @Html.Partial("_MoveItem")
      &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;div class="submit-button-wrapper"&gt;
      &lt;input class="button" type="submit" value="Post" /&gt;
  &lt;/div&gt;
  }
  
  &lt;div&gt;
      @Html.ActionLink("Go Back", "Index", null, new { @class = "link-text" })
  &lt;/div&gt;
  </code></pre>
  
  <h2>ViewModel</h2>
  
  <pre><code>namespace MovinMyStuff.WebUI.Areas.Client.Models
  {
  public class CreateMoveViewModel
  {
      public CreateMoveViewModel()
      {
          Moves = new Move();
          MoveItems = new MoveItem();
      }
      public Move Moves { get; set; }
      public MoveItem MoveItems { get; set; }
  }
  }
  </code></pre>
  
  <h2>Partial View</h2>
  
  <pre><code>@model MovinMyStuff.Domain.Entities.MoveItem
  
      &lt;div class="editor-label"&gt;
          Choose Area of Your Home
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.MoveItemArea)
          @Html.ValidationMessageFor(model =&gt; model.MoveItemArea)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          Choose Your Item 
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.MoveItemType)
          @Html.ValidationMessageFor(model =&gt; model.MoveItemType)
      &lt;/div&gt;
  
      &lt;div class="editor-label"&gt;
          Quantity
      &lt;/div&gt;
      &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.Quantity)
          @Html.ValidationMessageFor(model =&gt; model.Quantity)
      &lt;/div&gt;
  Other Properties of model...
  
  
      &lt;div class="editor-label"&gt;
          @Html.HiddenFor(model =&gt; model.MoveId)
      &lt;/div&gt;
  </code></pre>