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

时间:2021-05-11 14:27:31
这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法。

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请求, 大大提高了编码的阅读性。

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