Ext.NET – Understanding Direct Methods and Direct Events

Exclusive offer: get 50% off this eBook here
Instant Ext.NET Application Development [Instant]

Instant Ext.NET Application Development [Instant] — Save 50%

Explore the power of Ext.NET for developing applications with practical recipes with this book and ebook

$14.99    $7.50
by Kevin Sullivan | August 2013 | Open Source

Readers of Instant Ext.NET Application Development will find out about some of the core concepts needed to develop web applications using Ext.NET. We touch on some of the key areas required to get a beginner or novice programmer confident and proficient in programming with Ext.NET controls and understanding the fundamentals of client-side and server-side interactions.

In this article, by Kevin Sullivan, author of the book Instant Ext.NET Application Development, we will cover the ways in which we can call our own server methods, and how we can pass parameters, and return results to the client side using DirectMethods. We will also look at the DirectEvent event and how events raised on the client side fire Ajax requests to the server. We will look at how we can handle events raised by different controls.

(For more resources related to this topic, see here.)

How to do it...

The steps to handle events raised by different controls are as follows:

  1. Open the Pack.Ext2.Examples solution

  2. Press F5 or click on the Start button to run the solution.

  3. Click on the Direct Methods & Events hyperlink. This will run the example code for this recipe.

  4. Familiarize yourself with the code behind and the client-side markup.

How it works...

Applying the [DirectMethod(namespace="ExtNetExample")] attribute to the server-side method GetDateTime(int timeDiff) has exposed this method to our client-side code with the namespace of ExtNetExample, which we append to the method name call on the client side.

As we can see in the example code, we call this server method in the markup using the Ext.NET button btnDateTime and the code ExtNetExamples.GetDateTime(3). When the call hits the server, we update the Ext.NET control lblDateTime text property, which updates the control related to the property.

Adding namespace="ExtNetExample" allows us to neatly group server-side methods and the JavaScript calls in our code. A good notation is CompanyName.ProjectName. BusinessDomain.MethodName. Without applying the namespace attribute, we would access our server-side method using the default namespace of App.direct. So, to call the GetDateTime method without the namespace attribute, we would use App.direct. GetDateTime(3).

We can also see how to return a response from Direct Method to the client-side JavaScript. If a Direct Method returns a value, it is sent back to the success function defined in a configuration object. This configuration object contains a number of functions, properties, and objects. We have dealt with the two most common functions in our example, the success and failure responses.

The server-side method GetCar()returns a custom object called Car. If the btnReturnResponse button is clicked on and GetCar() successfully returns a response, we can access the value when Ext.NET calls the JavaScript function named in the success configuration object CarResponseSuccess. This JavaScript function accepts the response parameter from the method and we can process it accordingly. The response parameter is serialized into JSON, and so object values can be accessed using the JavaScript object notation of object.propertyValue. Note that we alert the FirstRegistered property of the Car object returned.

Likewise, if a failure response is received, we call the client-side method CarResponseFailure alerting the response, which is a string value.

There are a number of other properties that form a part of the configuration object, which can be accessed as part of the callback, for example, failure to return a response. Please refer to the Direct Methods Overview Ext.NET examples website (http://examples.ext.net/#/ Events/DirectMethods/Overview/ ).

To demonstrate DirectEvent in action, we've declared a button called btnFireEvent and secondly, a checkbox called chkFireEvent. Note that each control points to the same DirectEvent method called WhoFiredMe.

You'll notice that in the markup we declare the WhoFiredMe method using the OnEvent property of the controls.

This means that when the Click event is fired on the btnFireEvent button and the Change event is fired on the chkFireEvent checkbox, a request to the server is made where we call the WhoFiredMe method. From this, we can get the control that invoked the request via the object sender parameter and the arguments of the event using the DirectEventArgs e method.

Note that we don't have to decorate the DirectEvent method, WhoFiredMe, with any attributes. Ext.NET takes care of all the plumbing. We just need to specify the method, which needs to be called on the server.

There's more...

Raising DirectMethods is far more flexible in terms of being able to specify the parameters you want to send to the server. You also have the ability to send the control objects to the server or to client-side functions using the #{controlId} notation. It is generally not a good idea though to send the whole control to the server from a Direct Method, as Ext.NET controls can contain references to themselves. Therefore, when Ext.NET encodes the control, it can end up in an infinite loop, and you will end up breaking your code.

With a DirectEvent method, you can send extra parameters to the server using the ExtraParams property inside the controls event element. This can then be accessed using the e parameter on the server.

Summary

In this article we discussed about how to connect client-side and server-side code.

Resources for Article :


Further resources on this subject:


Instant Ext.NET Application Development [Instant] Explore the power of Ext.NET for developing applications with practical recipes with this book and ebook
Published: July 2013
eBook Price: $14.99
See more
Select your format and quantity:

About the Author :


Kevin Sullivan

Kevin Sullivan is a web architect and development team lead living and working in Swansea, South Wales. His role involves overseeing and designing applications using C#, SQL Server, and JavaScript. Kevin has a keen interest in system architecture, design patterns and practices, and usability. He has a cocker spaniel called Bryn and has a love of the outdoors. Kevin studied Computer Science at the University of Wales, Swansea, and is originally from Merthyr Tydfil.

Books From Packt


Ext.NET Web Application Development
Ext.NET Web Application Development

ASP.NET jQuery Cookbook
ASP.NET jQuery Cookbook

ASP.NET 3.5 Social Networking
ASP.NET 3.5 Social Networking

 ASP.NET 3.5 CMS Development
ASP.NET 3.5 CMS Development

ASP.NET 3.5 CMS Development
ASP.NET 3.5 CMS Development

ASP.NET 4 Social Networking
ASP.NET 4 Social Networking

ASP.NET 3.5 Application Architecture and Design
Agile Web Application Development with Yii1.1 and PHP5

.NET 4.0 Generics Beginner’s Guide
.NET 4.0 Generics Beginner’s Guide


Your rating: None Average: 1.5 (4 votes)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
s
n
q
W
b
T
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software