MVC中Ajax post 和Ajax Get——提交对象Model
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
在MVC中用ajax的方式传送数据
先创建实体

using System.ComponentModel;
namespace ViewerWeb.Models
{
public class UserInfo
{
[DisplayName("用户名:")]
public string UserName { get; set; } [DisplayName("年 龄:")]
public int Age { get; set; } [DisplayName("密 码:")]
public string Description { get; set; }
}
}

用BeginForm直接post提交数据
前台页面

@model ViewerWeb.Models.UserInfo
@{
ViewBag.Title = "About";
}
<p>@ViewBag.Message.</p>
<div>
@using (Html.BeginForm("Create", "Home", FormMethod.Post,
new { id = "form1", @class = "form-horizontal" }))
{
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Age, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Description, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">OK</button>
</div>
</div>
}
</div>

后台Controller
[HttpPost]
public ActionResult Create(UserInfo userInfo)
{
return View("PostPage", userInfo);
}
Ajax Post提交和Ajax Get
@section scripts这个是模板页设置的写js的。

@model ViewerWeb.Models.UserInfo
@{
ViewBag.Title = "AjaxPostPage";
}
<h2>@ViewBag.Message.</h2>
<div>
<div class="form-horizontal" id="form1" data-post-url="@Url.Action("CreateUserByPost")"
data-get-url="@Url.Action("CreateUserByGet")">
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Age, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Description, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" id="postButton">Post</button>
<button type="button" class="btn btn-primary" id="getButton">Get</button>
</div>
</div>
</div>
</div>
@section scripts{
<script>
$(document).ready(function () {
$("#postButton").on("click", function () {
$.ajax({
type: 'POST',
url: $("#form1").data("post-url"),
data: {
UserName: $("#UserName").val(),
Age: $("#Age").val(),
Description: $("#Description").val()
},
success: function (data) {
alert(data.message);
}
});
}); $("#getButton").on("click", function () {
$.ajax({
type: 'GET',
url: $("#form1").data("get-url"),
data: {
UserName: $("#UserName").val(),
Age: $("#Age").val(),
Description: $("#Description").val()
},
success: function (data) {
alert(data.message);
}
});
});
});
</script>
}

后台Controller

[HttpPost]
public JsonResult CreateUserByPost(UserInfo userInfo)
{
return Json(new { success = true, message = userInfo.UserName });
} [HttpGet]
public JsonResult CreateUserByGet(UserInfo userInfo)
{
return Json(new { success = true, message = userInfo.UserName }, JsonRequestBehavior.AllowGet);
}

Ajax Post传输列表

@model ViewerWeb.Models.UserInfo
@{
ViewBag.Title = "AjaxPostListPage";
} <h2>@ViewBag.Message.</h2>
<div>
<div class="form-horizontal" id="form1" data-post-url="@Url.Action("CreateUserList")">
<div class="form-group">
@Html.LabelFor(model => model.UserName, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Age, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Age, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.TextBoxFor(model => model.Description, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" id="postButton">Post</button>
</div>
</div>
</div>
</div>
@section scripts{
<script>
$(document).ready(function () {
var getData = function () {
return {
UserName: $("#UserName").val(),
Age: $("#Age").val(),
Description: $("#Description").val()
};
};
$("#postButton").on("click", function () {
var param = [];
param.push(getData());
param.push(getData()); $.ajax({
type: 'POST',
contentType: "application/json", //必须有
dataType: "json", //表示返回值类型,不必须
url: $("#form1").data("post-url"),
data: JSON.stringify(param),
success: function (data) {
alert(data.message);
}
});
});
});
</script>
}

后台
[HttpPost]
public ActionResult CreateUserList(IEnumerable<UserInfo> userInfos)
{
return Json(new { success = true, message = userInfos.FirstOrDefault().UserName });
}
MVC中Ajax post 和Ajax Get——提交对象Model的更多相关文章
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService
使用过ASP.NET AJAX的朋友都知道,怎么通过ASP.NET AJAX在客户端访问WebService,其实在ASP.NET MVC中使用ASP.NET AJAX异步访问WebService 也 ...
- 在MVC中如何愉快使用Ajax
前言: 这个故事要从我老大与客户谈需求开始说起.前几天,遇见一个逗比客户,不知道是听了哪个逗比程序员的临终遗言...让我们给他做一个手机端的Web应用出来,还说要使用MVC来做(不是App).马币,客 ...
- MVC中的奇葩错误,参数转对象
在使用MVC中遇到一个神奇的错误,特此记录(我在用MVC4时遇到) 上面两张图就是一个变量名进行了修改,其他不变!form里面的参数也是一样的!喜欢尝试的可以尝试一下! 我的变量使用action时出现 ...
- mvc中使用knockoutjs和ajax
虽然说knockoutjs 官网上写的非常的清楚!但是像我这样的英语呕吐患者,真是虐心啊!今天我写下做个记录,也为那些初次使用的同学给予帮助, 首先我说一下今天我说的内容只是应用不做原理探究,如果没有 ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...
- Asp.net MVC中文件上传的参数转对象的方法
参照博友的.NET WebApi上传文件接口(带其他参数)实现文件上传并带参数,当需要多个参数时,不想每次都通过HttpContext.Request.Params去取值,就针对HttpRequest ...
- ASP.NET MVC中实现多个button提交的几种方法
有时候会遇到这样的情况:在一个表单上须要多个button来完毕不同的功能,比方一个简单的审批功能. 假设是用webform那不须要讨论,但asp.net mvc中一个表单仅仅能提交到一个Action处 ...
- Asp.net Mvc 中的模型绑定
asp.net mvc中的模型绑定可以在提交http请求的时候,进行数据的映射. 1.没有模型绑定的时候 public ActionResult Example0() { ) { string id ...
随机推荐
- jquery二维码生成插件jquery.qrcode.js
插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com ...
- 三十四 Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解
信号一般使用信号分发器dispatcher.connect(),来设置信号,和信号触发函数,当捕获到信号时执行一个函数 dispatcher.connect()信号分发器,第一个参数信号触发函数,第二 ...
- Neutron的防火墙原理
确切的说这是fwaas,即防火墙即是服务. 防火墙与安全组区别防火墙一般放在网关上,用来隔离子网之间的访问.因此,防火墙即服务也是在网络节点上(具体说来是在路由器命名空间中)来实现. 安全组的对象是虚 ...
- 003——VUE操作元素属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 深入理解c/c++ 内存对齐
内存对齐,memory alignment.为了提高程序的性能,数据结构(尤其是栈)应该尽可能地在自然边界上对齐.原因在于,为了访问未对齐的内存,处理器需要作两次内存访问:然而,对齐的内存访问仅需要一 ...
- 【git】不同协议的路径
https https://github.com/yesuuu/ganLearn.git ssh git@github.com:yesuuu/ganLearn.git git@idc:ganLearn ...
- http keep - alive 与 长连接
http1.0 2.0 1.1区别 你可以把 WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁,它和 HTTP 有一些共性,是为了解决 HTTP 本身无法解决的某些问题而做出的 ...
- Android系统代码查询命令集合
Android系统代码查询命令集合 *#06# 显示MEID *#*#4636#*#* 显示版本,或更新相机韧体 *#*#7594#*#* 当长按关机按钮时,会出现一个切换手机部分设置及更改设定 WL ...
- svn的使用流程
一.安装: 1. 服务器端:VisualSVN_Server 2. 客户端:TortoiseSVN 二.使用VisualSVN Server建立版本库 1. 首先打开VisualSVN Server ...
- Java进阶知识点8:高可扩展架构的利器 - 动态模块加载核心技术(ClassLoader、反射、依赖隔离)
一.背景 功能模块化是实现系统能力高可扩展性的常见思路.而模块化又可分为静态模块化和动态模块化两类: 1. 静态模块化:指在编译期可以通过引入新的模块扩展系统能力.比如:通过maven/gradle引 ...