DirectMethod 提供了一種可以從客戶端 JavaScript 代碼調用服務器端 .NET 方法的功能。
用 [DirectMethod] 屬性修飾服務器端的 public 或 public static 方法，會向客戶端 JavaScript 代碼公開服務器端方法。
注意：服務器端的方法必須是 public 或 public static。
DirectMethod 基礎
<script runat="server">
[DirectMethod]
public void SetTimeStamp()
{
this.Label1.Text = DateTime.Now.ToLongTimeString();
this.Label1.Element.Highlight();
}
</script>
<ext:Button ID="Button1" runat="server" Text="Click Me" Icon="Lightning">
<Listeners>
<Click Handler="Ext.net.DirectMethods.SetTimeStamp();" />
</Listeners>
</ext:Button>
<br />
<ext:Label ID="Label1" runat="server" Format="Server Time: {0}" Text='<%# DateTime.Now.ToLongTimeString() %>' />
說明
1，在 Button1 客戶端事件裏，調用服務器端方法 SetTimeStamp 來更新 Label1 控件，並高亮顯示。
2，另外，在 Ext.Net，當第一次請求頁面時（此時爲回發），IsAjaxRequest 爲 false，之後爲 true，因爲之後的請求是 Ajax 請求。
從 DirectMethod 返回一個字符串
DirectMethod 會返回任何類型的對象。這個對象被序列化成 JSON。被系列化的這個對象作爲 result 參數發送給在 DirectMethod 中配置的回調函數 success。
<script runat="server">
[DirectMethod]
public string GetTimeStamp()
{
return DateTime.Now.ToLongTimeString();
}
</script>
<ext:Button runat="server" Text="Click Me" Icon="Lightning">
<Listeners>
<Click Handler="
Ext.net.DirectMethods.GetTimeStamp({
success: function (result) {
Ext.Msg.alert('Server Time', result);
}
});" />
</Listeners>
</ext:Button>
說明
在 Button1 客戶端事件中，Ext.net.DirectMethods.GetTimeStamp(…) 是在客戶端調用服務器端的方法 GetTimeStamp，success 是 Ext.net.DirectMethods 配置的回調函數，也就是說，當服務器端方法成功返回時，客戶端需要根據返回的值執行的操作。在本例中，如果服務器端方法 GetTimeStamp() 成功返回服務器端當前時間，則客戶端彈出這個時間警告。
給 DirectMethod 傳遞多個參數
如果服務器端 [DirectMethod] 方法要求參數，那麼也要客戶端 DirectMethod 傳遞兩個參數給它。
本例中，如果服務器端要求兩個參數：sting 和 int，那麼在客戶端也要傳遞兩個可靠的參數給服務器端的 [DirectMethod] 方法。
<script runat="server">
[DirectMethod]
public void LogCompanyInfo(string name, int count)
{
string template = string.Concat("{0} has approximately {1} employees.");
string[] employees = new string[4] { "1-5", "6-25", "26-100", "100+" };
this.Label3.Text = string.Format(template, name, employees[count]);
}
</script>
<ext:Button runat="server" Text="Submit">
<Listeners>
<Click Handler="Ext.net.DirectMethods.LogCompanyInfo('Ext.NET, Inc.', 0);" />
</Listeners>
</ext:Button>
調用 DirectMethod 靜態方法，並返回一個字符串（Super Fast + Best Performance）
當調用一個 public 服務端方法，默認情況下，在執行整個頁面生命期時，這個方法可以訪問頁面上所有 Web 控件。
而帶 static 的 [DirectMethod] 方法，不會執行頁面生存期，並且不能訪問頁面 Web 控件。這減少了處理開銷，優化了性能。
<script runat="server">
[DirectMethod]
public static string GetTimeStamp4()
{
return DateTime.Now.ToLongTimeString();
}
</script>
<ext:Button xrunat="server" Text="Click Me" Icon="Lightning">
<Listeners>
<Click Handler="
Ext.net.DirectMethods.GetTimeStamp4({
success: function (result) {
Ext.Msg.alert('Server Time', result);
}
});" />
</Listeners>
</ext:Button>
說明
Button1 客戶端事件調用服務器端靜態方法 GetTimeStamp()，獲得服務器端當前時間。
注意：服務器端靜態方法 GetTimeStamp() 中不能訪問頁面中的 Web 控件。
從靜態 DirectMethod 返回一個自定義對象
DirectMethod 可以返回任何類型的對象。下面例子創建並返回一個 Customer 對象。
Customer 對象被序列化成 JSON，返回給客戶端。在 DirectMethod 配置中，result 參數就是從服務器端返回的 Customer 對象。
<script runat="server">
// Define Customer Class
public class Customer
{
public int ID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Company { get; set; }
public Country Country { get; set; }
public bool Premium { get; set; }
}
// Define Country Class
public class Country
{
public string Name { get; set; }
}
[DirectMethod]
public static Customer GetCustomer()
{
// Get your Customer data from somewhere...
return new Customer() {
ID = 99,
FirstName = "Peter",
LastName = "Smith",
Company = "CompanyX, LLC.",
Premium = true,
Country = new Country { Name = "Canada" }
};
}
</script>
<ext:Button runat="server" Text="Click Me" Icon="Lightning">
<Listeners>
<Click Handler="
Ext.net.DirectMethods.GetCustomer({
success : function (customer) {
var template = 'ID : {0}{6} Name : {1} {2}{6} Company : {3}{6} Country : {4}{6} Premium Member : {5}',
msg = String.format(template,
customer.ID,
customer.FirstName,
customer.LastName,
customer.Company,
customer.Country.Name,
customer.Premium,
'<br /><br />');
Ext.Msg.alert('Customer', msg);
}
});" />
</Listeners>
</ext:Button>
說明
1， 定義兩個類 Customer 和 Country，Country 聚合在 Customer；
2， 服務器端靜態方法 GetCustomer() 創建 Customer 對象返回給客戶端。
注意：客戶端如何訪問對象 Customer。
禁用 DirectMethod ClientProxy 的創建
當服務器端方法添加 [DirectMethod] 屬性，默認情況下，將會在客戶端的 Ext.net.DirectMethods 創建一個相同名字、接受相同參數的 JavaScript 函數。
例如，如果創建一個名爲 GetTimeStamp 服務器端方法，那麼在客戶端，也會創建一個相應的 Ext.net.DirectMethods.GetTimeStamp 的 JavaScript 函數。
有種情況，當開發者創建了一個 [DirectMethod]，但是想隱藏相應的客戶端 JavaScript 函數。此時，你可以在某個 [DirectMethod] 屬性裏設置它的 ClientProxy.Ignore 屬性，從而忽略創建相應的客戶端 JavaScript 函數。
如果 [DirectMethod] 設置爲 ClientProxy.Ignore，將不會創建相應的客戶端代理函數（client-side proxy function），但是 [DirectMethod] 仍然可以被調用。[DirectMethod] 代理函數是圍繞底層 Ext.net.DirectMethod.request() 函數的封裝。
通過配置 Ext.net.DirectMethod.request() 函數，即便沒有客戶端代理函數，任何服務器端 [DirectMethod] 都可以被直接調用。
request ( string methodName , [Object options] ) : void
Calls the server-side [DirectMethod] as specified in the methodName parameter.
Parameters:
methodName : String
The server-side Method name to call.
options : Object
(optional) An object containing configuration properties. This options object may contain any of the following properties, or options as defined in Ext.Ajax.request.
success : Function
The JavaScript function to invoke on successful response from the DirectMethod.
The "result" parameter is passed to the success function.
failure : Function
The JavaScript function to invoke if a failure response is returned from the DirectMethod.
The "errorMessage" parameter is passed to the success function.
specifier : String
The server-side Method access specifier, options inlcude ("public", "static").
The specifier of "public" is the default value and does not need to be explicitly set.
If the server-side Method is a static Method, the specifier options must be set to "static".
method : String
The type of http request to make, options include ("POST", "GET").
The method of "POST" is the default value.
url : String
A custom url to call the DirectMethod from. The DirectMethod does not need to be configured on the "Parent Page".
If no url is provided, the request options will use the <form>'s action attribute. If the action attribute is empty, the request options will use the window.location.href value. If the window.location.href value ends with a forward-slash ("/"), the IIS web server may not be able to process the "POST" request. Under this scenario, you must set the "method" options property to "GET".
control : String
The ID of the UserControl which contains the DirectMethod. An DirectMethod can be configured within a .ascx file and called from a Parent .aspx Page.
timeout : Number
The timeout in milliseconds to be used for requests. (defaults to 30000)
eventMask : Object
(optional) An EventMask options object. This options object may contain any of the following properties:
showMask : Boolean
true to show mask (defaults to false).
msg : String
The text to display in a centered loading message box (defaults to 'Working...').
msgCls : String
The CSS class to apply to the loading message element (defaults to "x-mask-loading")
target : String
The target element to apply the mask to, options include ("page", "customtarget").
If "customtarget", the customTarget configuration option should be set.
customTarget : String
The id of the target element, or a instance of the target element.
minDelay : Number
The minimum amount of time to display the mask (defaults to 0).
Setting the minDelay provides and minimum amount of time to display a message to the user before removing mask and executing success, failure and/or callback functions.
Returns:
void
<script runat="server">
[DirectMethod(ClientProxy = ClientProxy.Ignore)]
public string GetTimeStamp6()
{
return DateTime.Now.ToLongTimeString();
}
</script>
<ext:Button runat="server" Text="Click Me" Icon="Lightning">
<Listeners>
<Click Handler="Ext.net.DirectMethod.request(
'GetTimeStamp3',
{
success: function (result) {
Ext.Msg.alert('Message', result);
}
});" />
</Listeners>
</ext:Button>
向代理函數傳遞 DirectMethod 配置
DirectMethod 配置對象可以被作爲最後一個參數傳遞給任何 DirectMethod 代理函數。
<script runat="server">
[DirectMethod]
public string LogMessage(string msg)
{
// Log the message somewhere...
return msg;
}
</script>
<ext:Button ID="Button4" runat="server" Text="Click Me" Icon="Lightning">
<Listeners>
<Click Handler="Ext.net.DirectMethods.LogMessage('Hello World', {
success: function (result) {
Ext.Msg.alert('Message', result);
},
eventMask: {
showMask: true,
minDelay: 500
}
});" />
</Listeners>
</ext:Button>