使用Jquery动态加入对象的集合属性,提交集合属性到表单
1、设置模型,引入构造函数,初始化集合
public class Person
{
public Person() //引入构造函数,初始化集合.如果未设置构造函数,集合会出现错误。
{
Skills = new HashSet<string>();
BirthDate = DateTime.Now.AddDays(-20);
}
public int PersonId { get; set; }
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public DateTime BirthDate { get; set; }
[Required]
[UIHint("BooleanButtonLabel")] //给指定字段指定显示模板。用于html模板辅助方法,比如html.DisplayForModel
public bool LikesMusic { get; set; }
[Required]
[EmailAddress]
public string EmailAddress { get; set; }
public ICollection<string> Skills { get; set; }
}
2、设置控制器方法
public ActionResult Create()
{
var person = new Person();
return View(person);
}
[HttpPost]
public ActionResult Create(Person person)
{
if (ModelState.IsValid)
{
_people.Add(person);
return RedirectToAction("Index");
}
return View(person);
}
3、使用基架生成强类型视图
@model BootstrapMVC30Days.Models.Person
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(model => model.LikesMusic, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.LikesMusic)
@Html.ValidationMessageFor(model => model.LikesMusic, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Skills, htmlAttributes: new { @class ="control-label col-md-2"})
<div class="col-md-10">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" id="add-skill" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
<input type="text" id="skill" class="form-control" placeholder="输入然后点击 + 加入" />
</div>
</div>
</div>
<div id="skills-wrapper"></div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<ul id="skills-list" class="list-group"></ul>
</div>
</div>
<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>
4、在页面底部引入脚本 。虽然我们加入了多个同名(name相同)的隐藏表单,但模型绑定会将它作为集合来处理。
@section Scripts {
<script>
$(function () {
$("#add-skill").click(function () {
//取得文本框的值
var skill = $("#skill").val();
//加入隐藏输入到表单
$("#skills-wrapper").append($("<input type='hidden' name ='Skills' value='" + skill + "' />"));
//加入输入到列表框用于显示
$("#skills-list").append($("<li class='list-group-item'> " + skill + "</li>"));
//重置表单,文本框获得焦点
$("#skill").val("").focus;
});
});
</script>
@Scripts.Render("~/bundles/jqueryval")
}
使用Jquery动态加入对象的集合属性,提交集合属性到表单的更多相关文章
- jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
指定元素中包含 id 属性的, 如: $("span[id]") 代码如下: <span id="span1" name="S1"&g ...
- jQuery 基础 : 获取对象 根据属性、内容匹配, 还有表单元素匹配
指定元素中包含 id 属性的, 如: $("span[id]") <span id="span1" name="S1">AA ...
- 为何jquery动态添加的input value无法提交到数据库?【坑】
有两个输入框,我想让第一个输入框失去焦点以后,第二个输入框自动获取第一个输入框的value为默认值,jquery代码如下,可以正常显示,但是用PHP提交数据,并插入数据库的时候确实空值,尚未查找到原因 ...
- jQuery插件:Ajax将Json数据自动绑定到Form表单
jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...
- 【jquery采坑】Ajax配合form的submit提交(微擎表单提交,ajax验证,submit提交)
1.采坑:实现form的submit提交,在提交之前,进行ajax的不同校验,然后onsubmit=return check(),进行提交 1/1 目的:可以实现以 from的submit提交,然后还 ...
- 原 form 表单中 disabled 属性的元素不参与表单提交
https://blog.csdn.net/benben683280/article/details/79173336
- jQuery实现form表单序列化转换为json对象功能示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 【.net+jquery】绘制自定义表单(含源码)
前言 两年前在力控的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了.没想到两年多后再这有重新提出要写一个绘制表单的功能.对此也是有点小激动呢?总共用时8.5天的时间基本功能也 ...
- HTML5 表单新增属性
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...
随机推荐
- android L版本AAL新架构
[DESCRIPTION] 和之前KK版本相比,在L版本上面AAL的架构也有发生一些改变. 拿掉了之前KK平台上使用的MTK LABC,使用Android原生的自动背光功能. AALService内部 ...
- 新版VS-code如何自动换行?
文件 -> 首选项 -> 设置 -> 编辑器 找到 // 控制折行方式.可以选择: - "off" (禁用折行), - "on" (视区折行 ...
- 【git】远程仓库版本回退方法
1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况,于是做了一下研究,写下这篇博客. 2 问题 如果提交了一个错误的版本,怎么回退版本? 如果提交了一个错误的版本到远程分支,怎么回退远程分支 ...
- UVA 11827 Maximum GCD【GCD,stringstream】
这题没什么好说的,但是输入较特别,为此还WA了一次... 题目链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge& ...
- eclipse设置每次提交代码忽略target、.settings、.svn、.project文件
- arcengine 文件夹连接
Provides access to members that manages a GX catalog. Product Availability Available with ArcGIS Des ...
- jenkins修改日志级别方法
1.jenkins日志有时候也会消耗掉很大内存,在传输时也会消耗掉大量带宽,如图,300+M的日志大小,太夸张了吧 2.修改日志级别的方法: 在配置文件里修改,重启后永久生效,配置路径:/etc/sy ...
- 【Todo】开个文章学VUE咯
2017年FE架构组制定的框架选型主导为VUE.看了一下VUE的介绍,很不错. 开学~ https://www.zhihu.com/question/38213423 这个里面有VUE应用和背景的一些 ...
- [TypeScript] Transform Existing Types Using Mapped Types in TypeScript
Mapped types are a powerful and unique feature of TypeScript's type system. They allow you to create ...
- Android系统改动时间格式为24小时制
1. frameworks/base/packages/SettingsProvider/res/values/defaults.xml 添加<stringname="time_12_ ...