jQuery and DotNetNuke Modules

I wanted to see how easy it is to use jQuery in a DNN module, turns out its very easy. I decided to modify my ratings module to use jQuery to record the votes using AJAX without the need for a postback.

Try it out at the top of the page.

The first step to using jQuery is that you need to include a reference to the javascsript library. Since I already use jQuery in other places on my site I load the library on the template and not in the module. Regardless of where the library is loaded template or module, you should load jQuery using Google AJAX libraries.

To have something to call on the server-side created a http handler using the ashx extension. The http handler simply takes some parameters, processes the values supplied then return some data formatted using JSON.

There is one very important thing that you need to apply to the HTTP Handler without it Internet Explorer will cache the response and you’re AJAX calls will never execute the code.

context.Response.Cache.SetCacheability(HttpCacheability.NoCache); 
context.Response.Cache.SetNoStore(); 
context.Response.Cache.SetExpires(DateTime.MinValue); 

This will force IE not to cache the response.

When a vote is recorded then we simple return an update on the number of votes and the average.

context.Response.ContentType = "application/json"; 

context.Response.Write(string.Format("{{ average : {0}, number : {1}}}",

                                                       average,
                                                      numberOfRatings)); 

For more complex JSON object there are plenty of .net libraries which will format the output correctly.

With the server-side code complete it is simply a case of writing the client-side code. The key here is that we need to know the correct URL of the HTTP hander to allow us to call it by AJAX.

protected string AjaxHandlerPath()
{
  return string.Concat(this.ModulePath,"BtbRatingHandler.ashx");
}

Referencing this property in the javascript code will the allow us to call it.

jQuery("#hypBtbVote").click(function(){
 var rating = jQuery(".btbRadio:checked").val();
 jQuery.getJSON("<%= AjaxHandlerPath() %>", {moduleId: <%= ModuleId %>, 
  tabModuleId: <%= TabModuleId %>, rating: rating}, function(data){
    jQuery(".NumberOfVotesValue").text(data.number);
    var wholeStar = parseInt(data.average);
    jQuery(".pnlStars").empty();
    for(i=0; i < wholeStar; i++){
      jQuery(".pnlStars").append("star_on.gif\" alt=\"Whole Star\"/>");   
    }
    if(wholeStar < 5){
      var remaining = data.average - wholeStar;
      if(remaining < 0.3){
        jQuery(".pnlStars").append("star_off.gif\" alt=\"Whole Star\"/>");  
      }else if(remaining < 0.8){
        jQuery(".pnlStars").append("star_half.gif\" alt=\"Half Star\"/>");  
      }else{
        jQuery(".pnlStars").append("star_on.gif\" alt=\"Empty Star\"/>");  
      }
      
      wholeStar++;
      if(wholeStar < 5){
        for(i=wholeStar; i < 5; i++){
          jQuery(".pnlStars").append("star_off.gif\" alt=\"Empty Star\"/>"); 
        }
      }
    }
    jQuery("#divBtbRating").hide();
 });
 return false;
});
});

While this code may look complex its really straight forward. We make a remote call using jQuery, get the results as JSON which when the process to update the control with the correct number of stars for the average rating and the number of votes counted.

The rating module can still work with the standard postback mechanism of ASP.net, using a setting on the module allows you to add the jQuery code or not as the case maybe.

BTBRatingController objBTBRating = new BTBRatingController();

//display the correct mode, either postback or ajax
if (objBTBRating.UseAjaxMethods(this.TabModuleId))
{
   pnlAjaxVote.Visible = true;
   pnlPostBackVote.Visible = false;
}
else
{
   pnlAjaxVote.Visible = false;
   pnlPostBackVote.Visible = true;
}

Download the source and PA to learn more. Important you need to load jQuery 1.2.x or greater on your portal template for the module to work.