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中都是以鍵值方式作為一個整包來處理。