Leandro Boffi

Today, Mariano Sanchez, Rodolfo Finochietti and me gave a presentation about building web apps with the new  ASP.NET MVC Framework. I’m really happy, the conference was really crowded, there were stand up people, and even people sat on the floor.

Briefly, for those how couldn’t attend to the presentation, we spoke about how to structure an application using the MVC pattern, and a little about development models history.

We also  provided an introduction to the core concepts of the framework and showed a demo involving all of them. The dessert’s  strawberry were the jQuery and AJAX demos.

I hope that people have enjoyed it as much as I did, and hopefully see you all again the next year. Besides the technical stuff of the presentation, Code Camp is an event where I always found those friends from the industry that I don’t see every day, so I really enjoy it.

Learn more about the ASP.NET MVC Framework at http://www.asp.net/mvc/. If you want the slides and the code of the presentation you can download it here.

Hope has been useful!

This is the second feature I want to show you. Command Bubbling is not a new concept, it is present on server-side from ASP.NET 1.1, so you probably know it. The greatest new is that ASP.NET AJAX 4.0 brings this concept to the client-side.

Command Bubbling is a very simple, but powerful, way of bind different controls thought events in a very decupled way. Basically, a control bubbles up a command and all the controls that understand this command react to it. You can see it a lot in the server-side data controls, like when you select an item in the ASP.NET DataGridView.

Let me show you how can we use command bubbling, on client-side, to create a little more interactive UI without write a single JavaScript line.

I’ll start using the page that we created on the last post. Just in case, it is an plain HTML page, with no server side work but the service that returns the data, and we’ve created a kind of a grid by using a regular HTML table and the new AJAX DataView Control (for more information read this post).

To use command bubbling the first thing to do is to provide the name of the command to any HTML item, using the sys namespace that we create in last post in the body of the page:

Let’s provide a way of select an item of our DataView by using command bubbling. To do this we need to add the command name to the tr tag of our template, to allow the user select the item by clicking in any place of the row.

As you can see in the image, we just added one declarative attribute to the tr tag: sys:command=”select”. Now if we run it and we click in the row, the command is bubbling, but, apparently, nothing happen. In fact something is happening, because the DataView control understands the “select” command, if you don’t believe me, see it yourself:

This code is part of the DataView control and you can find it in the MicrosoftAjaxTemplates.debug.js file. It does something, it sets the selected index inside of the DataView, as you can guess it is the first step to work with an item of the view. In my next post I’ll show how to use it to create a detail view of the item, but one interesting thing that I want to show now is that the DataView control provides an attribute called “selectedItemClass” that we can set with our css class to highlight the selected item.

This is my selectedItemClass (I am not a designer):

And this is how we provide the class name to the DataView control:

Note that I’ve also added a button, just to improve the usability. The result when we run it and click in the row or the button:

So, a beauty row selection without write a single line of JavaScript, nice isn’t? Download the code here.

Disclaimer: This post is based on ASP.NET AJAX 4.0 Preview 4, it could have differences with the final version.

Since the last march ASP.NET AJAX Preview 4 is available at codeplex. I’m getting in love with this framework, because I think that it’s taking the right direction that ajax should take. One of my favorite features of ASP.NET AJAX 4.0 is client templates and that feature is the one that I will show in this post.

Client templates allows you to transform any piece of html in your page into a template to display data, just like an asp.net repeater control, but client-side. This functionality is encapsulated into a client-side control called DataView (Sys.UI.DataView), let me show you how to use it.

The first thing to do is to create an ajax-friendly web service to use as data source, you can do that using an standard asmx asp.net webservice with the ScriptService attribute (System.Web.Script.Services.ScriptServiceAttribute) or using a WCF service with the enableWebScript behavior (System.ServiceModel.Description.WebScriptEnablingBehavior). I choose a the second choice, I explain how to do it in this post.

Imagine a geek quotes application, and this our QuotesService, It has just one method that returns all the quotes from the data base using a repository, nothing fancy, this is how it looks like:

We will consume this service from a plain html page, just to show and to be sure that no server-side work is required. The first thing to do is to include the ajax framework scripts and the web service references. If you are working with ASP.NET MVC you can do it in the same way, on the other hand if you are using ASP.NET Webforms you should use the ScriptManager control.

Now let’s create the html template for the data by using a regular table html tag:

Note that I’ve set the quotesView id for the tbody tag, that’s because it will be our DataView control. I’ve also set the class attribute value to “sys-template”, this is required to allow the DataView control to know that this is a template. Inside of each td tag I’ve set the bindings using this format: “{{ PropertyName }}”, that’s what the DataView control will replace with our data, just like an asp.net data binding, but client side.

To set the data we just need to add three lines of javascript: the one how creates the DataView control by using the $create method of asp.net ajax, the one how calls the service, and the one how sets the data using the DataView.set_data(data) method.

The pageLoad() function is raised by the Microsoft Ajax Framework when the page is ready, so we run it, and that’s all, it works, this is how it looks like:

Client templates looks good isn’t? but, guess what, It gets better, there is a way to do this without write any line of javascript, just in a declarative way.

XHML allows us to extend it, and that’s what we do in the body tag, we add two namespaces: sys and dataview. Using these namespaces we set some attributes in our standard html tbody tag, providing information that the DataView control will use to automatically do what we did before writing javascript.

Note that in the dataprovider attribute we’ve set the URI of our WCF service, and as fetchoperation the name of the service operation, if we need to provide parameters we can do it using the fetchparameters attribute, just like this: dataview:fetchparameters="{{ {parameterName:parameterValue} }}".

So that’s all! Easy, right? You can download the source code here.

Disclaimer: This post is based on ASP.NET AJAX 4.0 Preview 4, it could have differences with the final version.