ASP.NET MVC 之各種jQuery提交模式實例

 

1.$.ajax提交

var _data = { "dictItemID": dictItemID, "itemType": itemType, "itemName": itemName, "itemCode": itemCode }; $.ajax({ url: "/System/DictItemAdd", type: "POST",//此參數在這必須要設置,否則服務端無法獲取參數值 async: false, data: _data, dataType: "json", success: function (data) { if (data.result === "error") { alert(data.msg); } else { window.location.href = "..\\System\\DictItemManage"; } }, error: function () { } });

對應的服務的代碼

public JsonResult DictItemAdd() { //... dictItem.ItemType = Convert.ToInt32(Request.Form["itemType"]); dictItem.ItemName = Request.Form["itemName"]; dictItem.ItemCode = Request.Form["itemCode"]; if (string.IsNullOrEmpty(Request.Form["dictItemID"])) { //... return Json(new { result = "", msg = "記錄添加失敗" }); } else { //.. return Json(new { result = "", msg = "記錄更新失敗" }); } }

 例子2

第6行:dataType:"json", 用於標識返回的數據格式是json,必須和服務端對應的方法返回值的類型對應.

第8行:和服務器有對應關系

 1 $.ajax({  2 url: "/System/GetRoleMenuByRoloID",  3 type: "POST",  4 async: false,  5  data: _data,  6 dataType: "json",  7 success: function (data) {  8 var roleRecords = JSON.parse(data.result);  9 for (var i = 0; i < roleRecords.length; i++) { 10 if (roleRecords[i].MenuID != null) { 11 $("input[name='" + roleRecords[i].MenuID + "']").attr("checked", true);; 12  } 13  } 14  }, 15 error: function () { 16 debugger 17  } 18 });

public JsonResult GetRoleMenuByRoloID(string roleID) { //... DataTable dt = bll.GetRoleScope(parms); return Json(new { result = JsonConvert.SerializeObject(dt), msg = "" }); }

$.ajax單對象提交

var puzzleObj = GetFormInfo("puzzle");//封裝一個JSON對象,它的屬性與服務端方法參數對象屬性保持一致(大小寫) puzzleObj.EnablePuzzleName = $("#EnablePuzzle").find("option[value='" + puzzleObj.EnablePuzzle + "']").text(); puzzleObj.CompanyID = $("#cid").val(); $.ajax({ processData: false, url: "/Company/UpdateCompanyForPuzzle", type: "POST", contentType: "application/json", data: JSON.stringify(puzzleObj), success: function (data) { SetFormInfo("show", puzzleObj); }, error: function () { debugger } });

public string UpdateCompanyForPuzzle(tbiz_CompanyEntity entity) { tbiz_CompanyBLL companyBLL = new tbiz_CompanyBLL(); int result = companyBLL.UpdateCompanyPuzzleConfig(entity); return JsonConvert.SerializeObject(result); }

//MVC默認會自動提取參數並封裝成entity對象

$.ajax 提交 之processData: false,contentType: "application/json"

這個方式當服務端方法coding好對應的ViewModel,MVC默認是自動解析好提交參數的,對於這點的原理待學習

var _menus = [];
var checkbox = $("#table_module input[type='checkbox']");
for (var i = 0; i < checkbox.length; i++) {
    if ($(checkbox[i]).is(':checked')) {
        var scopeData = $(checkbox[i]).parent().find("input[type='hidden']").val();
        var menuID = $(checkbox[i]).attr("name");
        var menu = { "MenuID": menuID, "RoleID": roleID, "ScopeData": scopeData };
        _menus.push(menu);
    }
}
if (_menus.length > 0) {
    var _menusStr = JSON.stringify(_menus);
    $.ajax({
        processData: false,
        url: "/System/SaveRoleMenuByRoloID",
        type: "POST",
        contentType: "application/json",
        async: false,
        data: _menusStr,//提交前必須序列化
        dataType: "json",
        success: function (data) {
            window.location.href = "..\\System\\RoleManage";
        },
        error: function () {
            debugger
        }
    });
}

服務端

public JsonResult SaveRoleMenuByRoloID(IList<Menu> records)//定義與JS對應的Menu實體,MVC會自動解析提交參數

 

2.$.post

1).以jQuery的$.post方法提交請求, 並用JSON.parse()方法解析Action方法所返回的由JsonConvert.SerializeObject()方法所序列化的對象字符串結果

2).注意提交請求參數與接受參數的方式

function loadDictItem(obj) {
    var id = $(obj).attr("data-dictitemID");
    if(id !=="")
    {
        $.post("..\\System\\BindDictItemById", { "dictitemID": id }, function (data) {
            var dtResult = JSON.parse(data);
            $("#txtItemName").val(dtResult.ItemName);
            $("#txtItemCode").val(dtResult.ItemCode);
            $("#ItemType").prop("value", dtResult.ItemType);
        });
    }
}

//直接返回JSON格式字面值

public string BindDictItemById(string dictitemID)
{
    SystemBLL bll = new SystemBLL();
    tcfg_DictItemEntity dictItem = bll.GetDictItemByID(dictitemID);
    return JsonConvert.SerializeObject(dictItem);
}

3).$.post()可以直接解析由Action返回的JSON格式數據

function delDictItem(obj) {
    var id = $(obj).attr("data-dictitemID");
    if (id !== "") {
        $.post("..\\System\\DelDictItemById", { "dictitemID": id }, function (data) {
            if (data.result === "ok") {
                $(obj).parent().parent().remove();
            }
        });
    }
}

public JsonResult DelDictItemById(string dictitemID)
{
    SystemBLL bll = new SystemBLL();
    tcfg_DictItemEntity dictItem = bll.GetDictItemByID(dictitemID);
    dictItem.IsDelete = 1;
    string result = bll.UpdateDictItem(dictItem) > 0 ? "ok" :"fail";
    return Json(new { result = result, msg = "" });
}