总结ASP.NET MVC视图页使用jQuery传递异步数据的几种方式

在ASP.NET MVC的视图页向控制器传递异步数据，可能是数组，JavaScript对象，json，表单数据，等等。

关于数据，JavaScript对象有时候和json长得一模一样，有么有？

var person = {Name: 'darren', Age: 21};
以上是一个JavaScript对象。不过也可以这样表示：

var person = {"Name":"darren","Age":21};
以上JavaScript对象的另外一种表达方式，恰恰也符合json的表达方式。不过，JavaScript对象的写法推荐使用第一种方式。

关于异步ajax发送；data属性表示传递的数据；contentType树形的默认值是application/x-www-form-urlencoded，表示客户端请求类型；dataType表示从服务端返回的类型，可以是text, xml, json, script, html, jsonp。

而在服务端，通过Request.Form属性可以获得从客户端传递来的异步数据。

□ 传递JavaScript对象

在Home/Index.cshtml视图中，使用jQuery发出一个异步请求，把返回的html内容加载到当前视图中。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


<h2>Index</h2>


<div id="result"></div>


@section scripts

{

    <script type="text/javascript">

        $(function() {

            var person = {Name: 'Darren', Age: 21};

            $.ajax({

                type: 'GET',

                url: '@Url.Action("GetInfo","Home")',

                data: person,

                datatype: 'html',

                success:function(data) {

                    $('#result').html(data);

                }

            });

        });

    </script>

}

HomeController中从Request.Form中获取数据，并返回强类型部分视图。

    public class HomeController : Controller

    {


        public ActionResult Index()

        {

            return View();

        }


        public ActionResult GetInfo()

        {

            //从表单中获取的数据

            var person = new Person();

            person.Name = Request["Name"];

            person.Age = int.Parse(Request["Age"]);


            return PartialView("_DisplayJavaScriptObject", person);

        }

    }

Home/_DisplayJavaScriptObject.cshtml强类型视图展示数据。

@model MvcApplication1.Models.Person



<div>

    <h3>从表单中读出的数据</h3>

    <p><span>Name:</span><span>@Model.Name</span></p>

    <p><span>Age:</span><span>@Model.Age</span></p>

</div>

□ 传递数组

传递数组的时候有几点需注意：
1、需要把数组toString()后作为json数据传递，toString()后数组变成以逗号隔开的字符串
2、是以Query String的形式传递给服务端的
3、服务端为了获取集合数据，需要split数组字符串

在Home/Index.cshtml视图中，使用jQuery发送异步GET请求时，数组ids需要toString()转换成"1,2,3"形式的字符串。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


<h2>Index</h2>


<div id="result"></div>


@section scripts

{

    <script type="text/javascript">

        $(function() {

            var ids = [1, 2, 3];

            $.ajax({

                type: 'GET',

                url: '@Url.Action("GetInfo","Home")',

                data: { myArr: ids.toString() },

                datatype: 'html',

                success:function(data) {

                    $('#result').html(data);

                }

            });

        });

    </script>

}

在HomeController中，通过Request.QueryString来获取数组字符串，最后再split转换成集合。

    public class HomeController : Controller

    {


        public ActionResult Index()

        {

            return View();

        }


        public ActionResult GetInfo()

        {

            string temp = Request.QueryString["myArr"];

            List<int> result = new List<int>();

            string[] tempArr = temp.Split(',');

            foreach (var item in tempArr)

            {

                result.Add(int.Parse(item));

            }

            ViewData["t"] = result;


            return PartialView("_DisplayJavaScriptObject");

        }

    }

Home/_DisplayJavaScriptObject.cshtml从ViewData中取出数据遍历集合展示数据。

@foreach (var item in ViewData["t"] as IEnumerable<int>)

{

    <span>@item.ToString()</span>

}

□ 传递表单数据

传递表单数据的时候有几点需注意：
1、通过$('#myForm').serialize()把表单数据封装起来
2、控制器Action方法需要打上[HttpPost]
3、控制器Action方法，可以通过强类型参数来接收，也可通过Request["Name"]的方式获取数据

在Home/Index.cshtml视图中，使用jQuery发送异步POST请求时，使用$('#myForm').serialize()把表单数据封装起来。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


<h2>Index</h2>


<div>

    <form id="myForm">

        <div>

            @Html.Label("Name","姓名")

            @Html.TextBox("Name","Darren")

        </div>

        <div>

            @Html.Label("Age","年龄")

            @Html.TextBox("Age","21")

        </div>

    </form>

    <div>

        <button id="btn">提交</button>

    </div>

</div>


<div id="result"></div>


@section scripts

{

    <script type="text/javascript">

        $(function() {

            $('#btn').on("click", function() {

                $.ajax({

                    type: 'POST',

                    url: '@Url.Action("GetInfo","Home")',

                    data: $('#myForm').serialize(),

                    dataType: 'html',

                    success: function(data) {

                        $('#result').html(data);

                    }

                });

            });

        });

    </script>

}

在HomeController中，需要在GetInfo方法上打上[HttpPost]，用强类型参数来接收数据。

    public class HomeController : Controller

    {


        public ActionResult Index()

        {

            return View();

        }


        [HttpPost]

        public ActionResult GetInfo(Person person)

        {

            return PartialView("_DisplayJavaScriptObject", person);

        }

    }

Home/_DisplayJavaScriptObject.cshtml强类型视图展示数据。

@model MvcApplication1.Models.Person



<div>

    <h3>从表单中读出的数据</h3>

    <p><span>Name:</span><span>@Model.Name</span></p>

    <p><span>Age:</span><span>@Model.Age</span></p>

</div>

□ 传递json数据

传递json数据需注意的是：
1、json格式要写对：{ "Name":"Darren","Age":21}
2、控制器Action方法中通过Request["Name"]的方式获取数据

在Home/Index.cshtml视图中，使用jQuery发送异步Get请求。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


<h2>Index</h2>



<div id="result"></div>


@section scripts

{

    <script type="text/javascript">

        $(function() {

            $.ajax({

                type: 'GET',

                url: '@Url.Action("GetInfo","Home")',

                data: { "Name":"Darren","Age":21},

                datatype: 'html',

                success:function(data) {

                    $('#result').html(data);

                }

            });

        });

    </script>

}

在HomeController中通过Request["Name"]的方式获取数据。

   public class HomeController : Controller

    {


        public ActionResult Index()

        {

            return View();

        }


        public ActionResult GetInfo()

        {

            //从表单中获取的数据

            var person = new Person();

            person.Name = Request["Name"];

            person.Age = int.Parse(Request["Age"]);


            return PartialView("_DisplayJavaScriptObject", person);

        }

    }

Home/_DisplayJavaScriptObject.cshtml强类型视图展示数据。

@model MvcApplication1.Models.Person



<div>

    <h3>从表单中读出的数据</h3>

    <p><span>Name:</span><span>@Model.Name</span></p>

    <p><span>Age:</span><span>@Model.Age</span></p>

</div>

就这样。