这里的格式是仁者见仁智者见智,这篇随笔只是我在工作过程中总结出的阅读性高,对我来说效率较高的写法。
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请求, 大大提高了编码的阅读性。
下一篇将展示一个简单地区级联操作。