MVC中Ajax post Json和Ajax Get

Posted 2020-08-03 凌风95

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