AjaxMVC中Ajax post 以及Ajax Get——提交对象Model

HTTP 请求:GET vs. POST
些微种于客户端以及劳务器端进行呼吁-响应的常用方法是:GET 和 POST。
GET – 从指定的资源要数据
POST – 向指定的资源提交要拍卖的数码
GET 基本上用于打服务器获得(取回)数据。注释:GET
方法或者回到缓存数据。
POST 也可用以打服务器获取数据。不过,POST
方法不见面缓存数据,并且每每用来连同请求一起发送数据。

以MVC中之所以ajax的道传送数据

先行创造实体

Ajax 1

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

Ajax 2

所以BeginForm直接post提交数据

前台页面

Ajax 3

@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>

Ajax 4

后台Controller

        [HttpPost]
        public ActionResult Create(UserInfo userInfo)
        {
            return View("PostPage", userInfo);
        }

Ajax Post提交和Ajax Get

@section scripts这个是模板页设置的写js的。

Ajax 5

@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>
}

Ajax 6

后台Controller

Ajax 7

        [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 8

Ajax Post传输列表

Ajax 9

@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>
}

Ajax 10

后台

        [HttpPost]
        public ActionResult CreateUserList(IEnumerable<UserInfo> userInfos)
        {
            return Json(new { success = true, message = userInfos.FirstOrDefault().UserName });
        }

 

相关文章