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中都是以键值方式作为一个整包来处理。