Mvc form提交
在项目开发中，我们离不开表单提交，本篇主要记录mvc的Ajax.BeginForm提交方式。
- 需要用到的js
@Url.Script("~/Content/Scripts/jquery-1.7.1.js")
@Url.Script("~/Content/Scripts/jquery.validate.min.js")
@Url.Script("~/Content/Scripts/jquery.validate.unobtrusive.min.js")
@Url.Script("~/Content/Scripts/jquery.unobtrusive-ajax.min.js")
- 表单
@using (Ajax.BeginForm("EditUser", "UserCenter", new
AjaxOptions { Url = Url.Action("EditUser"), HttpMethod = "POST", OnSuccess = "ajaxForm" }, new { id = "editeForm" })){
@Html.AntiForgeryToken()
<table
border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td
width="13%" align="right">@Html.LabelFor(model => model.nickname):
</td>
<td
width="87%">@Html.TextBoxFor(model => model.nickname, new { @class = "input1" })
@Html.ValidationMessageFor(model => model.nickname)
<span
class="red ml10">*</span><span
class="f12 cGray">必填</span></td>
</tr>
<tr>
<td
align="right">@Html.LabelFor(model => model.email):
</td>
<td
id="td_email">@{
if (Model != null)
{
if (string.IsNullOrEmpty(Model.email))
{
<font
class="red">未绑定邮箱
</font>
<a
href="javascript:void(0)" onclick="triggerLi(3)"class="cBlue f12 ml10">
马上去绑定</a>}
else
if (Model.email_verified == 0){
@Html.Raw(Model.email)
<font
class="red">未验证</font>
<a
href="javascript:void(0)" onclick="triggerLi(3)"class="cBlue f12 ml10">马上去验证</a>
}
else
{
@Html.Raw(Model.email) <span>已绑定</span>
}
}
}
</td>
</tr>
<tr>
<td
align="right">@Html.LabelFor(model => model.mobile):
</td>
<td
id="td_mobile">@{
if (Model != null)
{
if (string.IsNullOrEmpty(Model.mobile))
{
<font
class="red">未绑定手机
</font>
<a
href="javascript:void(0)" onclick="triggerLi(4)"class="cBlue f12 ml10">
马上去绑定</a>}else
if (Model.mobile_verified == 0){
@Html.Label(Model.mobile)
<font
class="red">未验证</font>
<a
href="javascript:void(0)" onclick="triggerLi(4)"class="cBlue f12 ml10">马上去验证</a>
}
else
{
@Model.mobile <span>已验证</span>
}
}
}
</td>
</tr>
<tr>
<td
align="right">@Html.LabelFor(model => model.qq):
</td>
<td>
@Html.TextBoxFor(model => model.qq, new { @class = "input1" })
@Html.ValidationMessageFor(model => model.qq)
</td>
</tr>
<tr>
<td
align="right">@Html.LabelFor(model => model.sex):
</td>
<td>
@{
Collection<CodeDescription> sex = ViewBag.Sex as
Collection<CodeDescription>;}@Html.RadioButtonListFor(model => model.sex, sex, System.Web.UI.WebControls.RepeatDirection.Horizontal)
@Html.ValidationMessageFor(model => model.sex)
</td>
</tr>
<tr>
<td
align="right">@Html.LabelFor(model => model.birthday):
</td>
<td>
@Html.TextBoxFor(model => model.birthday, new { @class = "Wdate", onClick = "WdatePicker()" })
@Html.ValidationMessageFor(model => model.birthday)
</td>
<tr>
<td
align="right">@Html.LabelFor(model => model.province_id):
</td>
<td>
@Html.HiddenFor(model => model.province_id)
@Html.HiddenFor(model => model.city_id)
<span
id="span_province"></span><span
id="span_city" style="margin-left: 10px"></span>@*@Html.EditorFor(model => model.Address)
@Html.ValidationMessageFor(model => model.Address)*@
</td>
</tr>
<tr>
<td
align="right">@Html.LabelFor(model => model.job):
</td>
<td>
@{
Collection<CodeDescription> Vocation = ViewBag.Vocation as
Collection<CodeDescription>;}@Html.RadioButtonListFor(model => model.job, Vocation, System.Web.UI.WebControls.RepeatDirection.Horizontal)
@Html.ValidationMessageFor(model => model.job)
</td>
</tr>
<tr
class="bg"><td
valign="top" align="right">@Html.LabelFor(model => model.trade_style):
</td>
<td>
@{
Collection<CodeDescription> InvestmentStyle = ViewBag.InvestmentStyle as
Collection<CodeDescription>;}@Html.RadioButtonListFor(model => model.trade_style, InvestmentStyle, System.Web.UI.WebControls.RepeatDirection.Horizontal)
@Html.ValidationMessageFor(model => model.trade_style)
</td>
</tr>
<tr
class="bg"><td
class="pb10" valign="top" align="right">@Html.LabelFor(model => model.trade_begin):
</td>
<td
class="pb10">@{
List<SelectListItem> dorpDownList = new
List<SelectListItem>();for (int year = 1990; year < DateTime.Now.Year; year++)
{
SelectListItem selectListItem = new
SelectListItem();if (Model != null && Model.trade_begin == year)
{
selectListItem.Selected = true;
}
selectListItem.Text = year.ToString();
selectListItem.Value = year.ToString();
dorpDownList.Add(selectListItem);
}
}
@Html.DropDownListFor(model => model.trade_begin, dorpDownList) 年
@Html.ValidationMessageFor(model => model.trade_begin)
</td>
</tr>
<tr>
<td
class="tc" colspan="2"><input
class="btn" value="提交修改"
type="submit" name=""></td>
</tr>
</tbody>
</table>
}
表单中的用户昵称采用
[Required(ErrorMessage = "请输入昵称")]
[Remote("UniqueNickCheck", "Account", ErrorMessage = "昵称已存在", HttpMethod = "post")]
[StringLength(8, MinimumLength = 2, ErrorMessage = "长度介于2-8位")]
[Display(Name = "昵称")]
public
string nickname { get; set; }
配置验证唯一性。
- 实体
public
class
UserInfo{
public
int ret { set; get; }public
string msg { set; get; }///
<summary>///
用户编号///
</summary>[ScaffoldColumn(false)]
public
string userid { set; get; }///
<summary>///
用户名///
</summary>[ScaffoldColumn(false)]
public
string username { set; get; }[Required(ErrorMessage = "请输入昵称")]
[Remote("UniqueNickCheck", "Account", ErrorMessage = "昵称已存在", HttpMethod = "post")]
[StringLength(8, MinimumLength = 2, ErrorMessage = "长度介于2-8位")]
[Display(Name = "昵称")]
public
string nickname { get; set; }///
<summary>///
头像地址///
</summary>[ScaffoldColumn(false)]
public
string userimg { get; set; }private
string _mobile = "";///
<summary>///
手机号///
</summary>[Display(Name = "手机")]
[RegularExpression(@"^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$", ErrorMessage = "手机号码格式错误")]
[Editable(false)]
public
string mobile{
get { return _mobile; }
set { _mobile = value; }
}
///
<summary>///
手机号是否已验证：未验证 1：已验证///
</summary>[ScaffoldColumn(false)]
public
int mobile_verified { get; set; }///
<summary>///
邮箱地址///
</summary>private
string _email = "";[Display(Name = "邮箱")]
[DataType(DataType.EmailAddress)]
[Editable(false)]
public
string email{
get { return _email; }
set { _email = value; }
}
///
<summary>///
邮箱是否已验证：未验证 1：已验证///
</summary>[ScaffoldColumn(false)]
public
int email_verified { get; set; }///
<summary>///
性别：未填 1：男 2：女///
</summary>[Display(Name = "性别")]
public
int sex { get; set; }///
<summary>///
出生年月///
</summary>[Display(Name = "生日")]
[RegularExpression(@"^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$", ErrorMessage = "日期格式为yyyy-MM-dd")]
public
string birthday { get; set; }[Display(Name = "QQ")]
[StringLength(20,MinimumLength=1,ErrorMessage="长度为1-20")]
[RegularExpression(@"^\d{1,20}$", ErrorMessage = "QQ号码为1-20位数字")]
public
string qq { get; set; }///
<summary>///
所在省/直辖市区号///
</summary>[Display(Name = "现居地址")]
public
string province_id { get; set; }///
<summary>///
所在城市区号///
</summary>public
string city_id { get; set; }///
<summary>///
职业///
</summary>[Display(Name = "职业")]
public
sbyte? job { get; set; }///
<summary>///
投资风格///
</summary>[Display(Name = "投资风格")]
public
sbyte? trade_style { get; set; }///
<summary>///
入市时间（年份）///
</summary>[Display(Name = "入市时间")]
public
int? trade_begin { get; set; }///
<summary>///
用户角色///
</summary>[ScaffoldColumn(false)]
public
sbyte? userrole { get; set; }///
<summary>///
用户开通的直播室编号///
</summary>[ScaffoldColumn(false)]
public
int? cast_room_id { get; set; }}
- 相关js
window.ajaxForm= function (data ) {
if (data.success) {
var infoqq=$.trim($("#@Html.NameFor(model => model.qq)").val());
if(infoqq=="")
$("#@Html.NameFor(model => model.qq)").val(qq);
art.dialog.tips(data.Message, showtime);
} else {
$(".error").remove();
if(typeof(data)=="string")
window.location.href = "@FormsAuthentication.LoginUrl";
else
if (data.returnUrl) window.location.href = data.returnUrl;else
if(data.controlID){var $err=$("<label generated=\"true\" class=\"error\"></label>");
$err.insertAfter($("#"+data.controlID)).html(data.Message);
}
else art.dialog.tips(data.Message, showtime);
}
}
数据验证js插件 validate使用格式
$("#fromVCode").validate({
rules: {
validatecode: {
required: true,
maxlength: 6
}
},
highlight: false,
errorPlacement: function(error, element) {
element.next().next("div").empty();
error.appendTo(element.next().next("div"));
},
success: function(label) {
label.remove();
},
submitHandler: function(form) {
var $err=$("<label generated=\"true\" class=\"error\"></label>");
$("#btnValidatecode").attr("disabled", "disabled");
if($("#confirmphone").val()=="")
{
$("#confirmphone").next().next("div").empty();
$err.appendTo($("#confirmphone").next().next("div")).html("请输入手机号!");
("#btnValidatecode").removeAttr("disabled");
return
false;
}
var par=$(form).serialize()+"&mobile="+$("#confirmphone").val();
$.post("@Url.Action("ValidateCode", "UserCenter")", par,
function(data) {
if (data.success) {
$(form)[0].reset();
$("#td_mobile").html($("#confirmphone").val()+"<span>已验证</span>");
art.dialog.tips(data.Message, showtime);
} else {
if(typeof(data)=="string")
window.location.href = "@FormsAuthentication.LoginUrl";
else
if (data.returnUrl) window.location.href = data.returnUrl;
else art.dialog.tips(data.Message, showtime);
}
$("#btnValidatecode").removeAttr("disabled");
});
return
false;
}
});
Mvc form提交的更多相关文章
- 【转】MVC form提交实体接收参数时空字符串值变成null
问题:entity.BZ的值是null,Request.Form["BZ"]的值是空字符串 目标:让entity.BZ的值是空字符串. 解决方法:在实体的BZ属性上加上 [Disp ...
- spring mvc form表单提交乱码
spring mvc form表单submit直接提交出现乱码.导致乱码一般是服务器端和页面之间编码不一致造成的.根据这一思路可以依次可以有以下方案. 1.jsp页面设置编码 <%@ page ...
- spring MVC做form提交Neither BindingResult nor plain target object for bean name 'command' available
这两天在做spring3.0 MVC+hibernate3.2的练习中,做简单的form提交, 一直报java.lang.IllegalStateException: Neither BindingR ...
- asp.net MVC中form提交和控制器接受form提交过来的数据
1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的Request请求取值[HttpPost]public ActionResult AddNews(){ str ...
- 表单提交学习笔记（一）—利用jquery.form提交表单（后台.net MVC）
起因:一开始想用MVC本身的Form提交方法,但是提交完之后想进行一些提示,MVC就稍显不足了,最后用jquery插件---jquery.form.js,完美解决了问题~~ 使用方法 一.下载jque ...
- ASP.NET Core MVC – Form Tag Helpers
ASP.NET Core Tag Helpers系列目录 ASP.NET Core MVC Tag Helpers 介绍 ASP.NET Core MVC – Caching Tag Helpers ...
- ASP.NET-AJAX.FORM提交附件失败
尝试了不少时间在AJAX.FORM提交附件,发现完全不行,经过下面的这个博客的介绍,使用ajax.form.js插件提交成功,记录一下该博文网址和结论: 相关网址:http://www.cnblogs ...
- 百度编辑神器ueditor在ajax或form提交内容时候异常
百度编辑神器ueditor在ajax或form提交内容时候异常,一:⑴web.config中<system.web> <httpRuntime requestValidationMo ...
- 关于button和form提交的一些问题
1.form 中type 为submit 和button的区别 submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了. 如果表单在点击提交按钮后需要用JS进行处理( ...
随机推荐
- Bill的挑战（bzoj 1879）
Description Input 本题包含多组数据. 第一行:一个整数T,表示数据的个数. 对于每组数据: 第一行:两个整数,N和K(含义如题目表述). 接下来N行:每行一个字符串. Output ...
- MySql导出数据到csv
通过mysql客户端shell连接到服务器,选择使用的数据库,输入sql代码: select * from test_info into outfile '/tmp/test.csv' fields ...
- mysql 数据库连接超时的问题 autoReconnect=true
最近在使用spring-jdbc数据库连接管理时,出现一个奇怪问题,当天部署运行没问题,第二天再试就报以下异常问题 org.springframework.dao.RecoverableDataAcc ...
- 51nod1185(wythoff+高精度)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1185 题意:中文题诶- 思路:wythoff模板题,和51n ...
- MongoDB高可用集群配置的方案
>>高可用集群的解决方案 高可用性即HA(High Availability)指的是通过尽量缩短因日常维护操作(计划)和突发的系统崩溃(非计划)所导致的停机时间,以提高系统和应用的可用性. ...
- netbeans-xdebug 断点调试php
来自NetBeans官网的帮助文档: https://netbeans.org/kb/docs/php/debugging_zh_CN.html 但具体问题,我们还是要说下 准备工作 本地部署的ser ...
- 如何设置Vimrc
.title { text-align: center } .todo { font-family: monospace; color: red } .done { color: green } .t ...
- Mysql调整字段顺序
1.增加(add/modify/change)一个字段使之位于第1列 alter table table_name add `id` int first; 2.增加一个字段使之位于某列后 alter ...
- Nginx配置文件nginx.conf中文详解
#定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数.worker_processes 8; #全局错误日志定义类型,[ debug | in ...
- nodejs复习03
文件系统fs 重命名 fs.rename() fs.renameSync 优先选择异步,可以进行异常判断 打开关闭文件 fd = fs.openSync(file, flags) fs.closeSy ...