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

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的操作和参数解析，针对不同的操作写对应的方法，并传入参数

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

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里写的方法

}

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

fucntion onButtonClicked(){

　　var param = JSON.stringify{

　　　　a: '1',

　　　　b: '2'
　　}

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

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

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