Thanks to the brave souls that ignored the incredibly exaggerated Winter storm warnings and insane weather forecast for last night. These folks came to the LCNUG meeting and were home before the first snow flake hit the ground. Also, thanks LCNUG for inviting me to talk, I hope you enjoyed at least a little bit.

The material I had to show in my presentation would no doubt fill an entire day (because it came from a full-day class I previously led) but we are not that crazy so we decided that:

• Doesn't matter how much of the material we cover, what we cover we will cover well.
• It would be best to talk about less things but get more value out of that than talk about a whole lot of things and feel like you just wasted two hours of your life.
• Go only as far as our stamina (and storm anxiety) allowed us to.
• Ask, ask, ask. Don't go back home with any lingering question.
• Well, keep that under the 2-hour mark, will you?

I never thought we would have enough time to see the entire material or even see some jQuery stuff. But I'm confident that what we have seen there will allow anyone that is starting to take JavaScript seriously to jump on jQuery (or YUI or Prototype.js, etc) and be able to effectively read the docs, the samples, and even the source code.

I'm trying to get clearance with my company to share the presentation material. Either by a download link here or directly emailing the attendees. Sit tight.

Next week I'll be speaking at the Lake County .NET Users' Group, in Grayslake, IL. The topic will be something that is near and dear to me and which I have talked and written about quite a number of times.

If you live in the North 'burbs, come and support our local group. You can register for this event here.

JavaScript - Beyond the Curly Braces

One of the greatest problems with JavaScript is its superficial syntax resemblance of C-style languages. We call it the curse of the curly braces.

That is also a very large source of frustration for developers trying to learn JavaScript beyond the basics. Thinking that JavaScript is somehow related to Java or even "It's almost like C# but a little simpler" is an unfortunate and common occurrence that can only lead to trouble.

In this session we will analyze some of the fundamental differences between JavaScript and C#/Java. We will highlight the pitfalls that can trap us and the appropriate workarounds for them.

Time permitting and if there's interest we will take a look at Idiomatic JavaScript, which will help us understand how JavaScript is being written these days. Learning about this will also help you when trying to read the source code or even the documentation and samples for popular JavaScript libraries like jQuery, Prototype, YUI, etc.

The other day I came across this post in Marteen Balliauw's blog where he demonstrates and interesting way to make the same ASP.NET MVC view render correctly from both a regular request and an Ajax request.

In Marteen's post he uses a custom ActionFilterAttribute to detect the Ajax call and replace the standard master page with an unadorned Empty master page.

I liked the idea that you can add that behavior to any action simply by bolting that attribute to it.

What I'm going to illustrate here is a variation of that idea that can be used when you have your own base class to all your controllers, which is something I always do.

SIDE NOTE: I have the habit of creating base classes for all the important things in my ASP.NET applications right after I create the project. I carried this habit from the ASP.NET Webforms-style to the MVC projects. So I typically have ApplicationController, ApplicationView<T>, PartialView<T>, ApplicationMaster, etc. These classes start off empty but code starts finding its way to them rather quickly.

What I'm going to do is override the Controller.View() method to detect the Ajax calls and replace the master page right there.

public abstract class ApplicationController: Controller
{
  protected override ViewResult View(
            string viewName, string masterName, object model)
  {
    if(IsAjaxRequest)
      return base.View(viewName, "Empty", model);

    return base.View(viewName, masterName, model);
  }

  protected virtual bool IsAjaxRequest
  {
    //Both Prototype.js and jQuery send 
    // the X-Requested-With header in Ajax calls
    get
    {
      var request = ControllerContext.HttpContext.Request;
      return (request.Headers["X-Requested-With"] == "XMLHttpRequest");
    }
  }
}

With that in place I don't need to change anything in my action code to start supporting the Ajax calls (as long as the controller inherits from the above base class)

public class SampleController : ApplicationController
{
  public ActionResult Index()
  {
    return View();
  }

  public ActionResult Details(int id)
  {
    var user = new UserInfo {Name = "user" + id, Age = 30};
    return View(user);
  }
}

My Index action calls the Details action using both a regular request and an Ajax call, for the sake of the example.

<%@ Page Title="" Language="C#" 
  MasterPageFile="~/Views/Shared/Site.Master" 
  AutoEventWireup="true" 
  CodeBehind="Index.aspx.cs" 
  Inherits="MvcBeta1.Views.Sample.Index" %>
<asp:Content ID="Content1" 
        ContentPlaceHolderID="MainContent" runat="server">
<h2>Sample View Index</h2>
<%= Html.ActionLink("Go to Details", "Details", new { id = 123 })%>
<hr />
<input type="button"  id="loadDetails" value="Load with Ajax" />
<div id="detailsDiv" style="background-color:#aaa;">
[details should load here]
</div>

<script>
  $(function() {
    $('#loadDetails').click(function() {
      $('#detailsDiv').
        load('<%= Url.Action("Details", new {id = 123}) %>');
    });
  });
</script>
</asp:Content>

The Details view is trivial. It's just a table.

<%@ Page Title="" Language="C#" 
  MasterPageFile="~/Views/Shared/Site.Master"
  AutoEventWireup="true" 
  CodeBehind="Details.aspx.cs" 
  Inherits="MvcBeta1.Views.Sample.Details" %>
<asp:Content ID="Content1" 
        ContentPlaceHolderID="MainContent" runat="server">
  <h2>Details for <%= ViewData.Model.Name %></h2>
  <table border="1">
    <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>
    <% for(int i=1; i<= 5; i++) { %>
      <tr>
        <td>cell (<%= i %>, 1)</td>
        <td>cell (<%= i %>, 2)</td>
        <td>cell (<%= i %>, 3)</td>
      </tr>
    <%} %>
  </table>
</asp:Content>

When at the Index page we can click on the "Go to Details" link and see the full rendering of the Details view.

If we had instead clicked the "Load with Ajax" button we would cause a simpler version of that page to be inserted in the detailsDiv element (note that the tabs and the blue background that surrounds the table did not come in the rendered content.)

Of course, ASPX files are not the indicated place for placing content that can be used in partial updates, ASCX files would be a better choice for that. That said, sometimes it can be really convenient to have this ability.