Tuesday, August 16th, 2005

Building an AJAX based Specials Sorter

Category: Examples

Rick Strahl went about building an Ajax based Specials Sorter.

His result was produced here.

The idea is that I have a list of items in the store that have a Special flag set that are displayed on the home page of the store. The Special flag also serves as a sort order. Prior to the above page there’s was no easy way to manage the Specials, other than visit each item in the inventory and more or less remember which item was a special.

So the purpose of this form is to show you all the specials and allow sorting them in a somewhat visual way, as well as providing easy access to the inventory items for editing and managing the entire process of creating these Specials.

As it turns out I’m not sure if much was gained by using an AJAX approach to this form. Certainly I can tell you that it would have taken me a fraction of the time to build this form with pure server side code. The main advantage of the AJAX approach is that it’s relatively easy to keep the form in context and the selected item active and visually displayed. You can do that with ASP.NET server side too, but it doesn’t work all that well…

The end result is that much less data is passed over the wire than would be with full page redraws. With my Cable IP Connection moving things around the list is reasonably fast – there’s a little hesitation, but it’s acceptable and definitely faster than a server PostBack would be. Anybody have a dial-up connection? Curious to see how this would look.

Code Example

public partial class SpecialsManager : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Ajax.Manager.Register(this, "Callback", Ajax.Debug.Errors);
 
        if (!Ajax.Manager.IsCallBack)
        {
            busItem Item = WebStoreFactory.GetbusItem();
            int Count = item.GetItemList("pk,sku,descript","","descript");
 
            this.lstItems.DataSource = item.DataSet.Tables["ItemList"];
            this.lstItems.DataTextField = "Descript";
            this.lstItems.DataValueField = "sku";
            this.lstItems.DataBind();

            this.lstItems.Items.Insert(0, new ListItem("*** Select an item"));
            this.lstItems.Attributes.Add("onchange","SelectItem(this.value)");
        }
    }

    [Ajax.Method]
    public DataTable GetItemList()
    {
        busItem Item = WebStoreFactory.GetbusItem();

        // *** Run query and return result into Item.ItemList Table
        int Count = Item.GetItemList("pk,Sku,Descript,Special,SpecialHd,SpecialTxt,SortOrder,ItemImage",
                                     "Special!=0",
                                     "Special desc,Descript");

        return Item.DataSet.Tables["ItemList"];
    }

    [Ajax.Method]
    public bool SaveItem(int Pk, int Special)
    {
        busItem Item = WebStoreFactory.GetbusItem();
        if (!Item.Load(Pk))
            throw new ApplicationException("Invalid Item passed back.");
 
        wws_itemsRow ItemEntity = Item.GetTypedDataRow();
        ItemEntity.Special = Special;
        Item.Save();

        return true;
    }
 
    [Ajax.Method]
    public void ResortSpecials()
    {
        busItem Item = WebStoreFactory.GetbusItem();
        Item.ResortSpecials();
    }
}

Posted by Dion Almaer at 2:56 pm
Comment here

+++--
3.6 rating from 7 votes

Comments Here »

Comments feed

Leave a comment

You must be logged in to post a comment.