MVC4与JSON交互的知识总结

一:jquery传递JSON给MVC4后台

1.JSON传递单个参数给Controller某个Action方法

[前台js]

    $(document).ready(function () {

        var postData = { userId: 4 };

        var url = "@Url.Action("GetUserName")";

         $.ajax({

             async: false,

             type: "POST",

             url: url,

             data: postData,

             cache: false,

             global: false,

             dataType: 'json',

             success: function (data) {

                

             }

         });

    });

 

[后台Controller:]

public ActionResult GetUserName(int userId)

{

    ...

}

 

2.JSON传递整型数组给Action
[前台js]

$(document).ready(function () {

    var postData = [];

    postData.push({ name: "list_UserId", value: 1 });

    postData.push({ name: "list_UserId", value: 2 });

    postData.push({ name: "list_UserId", value: 3 });



    var url = "@Url.Action("GetUserNameList")";

    $.ajax({

        async: false,

        type: "POST",

        url: url,

        data: postData,

        cache: false,

        global: false,

        dataType: 'json',

        success: function (data) {



        }

    });

 });

[Action]

public ActionResult GetUserNameList(List<int> list_UserId)

{

       .....

}

 

3.JSON传递单个对象参数给Action
[前台js]

$(document).ready(function () {

    var postData = [];

    postData.push({ name: "user.userId", value: 1 });

    postData.push({ name: "user.userName", value: "小东" });

    postData.push({ name: "user.desc", value: "json高手" });

       

    var url = "@Url.Action("AddUser")";

    $.ajax({

        async: false,

        type: "POST",

        url: url,

        data: postData,

        cache: false,

        global: false,

        dataType: 'json',

        success: function (data) {



        }

    });

});

 

[Action]

public ActionResult AddUser(UserObj user)

{

    ....

}

4.JSON传递多个参数给Action
[前台js]

$(document).ready(function () {

    var postData = [];

    postData.push({ name: "list_UserId", value: 1 });

    postData.push({ name: "list_UserId", value: 2 });

    postData.push({ name: "list_UserId", value: 3 });



    postData.push({ name: "list_roleName", value: "系统管理员" });

    postData.push({ name: "list_roleName", value: "部门经理" });



    var url = "@Url.Action("GetUsersAndRoles")";

    $.ajax({

        async: false,

        type: "POST",

        url: url,

        data: postData,

        cache: false,

        global: false,

        dataType: 'json',

        success: function (data) {



        }

    });

});

[Action]

public ActionResult GetUsersAndRoles(List<int> list_UserId, List<string> list_roleName)

{

    ...

}

 

二:MVC4后台返回JSON给JS前端作处理:

1.返回List集合对象
[前端js]

$(document).ready(function () {

    var postData = [];

    postData.push({ name: "list_UserId", value: 1 });

    postData.push({ name: "list_UserId", value: 2 });

    postData.push({ name: "list_UserId", value: 3 });



    var url = "@Url.Action("GetUserObjList")";



    $.ajax({

        async: false,

        type: "POST",

        url: url,

        data: postData,

        cache: false,

        global: false,

        dataType: 'json',

        success: function (data) {

            //将获取user集合初始化下拉框列表

            var options_List = '<option value="">--请选择用户--</option>';

            $.each(data, function (i, user) {

                options_List += "<option value='" + user.userId + "'>" + user.userName + "</option>";

            });

            $('#userList').html(options_List);

        }

    });

});

[后台action]

public ActionResult GetUserObjList(List<int> list_UserId)

{

    UserObj obj1 = new UserObj();

    obj1.userId = 1;

    obj1.userId = 1;

    List<UserObj> userList = new List<UserObj>();

    userList.Add(new UserObj{userId = 1, userName = "小东", desc = "js高手"});

    userList.Add(new UserObj { userId = 2, userName = "小明", desc = "json高手" });

    userList.Add(new UserObj { userId = 3, userName = "小华", desc = "jquery高手" });

    JsonResult jt = Json(userList.ToArray(), JsonRequestBehavior.AllowGet);

    jt.ContentType = "text/html";

    return jt; 

}

 

三:最后总结:
1.无论传递json还是后台返回json，所以action无论参数有多少，参数的类型是什么，在http中都是以键值方式作为一个整包来处理。