动态添加表单元素在MVC3剃刀创建视图 [英] Dynamically Add Form Elements in MVC3 Razor Create View
本文介绍了动态添加表单元素在MVC3剃刀创建视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个表格每次用户点击添加按钮，这些文本框将被重新创建一样用户点击添加按钮大量的时间时间的一组文本框和。下面是我所希望做的图片。
控制器：
//
// GET：/客户/ MyMove /创建 公众的ActionResult的Create（）
{
返回查看（）;
} //
// POST：/客户/ MyMove /创建 [HttpPost]
公众的ActionResult创建（动动）
{
VAR视图模型=新CreateMoveViewModel（）;
的MembershipUser的currentUser = Membership.GetUser（）;
GUID currentUserId =（GUID）currentUser.ProviderUserKey;
如果（ModelState.IsValid）
{
move.UserId = currentUserId;
db.Moves.Add（移动）;
move.AddMoveItem（2）;
db.SaveChanges（）;
返回RedirectToAction（「指数」）;
} 返回查看（移动）;
}
Create.cshtml
@model MovinMyStuff.WebUI.Areas.Client.Models.CreateMoveViewModel
@using Telerik.Web.Mvc.UI
@ {
ViewBag.Title =创建;
}＆LT; H1＆GT;发布移动和LT; / H1＆GT;＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.min.js）TYPE =文/ JavaScript的＆GT; ＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.unobtrusive.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;@using（Html.BeginForm（））{
@ Html.ValidationSummary（真）
＆LT;＆字段集GT;
＆LT; DIV CLASS =形式的项目组最后一个＆GT;
＆LT; DIV CLASS =表单项一半＆GT;
＆LT; DIV CLASS =编辑标记＆GT;
开始日期
＆LT; / DIV＆GT;
Editorfor的型号1 ...
＆LT; DIV＆GT;
@ Html.Partial（_移动选项）
＆LT; / DIV＆GT;
＆LT; /字段集＆GT;
＆LT; DIV CLASS =提交键式包装＆GT;
＆LT;输入类=按钮类型=提交值=邮报/＆GT;
＆LT; / DIV＆GT;
}＆LT; DIV＆GT;
@ Html.ActionLink（返回，索引，空，新的{@class =链接文本}）
＆LT; / DIV＆GT;
视图模型
命名空间MovinMyStuff.WebUI.Areas.Client.Models
{
公共类CreateMoveViewModel
{
公共CreateMoveViewModel（）
{
移动=新举措（）;
MoveItems =新的移动选项（）;
}
公众移动移动{搞定;组; }
公众移动选项MoveItems {搞定;组; }
}
}
部分视图
@model MovinMyStuff.Domain.Entities.MoveItem ＆LT; DIV CLASS =编辑标记＆GT;
选择你家的面积
＆LT; / DIV＆GT;
＆LT; DIV CLASS =主编场＆GT;
@ Html.EditorFor（型号=＆GT; model.MoveItemArea）
@ Html.ValidationMessageFor（型号=＆GT; model.MoveItemArea）
＆LT; / DIV＆GT; ＆LT; DIV CLASS =编辑标记＆GT;
选择您的项目
＆LT; / DIV＆GT;
＆LT; DIV CLASS =主编场＆GT;
@ Html.EditorFor（型号=＆GT; model.MoveItemType）
@ Html.ValidationMessageFor（型号=＆GT; model.MoveItemType）
＆LT; / DIV＆GT; ＆LT; DIV CLASS =编辑标记＆GT;
数量
＆LT; / DIV＆GT;
＆LT; DIV CLASS =主编场＆GT;
@ Html.EditorFor（型号=＆GT; model.Quantity）
@ Html.ValidationMessageFor（型号=＆GT; model.Quantity）
＆LT; / DIV＆GT;
模型的其他属性...
＆LT; DIV CLASS =编辑标记＆GT;
@ Html.HiddenFor（型号=＆GT; model.MoveId）
＆LT; / DIV＆GT;
解决方案
我非常强烈地邀请您阅读<一href=\"http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/\">following文章。它包含了如何实现你所期待的一个例子。它涵盖开始实施这个时候你就会用默认的模型绑定遇到的挑战。为了克服与作者使用自定义集合索引这些挑战 Html.BeginCollectionItem 帮手。
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.
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";
}
<h1>Post a Move</h1>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<div class="form-item-group last">
<div class="form-item half">
<div class="editor-label">
Start Date
</div>
Editorfor for Model1...
<div>
@Html.Partial("_MoveItem")
</div>
</fieldset>
<div class="submit-button-wrapper">
<input class="button" type="submit" value="Post" />
</div>
}
<div>
@Html.ActionLink("Go Back", "Index", null, new { @class = "link-text" })
</div>
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; }
}
}
Partial View
@model MovinMyStuff.Domain.Entities.MoveItem
<div class="editor-label">
Choose Area of Your Home
</div>
<div class="editor-field">
@Html.EditorFor(model => model.MoveItemArea)
@Html.ValidationMessageFor(model => model.MoveItemArea)
</div>
<div class="editor-label">
Choose Your Item
</div>
<div class="editor-field">
@Html.EditorFor(model => model.MoveItemType)
@Html.ValidationMessageFor(model => model.MoveItemType)
</div>
<div class="editor-label">
Quantity
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Quantity)
@Html.ValidationMessageFor(model => model.Quantity)
</div>
Other Properties of model...
<div class="editor-label">
@Html.HiddenFor(model => model.MoveId)
</div>
解决方案
I very strongly invite you to read the following article. It contains an example of how to achieve what you are looking for. It covers the challenges you will encounter with the default model binder when starting to implement this. To overcome those challenges with the collections indexes the author uses a custom Html.BeginCollectionItem helper.
这篇关于动态添加表单元素在MVC3剃刀创建视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
