ASP.NET MVC中EasyUI的datagrid跨域調(diào)用實現(xiàn)代碼

更新時間：2012年03月14日 23:31:48 作者：

因為easyUI使用的是JQuery的異步方法加載數(shù)據(jù)，應(yīng)該遵循JQuery的跨域訪問規(guī)則

最近項目中需要跨域調(diào)用其他項目的數(shù)據(jù)，其他項目也是使用的EasyUI的datagrid組件，開始以為直接在datagrid的url屬性定義為其他項目的url地址即可，可是測試下發(fā)現(xiàn)的確是返回了json數(shù)據(jù)但是json數(shù)據(jù)提示“invalid label” 錯誤，網(wǎng)上搜索了下錯誤解決辦法，參考 “JavaScript處理Json的invalid label錯誤解決辦法“的方法利用datagrid的loadData方法加載并轉(zhuǎn)換了json還是提示上述錯誤，感覺原因不在格式問題。

搜索了下JavaScript跨域調(diào)用的文章“JavaScript跨域訪問問題解決方法”得到啟發(fā)，發(fā)現(xiàn)原來是因為easyUI使用的是JQuery的異步方法加載數(shù)據(jù)，應(yīng)該遵循JQuery的跨域訪問規(guī)則，也就是上述文章中提到的url中需要加入jsoncallback=？回調(diào)函數(shù)參數(shù)，并且返回的json的格式必須修改為：回調(diào)函數(shù)名（json數(shù)據(jù)），而現(xiàn)在返回的數(shù)據(jù)只是json格式的數(shù)據(jù)沒有回調(diào)函數(shù)名，自然提示格式錯誤，于是修改了ASP.NET MVC自定義的JsonResult類，具體如何編寫自定義的JsonResult類見：自定義ASP.NET MVC JsonResult序列化結(jié)果，

代碼如下：

復(fù)制代碼代碼如下:

 
public class CustomJsonResult:JsonResult 
{ 
public override void ExecuteResult(ControllerContext context) 
{ 
if (context == null) 
{ 
throw new ArgumentNullException("context"); 
} 

HttpResponseBase response = context.HttpContext.Response; 

if (!String.IsNullOrEmpty(ContentType)) 
{ 
response.ContentType = ContentType; 
} 
else 
{ 
response.ContentType = "application/json"; 
} 
if (ContentEncoding != null) 
{ 
response.ContentEncoding = ContentEncoding; 
} 
if (Data != null) 
{ 
#pragma warning disable 0618 
//跨域調(diào)用需要修改json格式j(luò)soncallback 
if (context.HttpContext.Request.Params.AllKeys.Contains("jsoncallback")) 
{ 
String callback = context.HttpContext.Request.Params["jsoncallback"]; 
response.Write(callback+"("+JsonConvert.SerializeObject(Data)+")"); 
} 
else 
{ 
response.Write(JsonConvert.SerializeObject(Data)); 
} 
#pragma warning restore 0618 
} 
} 
} 

EasyUI的datagrid的代碼如下:

復(fù)制代碼代碼如下:

 
//datagrid 
$('#dg').datagrid({ 
url:'http://localhost:9000/ManagementSystem/ListCurrent?department=sss&jsoncallback=?', 
pageNumber: 1, 
pageSize: 20, 
pageList: [20, 40, 60, 80, 100], 
onDblClickRow: function(rowIndex) { 
edit(); 
} 
}); 

作者：mikel
出處：http://www.cnblogs.com/mikel/

您可能感興趣的文章: