Aggiungi dynamicmente gli elementi del modulo in MVC3 Razor Crea vista

Mi piacerebbe creare un modulo con un gruppo di caselle di testo e ogni volta che un utente fa clic sul pulsante Aggiungi, queste caselle di testo verranno ricreate tante volte quante l’utente fa clic sul pulsante Aggiungi. Ecco una foto di ciò che sto cercando di fare. inserisci la descrizione dell'immagine qui

controller:

// // 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); } 

Create.cshtml

 @model MovinMyStuff.WebUI.Areas.Client.Models.CreateMoveViewModel @using Telerik.Web.Mvc.UI @{ ViewBag.Title = "Create"; } 

Post a Move

@using (Html.BeginForm()) { @Html.ValidationSummary(true)
Start Date
Editorfor for Model1...
@Html.Partial("_MoveItem")
}
@Html.ActionLink("Go Back", "Index", null, new { @class = "link-text" })

ViewModel

 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; } } } 

Vista parziale

 @model MovinMyStuff.Domain.Entities.MoveItem 
Choose Area of Your Home
@Html.EditorFor(model => model.MoveItemArea) @Html.ValidationMessageFor(model => model.MoveItemArea)
Choose Your Item
@Html.EditorFor(model => model.MoveItemType) @Html.ValidationMessageFor(model => model.MoveItemType)
Quantity
@Html.EditorFor(model => model.Quantity) @Html.ValidationMessageFor(model => model.Quantity)
Other Properties of model...
@Html.HiddenFor(model => model.MoveId)

Vi invito molto fortemente a leggere il seguente articolo . Contiene un esempio di come ottenere ciò che stai cercando. Copre le sfide che incontrerai con il raccoglitore modello predefinito quando inizi a implementarlo. Per superare tali problemi con gli indici delle collezioni, l’autore utilizza un helper Html.BeginCollectionItem personalizzato.

Bene, ho provato a creare una vista parziale con il modello di cui hai bisogno, La chiave sarà aggiungere il codice HTML generato dalla vista parziale ogni volta che fai clic sul pulsante con ajax per esempio:

Il tuo modello

  public class example { public int Length { get; set;} public int Width { get; set;} public int Height {get; set;} } 

La tua azione

 public ActionResult Example() { return View(); } 

La tua vista parziale

 @model FooExample.Model.Example @{ Layout = null; } 
@Html.EditorFor(model => model.Length)
@Html.EditorFor(model => model.Width)
@Html.EditorFor(model => model.Height)

La tua vista principale

  

Ora questo è il copione

 $(document).ready(function(){ $("#btnAddRows").click(function(){ $.ajax({ url: 'your path to the action' data : 'if you need to pass parameters' datatype: 'html', success: function(data){ $("#addViews").append(""+data+""); } }) }); }); 

Ecco una spiegazione su come ho implementato situazioni simili in passato: https://stackoverflow.com/a/10583792/1373170

È più complicato dal momento che ha richiesto di supportare anche la modifica e l’eliminazione. L’idea principale è di avere un modello nascosto (creato con un EditorTemplate ), utilizzato per creare nuove righe e un po ‘di JavaScript per denominare automaticamente tutti i nuovi elementi in un modo che sarà automaticamente interpretato dal raccoglitore predefinito di MVC e trasformato in Elenco appropriato di ViewModels nell’azione.