Star System with ASP.NET and jQuery

Gmail and Yahoo! Mail have labeling features that I find extremely useful under certain circumstances.  Yahoo! has its flag system and Google has its star system.  Gmail Labs’ extension of the starring system, dubbed Superstars,  made the feature infinately more useful in my book.  Here Google describes the added benefits of Superstars:

…if you use Gmail’s star for different things (flag important conversations, flag conversations for follow-up) and you want to differentiate them, you now have more icons for starring messages. Just click on the star repeatedly to toggle between the different states.

I oversee an application that manages sales leads and have found that this type of starring feature is the perfect organizational feature for our sales reps. They already had features that allowed them to make notes, schedule call-back dates and emphasize their best leads, but this one-click, one-page option really maximizes efficiency.

When I first began building the application, I started with a light bulb that had only an on/off feature. The sale reps were happy for a while. But then, I started to get requests for a red light so they could mark a “hot lead.” 

While implementing this red bulb, I began to evaluate how I had written the application.  I soon saw a relatively generic way to implement a more detailed starring system using  jQuery, ASP.NET and the fam fam fam icon set.

 

I started by choosing a set of 10 icons. The default icon was the “off” light bulb — toggling the icon would light up the bulb.  I tossed three flags into the mix: a red flag,a green flag and a blue flag.  Then, I rounded out the set with 5 symbols: a check mark, a ruby, a heart, a star and an exclamation point.  This variety would give the sales team the freedom to come up with their own organizational system, instead of being subjected to the mandate of the software, which I always try to avoid when building any application. 

 

There are a few parts to this, but overall the process is simple.  I gathered the images I wanted and placed them into a directory on my static server, renaming them 0 through 9.  This was simply for convenience; we could have mapped each image in code or in a database, etc.

 

Next, we need a generic handler to handle the requests.  By using the handler, we can increment the superstar, thereby getting the next image to display when the user changes the status.  I created a new generic handler,togglestar.ashx.

 

public void ProcessRequest (HttpContextcontext)

{

        context.Response.ContentType = “text/plain”;

 

        if(context.Request.QueryString[“ID”]== null)

        { context.Response.Write(

“http://img.dagoosh.com/ico/star/0.png”);

  return;

 }

 

        stringID = context.Request.QueryString[“ID”].ToString();

       

        Guid AppID;

        if(!dgx.util.GuidTryParse( ID, out AppID ))

        {

context.Response.Write(

“http://img.dagoosh.com/ico/star/0.png”);

return;

}

       

        int xie= dgx.leads.superstars.Increment( AppID,10);

       

        if(xie< 0)

            context.Response.Write(

“http://img.dagoosh.com/ico/star/0.png “);

        else

            context.Response.Write(

” http://img.dagoosh.com/ico/star/” +

xie.ToString() + “.png” );    

}

 

Simple enough, right?  What we will do a little bit later is setup a jQuery function to call the handler and change the src of the image, once the handler returns with the new image uri.

 

Now there is some work to be done in order to finish up this handler.  You may have noticed two function references:

·        GuidTryParse, which just adds the ability to use TryParse on a Guid. 

·        The Increment function from our SuperStars class.

 

public static int IncrementSuperStar( Guid appID, int starMax )

{

    DbCommand cmd = dgx.p.CreateCommand( true );

    cmd.CommandText = “IncrementSuperStar”;

 

    DbParameter p = cmd.CreateParameter();

    p.Value = appID;

    p.DbType = DbType.Guid;

    p.ParameterName = “@appID”;

    cmd.Parameters.Add( p );

 

    p = cmd.CreateParameter();

    p.Value = starMax;

    p.DbType = DbType.Int32;

    p.ParameterName = “@StarMax”;

    cmd.Parameters.Add( p );

 

    DataTablet = ABCProvider.ExecuteSelectCommand( cmd );

 

    if(t.Rows.Count == 0)

        return -1;

 

    int x;

    if (!int.TryParse( t.Rows[0][“Flags”].ToString(),out x ))

        return -1;

 

    return x;

}

 

The Increment function itself is very simple.  It calls the stored procedure and returns the Flags attribute.  The appID is the ID of the applicant, or the lead, or the message — whatever you want to star. The StarMax is how many images you want to deal with.  This way,we can go back and change the starMax in one place and easily add additional images at any time. The real logic here is done in the SQL, so let’s dive into that.

 

CREATE PROCEDURE [dbo].[Applicants_IncrementSuperStar]

      @AppID uniqueidentifier,

      @StarMax int

AS

BEGIN

      SET NOCOUNT ON;

     

      DECLARE @Star int;

     

      UPDATE JobApplications SET Flags = Flags + 1 WHERE ID = @AppID;

 

      SELECT @Star = Flags FROM JobApplications WHERE ID = @AppID;

 

      if(@Star >= @StarMax)

            begin

                  UPDATE JobApplications SET Flags = 0 WHERE ID = @AppID;

            end

 

      SELECT Flags FROM JobApplications WHERE ID = @AppID;

END

 

Again, pretty straight forward. We increment the Flags field by 1, we check to make sure the Flags field is not over the maximum number of stars we have, then return with the Flags field.

 

So on to the client side.  I assign an onClick attribute to each of the items image when binding the data onthe page.  I have every element in a GridView or a Repeater and use a function GetStar to draw the image.

 

public string GetStar( stringID )

    {

        Guidappid;

 

        if (!dgx.util.GuidTryParse( ID, outappid ))

            return “”;

 

        string x = dgx.leads.superstars.GetSuperStar( appid).ToString();

 

        return “<img src=\” http://img.dagoosh.com/ico/star/” +

x + “.png\”onClick=\”toggleStar(‘” +

ID + “‘,this)\” alt=\”Starred\” />”;

    }

 

This binds all of the images with their current state, and then the avenue to update.  The toggleStar JavaScript function calls the handler we made above, gets a new src for theimage based on the new star and displays a quick success message.

 

 

functiontoggleStar(AppID, image)

{

    $.get(“../xml/toggleappstar.ashx?ID=” + AppID,

        function(data){

            image.src = data;                                   

            $(“#tester”).html(“success: ‘”

+ data + “‘”);                   

            $(“#tester”).show();                   

            setInterval(“hideTester()”,5000);    

        }); 

}

 

functionhideTester()

{

    $(“#tester”).fadeOut();

}

 

As usual, I am sure this can be improved upon.  This creates a functional super star system,and has made my sales managers very happy campers.  I will come up with a quick sample source package soon.

15 comments » Write a comment

  1. I admire the valuable information you offer in your articles. I will bookmark your blog and have my children check up here often. I am quite sure they will learn lots of new stuff here than anybody else!

  2. This article gives the light in which we can observe the reality. this is very nice one and gives indepth information. thanks for this nice article

  3. Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.

  4. Have you ever considered adding more videos to your blog posts to keep the readers more entertained? I mean I just read through the entire article of yours and it was quite good but since I’m more of a visual learner,I found that to be more helpful well l

  5. Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share.

  6. The secret to productive goal setting is in establishing clearly defined goals, writing them down and then focusing on them several times a day with words, pictures and emotions as if we’ve already achieved them.

  7. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work!

  8. The chess board is the world, the pieces are the phenomena of the universe, the rules of the game are what we call the laws of Nature. The player on the other side is hidden from us. We know that his play is always fair, just, and patient. But we also know, to our cost, that he never overlooks a mistake, or makes the smallest allowance for ignorance.

Leave a Reply

Required fields are marked *.