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