Devexpress 使用经验 —— ASPxGridView前后台交互写法推荐

这里的格式是仁者见仁智者见智，这篇随笔只是我在工作过程中总结出的阅读性高，对我来说效率较高的写法。

ASPX:

<dx:ASPxGridView ID="ASPxGridViewLink" runat="server" AutoGenerateColumns="False" Width="100%" DataSourceID="ObjectDataSourceLink" KeyFieldName="LinkID"

ClientInstanceName="gridLink" OnCustomCallback="ASPxGridViewLink_CustomCallback">

<ClientSideEvents EndCallback="onASPxEndCallback" />

</dx:ASPxGridView>

 

 关键之处：

1. 给GridView控件一个前端ID ClientInstanceName,

2. 给GridView控件一个响应"前端回调"的方法 OnCustomCallback

 

C#

protected void ASPxGridViewLink_CustomCallback(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewCustomCallbackEventArgs e)

{

JSONObject jsonToken = JSONConvert.DeserializeObject(e.Parameters);

JSONObject jsonParams = (JSONObject)jsonToken["params"];

string command = jsonToken["action"].ToString();

if (command == "AddLink")

addLink(sender as DevExpress.Web.ASPxGridView.ASPxGridView, jsonParams);

}



 



void addLink(DevExpress.Web.ASPxGridView.ASPxGridView s, JSONObject e)

{

string linkName = e["linkName"].ToString(),

linkUrl = e["linkUrl"].ToString(),

provinceId = null,

provinceName = null,

cityId = null,

cityName = null;



bool isDistrict = e["isDistrict"].ToString() == "true";



int orderNum = Convert.ToInt32(e["sortNum"]);



...



...



}

 

关键之处：

1. 响应"前段回调"的方法中的e.Parameters就是前端传回来的参数，一般来说它的类型为String, 如果有多个参数传回，最好封装为JSON格式，然后在后台解析

2. 将JSON的操作和参数解析，针对不同的操作写对应的方法，并传入参数

 

JS

function doAddLink() {

var token = JSON.stringify({

action: "AddLink",

params: {

linkName: tbName.GetValue(),

linkUrl: tbLink.GetValue(),

sortNum: tbSort.GetValue(),

isDistrict: chIsDistrict.GetValue(),

provinceId: comboProvicne.GetValue(),

provinceName: comboProvicne.GetText(),

cityId: comboCity.GetValue(),

cityName: comboCity.GetText()

}

});

gridLink.PerformCallback(token);

}

 

关键之处： 封装包含 action（执行的操作） 和 params（操作的参数） 的 JSON， 通过 GridView的前端ID 调用PerformCallback方法，并且传入JSON

 

其他ASPx控件Callback操作也同样适用。

其实只需一个ASPxCallback控件就可以实现复杂的Ajax交互效果。我们知道ASPxCallback是Devexpress里面一个很纯净的专门处理异步操作的控件，像很多自带Callback的控件比如ASPxGridView, ASPxComboBox, ASPxCallbackPanel等等或多或少的附带了ASPxCallback控件的功能。

下面这个示例来简单介绍ASPxCallback如何前后台交互，如何相互调用方法

首先需要给全局JS添加一个方法：

window.onASPxEndCallback = function (s, e) {

var script = s.cpScript;

if (!(script === 'undefined')) {

var func = new Function(script);

func.call();

delete s.cpScript;

}

}

 

这段JS是获取callback控件的cpScript属性，这个属性在后台会相应的赋值，这个值是一段可执行的js方法，如果存在该值，那么转换为Function，并且执行，执行完之后立即删除。

ASPX

<dx:ASPxCallback ID="ASPxCallback1" runat="server" OnCallback="ASPxCallback1_Callback" ClientInstanceName="callback">

<ClientSideEvents EndCallback="onASPxEndCallback" />

</dx:ASPxCallback>

 

同样给ClientInstanceName 赋值， 添加响应前段回调的方法 OnCallback, 关键添加 ”<ClientSideEvents EndCallback="onASPxEndCallback" />“回调方法执行完之后要调用onASPxEndCallback

C#

protected void ASPxCallback1_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)

{



　　DevExpress.Web.ASPxCallback.ASPxCallback callback  = source as DevExpress.Web.ASPxCallback.ASPxCallback; // 获取这个callback



　　// 具体方法执行的内容



　　// 以下是后台调用前台的三种方法



　　callback.JSProperty["cpScript"] = string.format("alert('{0} 执行成功。'); location.href='{1}'", xxxx, yyyy);



　　callback.JSProperty["cpScript"] = string.format(@"



　　　　　　　　　　　　　　　　　　　　var name = '{0}';



　　　　　　　　　　　　　　　　　　　　function love(n){{



　　　　　　　　　　　　　　　　　　　　　　alert('I love you ' + n);



　　　　　　　　　　　　　　　　　　　　}} // 在string.format中，'{' 需要用'{{'来转义，同样 '}'需要用'}}'来转义



　　　　　　　　　　　　　　　　　　　　love(name);



　　", xxxx);



　　callback.JSProperty["cpScript"] = string.format("someFunction({0})", xxxx); // 这里的 someFunction 是在前段js里写的方法



}

 

JS

这里是前台调用后台的方法

fucntion onButtonClicked(){



　　var param = JSON.stringify{



　　　　a: '1',



　　　　b: '2'

　　}



　　callback.PerformCallback(param); // PerformCallback执行之后会调用后台的 void ASPxCallback1_Callback 事件，后台的操作在这里处理。

}

 

总而言之，Devexpress实在是非常强大控件，仅仅一个简单的ASPxCallback 就可以省略.NET中用各种ashx来处理ajax请求， 大大提高了编码的阅读性。

下一篇将展示一个简单地区级联操作。