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!

The next Saturday, September 26th, at UP (Mario Bravo 1050) in Buenos Aires myself and many other Lagash team mates will be speaking at Microsoft CodeCamp conference.

Mariano Sanchez, Rodolfo Finochietti and me will be talking about building web applications with the ASP.NET MVC Framework, in a session called “Desarrollando sitios web escalables con ASP.NET MVC”, scheduled in the mid-day at 12:30.

We will provide an introduction to the right use of the ASP.NET MVC framework, our demo will cover the core concepts of it. As a bonus track we will show how to use jQuery to pimp our application and provide a better user experience.

If you didn’t register yet, don’t miss the chance, I promise you won’t be disappointed: http://www.codecamp.com.ar

Hope to see you there!

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.