Archive for the ‘Web Development’ Category

ASP.NET SignalR and Ext.NET MessageBus

Posted by dariosantarelli on October 20, 2013

Most of the modern web applications provides real-time functionalities (“real-time web“) through a set of technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.  Moreover, in very scalable and complex architectures, server-side code execution is often asynchronous. Just for example, let’s think to a task-based UI which submits a command like “book a plane ticket” to a web service. The server-side command processing could be performed after some hours: for example, the command could be just enqueued to a command-bus to be processed later. In scenarios like that, the client can’t count on an updated read model just after sending the command. As a consequence, in order to receive a feedback as soon as possible, all the involved clients should poll the server until the command execution reaches a significant state (e.g. in progress, completed, canceled etc.) and the read model is updated, ready for queries.

Before WebSockets, the classic implementations of this kind of real-time features were not so easy and they used to adopt strategies like forever frame (see “Comet“) or periodic/long polling. Today, all the modern browsers and web servers fully support WebSockets and they can extabilish bi-directional and persistent communications, so that a client can receive content through a “push” action performed by the server. In the ASP.NET world, SignalR is a growing new library that uses WebSockets under the covers when it’s available, and gracefully fallbacks to other techniques and technologies when it isn’t, while the application code stays the same. SignalR also provides a very simple, high-level API for doing server-to-client RPC (call JavaScript functions in clients’ browsers from server-side code) in an ASP.NET application, as well as adding useful hooks for connection management, e.g. connect/disconnect events, grouping connections, authorization.

Developers that are currently using the Ext.NET component framework can take advantage on SignalR by combining it with the Ext.NET MessageBus component. The MessageBus provides a simple and robust client-side infrastructure to propagate notifications to listening UI components. The reference scenario I’m talking about in this post is represented in the figure below:

1. The client browser extabilishes a persistent connection to a server-side SignalR application hub. After that the client mantains a reference to an auto-generated hub proxy.
2. The Ext.NET UI components submits commands to the server.
3. At any time of the server-side command execution, the server can use the SignalR hub to push notification messages back to all the involved clients via RPC.
4. Any client receiving a SignalR message through the hub proxy redirects the message to the Ext.NET Message Bus
5. On the basis of the specific type of message, the Ext.NET UI components are updated through a message handler function. In fact, each Ext.NET component has a MessageBusListeners property (client side handlers of MessageBus client side events) and a MessageBusDirectEvents property (server side handlers of MessageBus client side events).

Let’s have a look to a minimalistic example implemented in an ASP.NET MVC web application. Here’s the view :

@using Ext.Net;
@using Ext.Net.MVC;
    Layout = null;
    var X = Html.X();
<!DOCTYPE html>
        <title>SignalR and Ext.NET MessageBus example</title>
        <script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>

.Add(X.Button().Icon(Icon.Add).Text("New customer")
      .DirectClickAction("AddCustomer", "Customers")) 

.Add(X.Button().Icon(Icon.Delete).Text("Delete customer")
      .DirectClickAction("DeleteCustomer", "Customers"))

.Add(X.GridPanel().Title("Customers").MarginSpec("10 0 0 0").Icon(Icon.User)
                      .Fields(fields =>
              .ColumnModel(columnModel =>
              .MessageBusListeners(new MessageBusListener 
                 Name = "Customers.*",
                 Handler = "this.getStore().reload();",
                 Buffer = 500

.Add(X.GridPanel().Title("Events log").MarginSpec("10 0 0 0").Icon(Icon.Report)
              .Fields(fields =>
                    .ColumnModel(columnModel =>
                        columnModel.Columns.Add(X.Column().Text("Event name").DataIndex("Name").Flex(1));
                        columnModel.Columns.Add(X.Column().Text("Event data").DataIndex("Data").Flex(1));
                    .MessageBusListeners(new MessageBusListener
                        Name = "Customers.*",
                        Handler = "this.getStore().add({ EventId: data.Id, DateTime: getFormattedDateTime(), 
                                   Name: name, Data: \"CustomerId: \" + data.CustomerId });"
<script type="text/javascript">      
var loadHub = function () {
    var hubProxy = $.connection.applicationHub;
    hubProxy.client.publish = function (name, message) {
        Ext.net.Bus.publish(name, message);
    $.connection.hub.start().done(function () {
            title: "Info",
            iconCls: "#Accept",
            html: "SignalR connection is active!"

$(document).ready(function () {


As you can see, the view is composed by the following Ext.NET components:

– A couple of buttons which send commands to the server (e.g. Add/Remove a customer)
– A grid panel which holds the current customer data
– A grid panel which holds trace data about messages received through the SignalR connection.

The integration between the client-side SignalR hub proxy and the Ext.NET components MessageBus is done through the loadHub javascript function: it wraps the SignalR hub named “applicationHub” so that all the received messages are redirected to the Ext.NET MessageBus and again to the listening UI components. Please note that the SignalR “publish” function and the Ext.NET MessageBus “publish” function accept the same parameters: the message name and the message data. For this reason, the integration between the two worlds is practically natural.

In the example above, the Store of the former GridPanel is reloaded each time its MessageBusListener intercepts any message whose name starts with the prefix “Customers.” . Please pay attention to the Buffer property: it’s very useful when the component is under message storming and we want the UI to be refreshed just after a specified delay during which no messages have been received.

What about server-side code? Well, the server-side code is not so relevant in this post. The most important thing to be considered here is that at some point of the server-side command execution, the code retrieves the SignalR hub, selects which clients will receive the RPC (for simplicity, in this example a message is sent to all connected clients) and finally pushes a message containing the data the client needs for updating UI. Here an example:

          .Clients.All.publish("Customers.Added", new CustomerAdded { ...<data for clients>... });

Useful links


Posted in .NET Framework, AJAX, ASP.NET, ASP.NET MVC, C#, Microsoft Technology, Programming, Web Development | Tagged: , , , , , , , | 1 Comment »

Experimenting with Ext.NET support for Razor: a GridPanel with AJAX proxy

Posted by dariosantarelli on June 2, 2012

In these days I’m having fun experimenting the Razor View Engine support introduced in Ext.NET v.2.0 (Beta3 at the time of writing) and I’m appreciating how fluently you can configure any Ext.NET component. Nowadays there isn’t a good documentation about these new features (on Ext.NET official site you can read “Server-side Ext.NET API documentation is being worked on”) so if you want more info about Razor support please have a look at the Ext.NET official forum (I’ve found this thread particularly helpful!). Moreover, in the Ext.NET Examples Explorer you can try to get the necessary knowledge for translating WebForms code examples into Razor views.
In this post I’d like to show one of my first tests: a simple GridPanel supporting server-side data paging via AJAX proxy.
Here the interesting Razor syntax:

        .Store(store => store.Add(Html.X().Store()
            .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                            .Reader(reader => reader.Add(Html.X().JsonReader()
            .Model(model => model.Add(Html.X().Model()
                        .Fields(fields =>
        .ColumnModel(columnModel =>
        .BottomBar(bar => bar.Add(Html.X().PagingToolbar()
                                          .DisplayMsg("Displaying customers {0} - {1} of {2}")))
        .View(view => view.Add(Html.X().GridView())))


First of all, please note the Html.X() helper method. This is the entry point for configuring any Ext.NET component. As requisite for getting started, you can call the Html.X().ResourceManager() helper method. Like the counterpart of Ext.NET for WebForms, it automatically injects every script and stylesheet you need into your page. The output should be something like this:

<link type="text/css" rel="stylesheet" href="/extjs/resources/css/ext-all-gray-embedded-css/ext.axd?v=25767" />   
<link type="text/css" rel="stylesheet" href="/extnet/resources/extnet-all-embedded-css/ext.axd?v=25767" />
<script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=25767"></script>
<script type="text/javascript" src="/extnet/extnet-all-js/ext.axd?v=25767"></script> 

OK, now through the Html.X() helper you can start configuring the GridPanel. In my example I have an AjaxProxy which calls a controller action in order to get back some JSON data to bind to the GridPanel. Some point of interest:

  • start and limit are the two standard ExtJs querystring parameters sent by the proxy to the remote data source in order to tell it how to page data.
  • AjaxProxy can process the resulting JSON via a JsonReader. In particular, pay attention to the Root() and TotalProperty() methods. They tell the reader respectively which root property in the JSON response contains the data rows and which property contains the total results count. They are two fundamental info for the right grid rendering.

Finally, the controller action code:

public ActionResult GetCustomers(int start, int limit)
    IEnumerable dtoArray;
    int total;

    using (var unitOfWork = _unitOfWorkFactory.Create())
        var customerRepository = _repositoryFactory.CreateCustomerRepository(unitOfWork);
        var customers = customerRepository.Query()

         dtoArray = (from customer in customers
                        select new

         total = customerRepository.Query().Count();

    return Json(new { data = dtoArray, total = total }, JsonRequestBehavior.AllowGet);


Posted in AJAX, ASP.NET, ASP.NET MVC, C#, Programming, Web Development | 8 Comments »

Web Development Helper

Posted by dariosantarelli on June 23, 2008

Web Development Helper is a free browser extension for Internet Explorer that provides a set of tools and utilities for the Web developer, esp. Ajax and ASP.NET developers. The tool provides features such as a DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window. Web Development Helper works against IE6+, and requires the .NET Framework 2.0 or greater to be installed on the machine.

Very cool 😉

Posted in Web Development | 1 Comment »

.NET 3.5 Enhancements Training Kit

Posted by dariosantarelli on April 16, 2008

I was looking for some resources in order to learning something more about the .NET 3.5 extensions… after a little search I’ve discovered that just few days ago Microsoft has published the .NET 3.5 Enhancements Training Kit:

The .NET Framework 3.5 Enhancements Training Kit includes presentations, hands-on labs, and demos. This content is designed to help you learn how to utilize the .NET 3.5 Enhancement features including: ASP.NET MVC, ASP.NET Dynamic Data, ASP.NET AJAX History, ASP.NET Silverlight controls, ADO.NET Data Services and ADO.NET Entity Framework.

What can I say… Happy download

Posted in .NET Framework, AJAX, ASP.NET, Microsoft Technology, Web 2.0, Web Development | Leave a Comment »

MVC support in ASP.NET 3.5 Extensions Preview

Posted by dariosantarelli on December 20, 2007

The ASP.NET 3.5 Extensions Preview is a new release that provides new functionality being added to ASP.NET 3.5 and ADO.NET in 2008. This release delivers a set of new features that target:

  • MVC support
  • Entity Framework
  • ADO.NET Data Services
  • ASP.NET Dynamic data
  • TDD (Test Driven Development)
  • Rich Clients creation  (Ajax and Silverlight controls for ASP.NET )

I’m particularly interested in ASP.NET MVC support to the existing ASP.NET 3.5 runtime, because it enables developers to more easily take advantage of design patterns. Benefits include the ability to achieve and maintain a clear separation of concerns, as well as facilitate test driven development (TDD).
A great new feature is that the designer now supports the Controllers. Moreover, by default our project contains structured folders like Content, Controllers, View. COOL!!!

Posted in ASP.NET, Microsoft Technology, Web Development | Leave a Comment »

Hyperbolic Tree in Javascript

Posted by dariosantarelli on October 22, 2007

Have you ever seen an hyperbolic tree in javascript?
Here you can find an interesting showcase description. Moreover, there’re useful informations to integrate it in your web apps. I don’t know if it’s the best solution to display large amount of inter-related data, but surely the result is very amazing!!!
P.S.: It seems not to work fine in IE 😦 , but greatly in Firefox and Safari.


Posted in Web Development | Leave a Comment »

How to create an ASP.NET 3.5 and Silverlight-enabled demo application

Posted by dariosantarelli on August 21, 2007

Steve Marx has recorded a 15 minute screencast to give you an idea of what’s possible with all the new ASP.NET 3.5 and SilverLight releases that came out last week.


  • Searching and paging via ListView, DataPager, and LinqDataSource (all new ASP.NET controls with .NET 3.5).
  • Video player via the Media control in the ASP.NET Futures July CTP (uses Silverlight 1.0 RC).
  • Popup biographies and “more/less” collapsible details via the new .NET 3.5-compatible drop of the AJAX Control Toolkit.
  • Back/forward buttons support via the History control in the ASP.NET Futures July CTP.


Posted in AJAX, ASP.NET, Microsoft Technology, Web Development | 3 Comments »

AjaxControlToolkit v1.0.10606: strange behaviour of the ModalPopupExtender Control with DropShadow

Posted by dariosantarelli on June 13, 2007

I’d like to signal a strange behaviour of the latest version of the ModalPopupExtender control that I’ve just noticed. Let’s suppose we have this scenario: two ModalPopupExtender with different TargetControlID but same PopupControlID and DropShadow=”true”. Well, with the latest version of the control, when you click on one of the two controls TargetControlID, the client-side framework throws the following exception:

“Sys.InvalidOperationException: Two components with the same id ‘<PopupControlID>$DropShadowBehaviour’ can’t be added to the application”

As you can notice immediately, it seems a problem concerning the DropShadow property of the ModalPopuExtender. In fact, if you set it to “false”, magically everything works fine. I’m very disappointed about this seeming bug because in the previous version of AjaxControlToolkit this control worked regularly in this simple scenario.

Posted in AJAX, Web Development | 1 Comment »

BDC Meta Man

Posted by dariosantarelli on February 24, 2007

BDC Meta Man is the first application that provides the ability to create Application Definitions for the Microsoft Office SharePoint Server 2007 (MOSS) Business Data Catalog (BDC) without writing a line of code.  No programming experience is required to take full advantage of the BDC Meta Man. 
BDC Meta Man makes generating Application Definitions easy due to the many features it offers:
– Visual design tools speed up your development efforts!
– Easily browse through your data sources.
– Visually inspect your application definition and edit any part of it.
– No need to know how to write XML or SQL
– Integrated Shared Service Provider administration web site makes deploying Application Definitions a fluid experience.
– Saves amounts of time and effort

Posted in Web Development | Leave a Comment »

“How Do I?” with ASP.NET AJAX Videos

Posted by dariosantarelli on February 17, 2007

On this page you will find dozens of videos designed for all ASP.NET developers, from the novice to the professional. If you are new to ASP.NET, you can learn the basics of how to create dynamic web applications with ASP.NET 2.0 and Visual Web Developer 2005 Express Edition, using either Visual Basic or C#. If you have a bit of development experience, you will learn how to employ some of the great new features introduced in ASP.NET 2.0.  If you haven’t watched these videos before, I highly recommend checking them out.  They are short, focused, videos that drill in on a specific topic and are designed to help master common scenarios when using the product.

Posted in .NET Framework, AJAX, ASP.NET, Web Development | Leave a Comment »

ASP.NET 2.0 CSS Friendly Control Adapters

Posted by dariosantarelli on February 11, 2007

ASP.NET is a great technology for building web sites but it would be even better if it provided more flexibility for customizing the rendered HTML. For example, the Menu control makes it simple to add a menu to a web site, but it would be better if it didn’t create <table> tags and was easier to style using CSS. Happily, it’s easy to customize and adapt the Menu control to generate better HTML. Indeed, you can modify any ASP.NET control so it produces exactly the HTML you want. The key is to use something that may be new to you: control adapters. These are little chunks of logic that you add to your web site to effectively “adapt” an ASP.NET control to render the HTML you prefer. The ASP.NET 2.0 CSS Friendly Control Adapters kit provides pre-built control adapters that you can easily use to generate CSS friendly markup from some of the more commonly used ASP.NET controls.
Here are a few links to articles on MSDN about how it works:

Posted in .NET Framework, Web Development | Leave a Comment »

Zope Behind IIS6… SCRIPT WAR!!!

Posted by dariosantarelli on February 2, 2007

Some days ago I started configuring Zope for Plone. When I was ready for deploying, I found a Windows Server 2003 SP1 based production environment with IIS6 as Web Server. I knew there is a script which forwards IIS requests to Zope (much like ProxyPass does for Apache), using Virtual Host Monster to generate correct dynamic URLs, just setting IIS5 to handle 404/405 (Not Found) errors with it.
Well, I didn’t know IIS6 breaks POST methods used in the forms inside Zope/Plone. I bang my head on the screen for a while, after a 6 hour hard-coding session, when I find a discussion in the Zope Community about my problem!!!
At the moment, a proposed “open” solution involves a Java Proxy for host-header analyzing, requesting data from Zope, and returning it back to the client.  
Well, waiting for other solutions, If you want to to speed up your Plone site by integrating it with IIS, you can still purchase Enfold Proxy

Posted in Programming, Web Development | Leave a Comment »

ASP.NET AJAX v1.0 Released!!!

Posted by dariosantarelli on January 30, 2007

Finally, ASP.NET AJAX v1.0 Released!!!
This technology enable a developer to create next-generation interfaces with reusable AJAX components. Moreover, it enhances existing Web pages using powerful AJAX controls with support for all modern browsers such as IE, Firefox and Opera.
You can continue using Visual Studio 2005 to take your ASP.NET 2.0 sites to the next level and access remote services and data directly from the browser without writing complicated script.
ASP.NET AJAX consists of the two essential downloads shown below. In the ASP.NET AJAX Downloads Page You’ll also find related downloads on this page including the Futures CTP, the sample applications, and the Microsoft AJAX Library for development on non-Windows platforms.

  • ASP.NET 2.0 AJAX Extensions 1.0
  • ASP.NET AJAX Control Toolkit (a shared-source community project from CodePlex consisting of samples and components that make it easier to work with AJAX-enabled controls and extenders. The Control Toolkit provides both ready-to-run samples and a SDK to simplify creating custom ASP.NET AJAX controls and extenders. Make sure you install ASP.NET AJAX 1.0 first!)

Posted in .NET Framework, AJAX, ASP.NET, Programming, Web Development, Web Services | Leave a Comment »

Microsoft MapPoint Web Service SDK v4.1

Posted by dariosantarelli on December 14, 2006

The MapPoint Web Service is a programmable web service hosted by Microsoft and used by enterprises and independent software developers to integrate location-based services such as maps, driving directions and proximity searches into software applications and business processes. By using the MapPoint Web Service, companies can improve business results through better discoverability of store locations and business assets trough powerful server-based mapping, including street-level address lookups, point-to-point directions, and other features that you’ve become accustomed to on many mapping or retail portals.

MapPoint Web Service Features
The MapPoint Web Service includes several features like

  • Finding Addressable and Non-addressable places (rivers, landmarks etc.) in North America, South America and Europe.
  • Reverse Geocoding by listing geographic entities that are associated with a particular coordinate.
  • Finding Nearby Places: Points of interest (POI) based on the proximity to a selected location (also along a specified route). Customers can upload custom POI datasets as well.
  • Customizing Locations: geocode and storing of custom databases to be used with MapPoint Web Service applications. Customers can include up to 300 searchable attributes for each record such as types of services and hours of operation.
  • Routing by optimized driving directions with step-by-step instructions. Worldwide City-to-City Routing is possible as well.
  • Polygons: you can define and render a region on a map and then use this region to find relations to other polygons, point data sources, addresses, and specific geographic locations for defining neighborhoods, delivery areas, cell phone coverage and territories. The MapPoint Web Service offers a polygon creation tool and several command line tools for converting existing ESRI, MapInfo, Autodesk, Intergraph and GML files to the MWS polygon file format. It also offers a COM Add-in for MapPoint 2006 North America and MapPoint 2004 Europe which allows you to draw your own polygons and save them to the MapPoint Web Service polygon XML file format.
  • Real-Time Traffic Incidents (accidents, congestion, or construction) for over 70 major metropolitan areas in the United States. Data about the traffic incident include the severity, traffic flow diversion, the expected duration and the expected delay.
  • Map Rendering in many different styles and font sizes, optimized for a wide variety of devices and applications, including Line Drive, Night Time and Urban Inset Maps.

MapPoint Web Service Developer Account
Before using the MapPoint Web Service SDK, you need to sign up for a MapPoint Web Service Developer Account and start building location-enabled solutions. With a Developer Account, you get full access to the rich set of MapPoint Web Service APIs that allow you to integrate maps, driving directions and proximity searches into a wide range of solutions. A free Developer Account also gives you access to the MapPoint Web Service staging environment , which you can use to build applications for trial, demonstration, and proof-of-concept purposes.

MapPoint Web Service Downloads
The MapPoint Web Service SDK v 4.1 includes detailed documentation and describes the basic services, requirements, development guidelines, object model and comprehensive reference information for the MapPoint Web Service. It also includes sample code demonstrating common uses of MapPoint. You can also browse the MapPoint Web Service SDK on MSDN.

MapPoint Web Service Object Model
MapPoint Web Service is an XML Web service with a SOAP API. You can use MapPoint Web Service to add location-based functionality to your applications, including high-quality maps, location finding, and routing capabilities. MapPoint Web Service consists of four constituent services: common, find, render, and route. A second XML Web Service, called “Customer Data Service”, allows you to upload, download, and manage custom data sources, including points-of-interest and polygon data. You can find the reference documentation for the MapPoint Web Service and Customer Data Service class libraries here.

Posted in .NET Framework, Web Development, Web Services | Leave a Comment »

MonoRail on ASP.NET

Posted by dariosantarelli on October 27, 2006

I’ve recently joined a meeting on MonoRail (former Castle on Rails) is a MVC web framework inspired by Action Pack. The Action Pack way of development is extremely productive , very intuitive and easily testable. MonoRail differs from the standard WebForms way of development as it enforces separation of concerns; controllers just handle application flow, models represent the data, and the view is just concerned about presentation logic. Consequently, you write less code and end up with a more maintainable application.
Monorail is an intelligent port of Ruby on Rails to .NET framework. It attempts to simplify web development and address some of ASP.NET webforms issues. It’s built on top of ASP.NET infrastructure so a lot of ASP.NET features (i.e. session control) are still available to the Monorail. There are both advantages and disadvantages to using Monorail. We always attempt to minimize the latter, but it will be hard (if not impossible) to eliminate all of the cons ;).

Posted in .NET Framework, ASP.NET, Web Development | Leave a Comment »


Posted by dariosantarelli on October 27, 2006

FreeTextBox  is one of the most-used HTML editor for ASP.NET applications. The free version of this product enables users to do basic HTML editing in a WYSIWYG environment with a look and feel similar to Microsoft Office products (additional features of FreeTextBox can be unlocked by purchasing).
Although it is easy to integrate as a Server Control and it is compatible with IE on the PC, and Mozilla and Firefox on all platforms, there are some scenarios in which its core javascript functions seems to disturb the correct work of the whole page in which it’s contained: for example, sometimes I’ve encountered some problems in integrating FreeTextBoxs in my AJAX projects, solving every kind of problem, everytime, through hard-coding approaches :(.
Anyway, it’s a very powerful and fully customizable tool for editing HTML contents… a quick solution to your interactive ASP.NET applications.

Enjoy it!!!

Posted in ASP.NET, Web Development | 2 Comments »