ASP.NET MVC 傳遞數據 從前臺到後臺，包括單個對象，多個對象，集合

今天爲你們分享下 Asp.net MVC 將數據從前臺傳遞到後臺的幾種方式。

環境：VS2013，MVC5.0框架

1.基本數據類型

咱們常見有傳遞 int, string, bool, double, decimal 等類型。

須要注意的是前臺傳遞的參數和後臺Action 中的參數名稱須要保證一致，不然 MVC 沒法完成值的綁定。

前臺代碼：

//傳遞基本的數據類型
            $('#btn1').on('click', function () {
                var obj = {
                    parm1: 100,
                    parm2: "我是string",
                    parm3: true,
                    parm4: 1.23,
                    parm5: 9.999999
                };
                $.getJSON('/home/SimpleBaseData', obj, function (data) {
                    alert(data);
                });
            });

後臺代碼：

public ActionResult SimpleBaseData(int parm1, string parm2, bool parm3, double parm4, decimal parm5)
        {
            string result = string.Format("int={0},string={1},bool={2},double={3},decimal={4}", parm1, parm2, parm3, parm4, parm5);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 效果：

 

2.傳遞單個對象

在前臺將對象的每一個屬性賦值，而後在 Action 中以對象的方式接收傳遞過來的值。

本次示例須要傳遞一個用戶對象到後臺。

類：

public class UserInfo
        {
            public string UserName { get; set; }
            public string UserPassWord { get; set; }
            public string UserSex { get; set; }
            public string UserPhone { get; set; }
        }

 

前臺：

//傳遞1個對象，後臺以類的形式接收前臺傳遞的值
            $('#btn2').on('click', function () {
                var obj = {
                    UserName: '張三',
                    UserPassWord: '不告訴你',
                    UserSex: '男',
                    UserPhone: '138888888888'
                };
                $.getJSON('/home/GetSingleObject', obj, function (data) { alert(data); });
            });

 

後臺：

public ActionResult GetSingleObject(UserInfo userinfo)
        {
            string result = Newtonsoft.Json.JsonConvert.SerializeObject(userinfo);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

效果：

 

3.傳遞多個不一樣對象

有的時候會遇到須要同時傳遞多個對象到後臺中去，好比在申報數據的時候每每須要填寫多項數據，每一個選項卡中的數據都不同。若是按照傳遞單個對象的那種方式是不行的，咱們須要在前臺作一些小改動。

本次示例須要傳遞用戶對象和地址對象到後臺。

類：

新建一個地址類

public class Address
        {
            public string Country { get; set; }
            public string Province { get; set; }
            public string City { get; set; }
            public string Street { get; set; }
        }

 

前臺：

須要設置 contentType:'application/json' ，data 部分須要使用 JSON.stringify() 方法對數據進行加工

$('#btn3').on('click', function () {
                var userinfoObj = {
                    UserName: '張三',
                    UserPassWord: '不告訴你',
                    UserSex: '男',
                    UserPhone: '138888888888'
                };
                var addressObj = {
                    Country: '中國',
                    Province: '江西',
                    City: '南昌',
                    Street: '紅谷灘新區XX路XX號'
                };
                $.ajax({
                    url: '/home/GetTwoObject',
                    type: 'post',//換成 get 無效
                    contentType: 'application/json', data: JSON.stringify({ userinfo: userinfoObj, address: addressObj }),
                    success: function (data) {
                        alert("不使用ViewModel:" + data);
                    }
                });

            });

 

後臺：

定義 2個參數對象

public ActionResult GetTwoObject(UserInfo userinfo, Address address)
        {
            string result = string.Format("{0}住在{1}省{2}市", userinfo.UserName, address.Province, address.City);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

效果：

 

4.傳遞對象集合

傳遞對象集合的思路和傳遞多個對象一致。也是在前臺設置contentType:'application/json' ，而後使用 JSON.stringify() 方法對data進行加工。

前臺：

//傳遞集合
            $('#btn4').on('click', function () {
                var userList = [];
                for (var i = 0; i < 5; i++) {
                    userList.push({ UserName: '姓名' + i, UserPassWord: '密碼' + i, UserSex: '性別' + i, UserPhone: '電話' + i });
                }
                $.ajax({
                    url: '/home/GetUserList',
                    type: 'post',//改爲 get 方式後沒法獲取
                    contentType: 'application/json',
                    data: JSON.stringify(userList),
                    success: function (data) {
                        alert(data);
                    }
                });
            });

 

後臺：

public ActionResult GetUserList(List<UserInfo> list)
        {
            string result = Newtonsoft.Json.JsonConvert.SerializeObject(list);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

 

效果：

 

 

分享完畢，完工。