Yesterday night, I had a very interesting scenario. One of our apps has a normal ASP.NET page that is used exclusively for rendering Crystal Reports to the browser. The page provides a comprehensive Ajax framework for rendering Crystal Reports and we normally host that page in an <iframe> as part of the app.

The page has a static DirectMethod that returns information about parameters of a Crystal Report. So it happened that I needed information about a Crystal Reports template outside that page. On a normal day, I would have added a Web-Service method to one of the web-services running inside this app. But yesterday night, I thought why not try to re-use the existing static method on that aspx page instead of adding a new method (I have to disclaim straight away that this is bad idea in terms of design and maintainability, but for some reason, yesterday night I thought of giving it a try).

I already knew that you can bypass the client-side proxy function generated by default by Ext.Net for a DirectMethod and use Ext.net.DirectMethod.request on the client-side to invoke DirectMethods on the server. And also that this method in Ext.Net uses the ExtJs’ Ajax API (Ext.ajax.request) to dispatch the Ajax request to the server.

That should mean somewhere in the process, Ext.Net should be sending a url to Ext.Ajax.request method. The question was where and how to override it (at this point, I had not checked the Ext.Net docs yet).

Some stepping-through in the javascript code, and I knew Ext.Net uses the ‘beforerequest’ event in Ext.Ajax class to add options to the request. While I was trying to override it, for a moment I opened the documentation page of Ext.net.DirectMethod.request and I saw it straight away that I was trying to re-invent the wheel as Ext.Net itself allows passing in the url for a DirectMethod explicitly. And now I had everything I needed for invoking cross-page DirectMethod requests.

Here’s a sample code for the same:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }Ext.net.DirectMethod.request(‘StaticDirectMethod1’, {
url: ‘Page1.aspx’,
params: {
msg: ‘Hello’
},
specifier: ‘static’
});{/syntaxhighlighter}

You see, you can pass url explicitly to request method, and this can be used to invoke cross-page DirectMethods. The specifier ‘static’ is important to be passed if the method happens to be a static DirectMethod.

Here’s complete sample code for an ASP.NET page that invokes static as well as non-static DirectMethods on the same as well as another ASP.NET page:

{syntaxhighlighter brush: xml;fontsize: 100; first-line: 1; }<%@ Page Language=”C#” %>
<%@ Register Assembly=”Ext.Net” Namespace=”Ext.Net” TagPrefix=”ext” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

[Ext.Net.DirectMethod()]
public void NonStaticDirectMethod1 (string msg)
{
new Ext.Net.MessageBox().Alert(“”, “You said: ‘” + msg + “‘ On Page1 via a normal instance Direct Method.”).Show();
}
</script>

<ext:Button runat=”server” Text=”Say Hello to Static DirectMethod1 in Page1″
OnClientClick=”
Ext.net.DirectMethod.request(‘StaticDirectMethod1’, {
url: ‘Page1.aspx’,
params: {
msg: ‘Hello’
},
specifier: ‘static’
});
”
/>
<ext:Button runat=”server” Text=”Say Hi to Static DirectMethod2 in Page2″
OnClientClick=”
Ext.net.DirectMethod.request(‘StaticDirectMethod2’, {
url: ‘Page2.aspx’,
params: {
msg: ‘Hi’
},
specifier: ‘static’
});
”
/>

<ext:Button runat=”server” Text=”Say Namaste to Instance DirectMethod1 in Page1″
OnClientClick=”
Ext.net.DirectMethod.request(‘NonStaticDirectMethod1’, {
url: ‘Page1.aspx’,
params: {
msg: ‘Namaste’
}
});
”
/>
<ext:Button runat=”server” Text=”Say Ciao to Instance DirectMethod2 in Page2″
OnClientClick=”
Ext.net.DirectMethod.request(‘NonStaticDirectMethod2’, {
url: ‘Page2.aspx’,
params: {
msg: ‘Ciao’
}
});
”
/>
</body>
</html>{/syntaxhighlighter}

I would again repeat, invoking DirectMethods across pages is a pretty bad idea in perspective of design, especially if you are invoking non-static (i.e. instance) Direct Methods. But hey, this is possible atleast.

You can further gain power by ExtJs’ ability to submit a form’s data automatically with an Ajax request (see details of request method of Ext.Ajax class). So you can now post forms between pages through DirectMethods and perform all those wierd things you would imagine.

Note that static DirectMethods for cross-page requests are fine, but when using non-static DirectMethod requests between pages, you would need to understand that the other page’s controls do not exist on the first page and hence trying to change the state of controls on the other page would not give you results you would expect. Hence if you ever decide to use these, its best to stick only to static DirectMethod requests between pages.

Below you would find 2 sample ASP.NET pages that invoke static and non-static DirectMethods for each other as well as themselves.

2 Comments

Anup on June 11, 2011 at 2:13 pm

Hi,

Thanks for posting. Static DirectMethods are certainly useful and I’ve made use of them a few times. E.g a page has created a bunch of controls but some ajax requests are needed to get additional data, and it makes sense to have them defined as static DirectMethods on the page, as the page is the context within which that request is made.

In other cases, I create various controls on demand or have actions that are reused across pages, controls etc. In those cases I tend to put implement such requests in ashx handlers.

Of course the ashx approach also means existing controls are not available, but it is also a nice option where you want to generate controls and have them reused across many pages and scenarios.

A couple of examples are here if of interest?

http://forums.ext.net/showthread.php?11896-Export-to-excel-csv-etc-by-posting-to-another-page

http://forums.ext.net/showthread.php?11397-CLOSED-Rendering-Ext.Net-control-%28generated-during-Ajax-event%29-to-an-ExtJs-client-side-object
Bob on June 20, 2013 at 6:11 am

Thats real cool man!