使用jQuery异步传递Model到控制器方法,并异步返回错误信息
需要通过jquery传递到控制器方法的Model为:
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
使用下面这个类的Message属性装载成功或错误信息,并最终转换成json格式返回给视图:
public class PersonVm
{
public string Message { get; set; }
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
控制器通过遍历ModelState.Keys来显示错误信息。
public ActionResult Demo()
{
return View();
}
[HttpPost]
public ActionResult SavePerson(Person person)
{
if (ModelState.IsValid)
{
string message = string.Format("用户姓名:{0},年龄:{1}", person.Name, person.Age);
return Json(new PersonVm() {Message = message});
}
else
{
string errorMessage = "<div class=\"validation-summary-errors\">发生以下错误:<ul>";
foreach (var key in ModelState.Keys)
{
var error = ModelState[key].Errors.FirstOrDefault();
if (error != null)
{
errorMessage += "<li class=\"field-validation-error\">"+error.ErrorMessage+"</li>";
}
}
errorMessage += "</ul>";
return Json(new PersonVm() {Message = errorMessage});
}
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
视图使用 $.toJSON()方法,把Model转换成json格式传递给控制器方法。把对象转换成json格式的jQuery扩展,在这里。
@model MvcApplication1.Models.Person
@{
ViewBag.Title = "Demo";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.EditorForModel()
<input type="submit" value="保存" id="personCreate"/>
<div>
<span id="resultMessage"></span>
</div>
@section scripts
{
<script src="~/Scripts/json.js"></script>
<script type="text/javascript">
$(function() {
$('#personCreate').click(function() {
var person = getPerson();
if (person == null) {
alert("用户名不能为空");
return;
}
var json = $.toJSON(person);
$.ajax({
url: '@Url.Action("SavePerson","Home")',
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function(data) {
var message = data.Message;
$("#resultMessage").html(message);
}
});
});
});
function getPerson() {
var name = $('#Name').val();
var age = $('#Age').val();
return (name == "") ? null : { Name: name, Age: age };
}
</script>
}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
最新文章
- erlang 分布式数据库Mnesia 实现及应用
- 跟我学PHP-第一篇:如何安装Zend Studio 以及汉化和基本准备工作
- 删掉SQL Server登录时登录名下拉列表框中的选项
- Laravel框架数据库CURD操作、连贯操作使用方法
- 几个有用的jQuery代码片段
- ThinkPHP3.2.3 自定义标签库的使用
- Linux驱动开发 -- 打开dev_dbg() 【转】
- 【转】Python numpy库的nonzero函数用法
- 教你用笔记本破解无线路由器password
- java Map使用Object 做为Key的问题
- 把AS代码链接到fla文件
- jQuery的扩展
- Oracle索引——位图索引
- WebService测试方案
- SpringBoot2 java配置方式 Configuration和PropertySource结合读取配置文件
- Memcached 集群架构方面的问题 [z]
- php用户名密码
- 2018.07.08 hdu4521 小明系列问题——小明序列(线段树+简单dp)
- 实现后门程序以及相应的rootkits,实现对后门程序的隐藏
- 20155209 2016-2017-2 《Java程序设计》第七周学习总结
热门文章
- Jackson jsonToBean 忽略 Bean中不存在属性的匹配。
- Ubuntu 搭建etcd
- Visual Studio 2017 百度云下载
- Hive(七)Hive分析窗口函数
- 程序设计实习MOOC / 程序设计与算法(二)第二周测验(2018春季)
- USACO 5.3 Big Barn
- java内存溢出分析工具
- 2014-2015 ACM-ICPC, NEERC, Moscow Subregional Contest B - Bring Your Own Bombs 离散化+扫描线+计算期望
- Jersey入门三:创建一个JavaEE的Web项目
- 2017-2018-1 20179202《Linux内核原理与分析》第十一周作业