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 });
}
