码迷,mamicode.com
首页 > Web开发 > 详细

MVC中Ajax post Json和Ajax Get

时间:2016-07-06 00:01:57      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

在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 Json和Ajax Get

标签:

原文地址:http://www.cnblogs.com/zhao123/p/5645256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!