You should never forget your (browser) history

by Ishai Hachlili 18. February 2008 10:44

One of the most annoying things in AJAX based applications is clicking the back button and going back to a previous url and not the previous state of the application.
Users are trained at clicking the back button if they went to the wrong place and need to get back to the last place they were at. Even when I know I'm using an AJAX app, I would click it by mistake.

What happens when uses click the back button in your AJAX application?
I've worked on a lot of back office web applications and when an application uses AJAX with only one real page (in the same way gmail does), clicking back will usually take you to the login screen, and that's not where you wanted to go.

Adding History to an AJAX application
Fortunately, this problem has been solved. You can manipulate the browser history and control what happens when a user clicks the back button.
Even better, Microsoft’s AJAX library adds easy support for setting history points and going back to them, so you don't have to write the code yourself.

Let’s take a look at the AJAX search sample, where we had next and previous buttons to navigate the search results.

Whenever a results page is shown I want to add a history point.

Here's the code I'll use to set a history point in JavaScript:

Sys.Application.addHistoryPoint({showPage:pager.CurrentPageIndex},'MyTakeOnNet - Search Results - Page ' + pager.CurrentPageIndex);

Sys.Application.addHistoryPoint takes two parameters, the first one can be any object you want, you will use this object to decide what to do when the user goes back to this history point. the second parameter is the title of the page.

If you add this line of code to the pager's ShowPage method, you'll see the history button's drop down will have a new entry for each page.

Handling the history navigation
Every time a user navigates through the browsers history by clicking the back button or selecting a history point from the back buttons drop down, the MS AJAX library raises an event.
To subscribe to this event, add the following line of code when the page loads.


and add the onNavigate function to handle the event
function onNavigate (sender, e) {    //get state and make change to application    var state=e.get_state();    if (typeof(state.showPage) != 'undefined') {        if (pager.CurrentPageIndex != state.showPage)            pager.ShowPage(state.showPage);    }}

The get_state() call will return the object you saved as the first parameter of the history point, you can then use this parameter to show the page.

Pretty simple, right?
It does get more complicated if you remember that a user might execute several searches and page through them, so the search parameters should be saved as well with the history point.
You have to make sure you cover the entire state of you AJAX enabled page to make sure you can re-create that state when the user clicks the back button, but at least you don't have to write the code to deal with the browser's history


AJAX | Asp.Net | Javascript

Ajax Data Controls (Repeater, Data List and Grid View)

by Ishai Hachlili 18. February 2008 08:14

ADC is a set of data controls that try to mimic the Asp.Net controls using Asp.Net AJAX Extensions.

I'm looking at the GridView in particular, although I never really liked the Asp.Net control, the AJAX version might work well for my search pages.
For the current project I'm working on I won't be using the server side wrapper, just the client side code.

The grid view control supports paging, sorting, column dragging, links, checkboxes and in-place editing.

I'm going to try it out, see if it takes the places of my upgraded WebFXColumnList...

check it out at Ajax Data Controls - Home


AJAX | Asp.Net | Javascript

Using DiscoverParameters with the Ajax Search Page

by Ishai Hachlili 15. February 2008 19:20

This is a small upgrade to the DoSearch method in the data access layer.
Instead of using the FieldType property for each parameter, I'm using db.DiscoverParameters, and instead of adding new parameters I'm setting the values of the discovered parameters.

I didn't want to use a discovery but after starting to use the Enterprise Library's Data block, I decided to give it a try.
As you can see it's very easy to use, just one line of code, and the discovery results are supposed to be cached, so the performance hit should be too hard.

Here's the updated code:

/// <summary>
/// Performs a search
/// </summary>
/// <param name="SPName">the name of the Stored Procedure to execute</param>
/// <param name="DBName">the name of the DataBase where the stored procedure is (if not the default database)</param>
/// <param name="searchParams">The search parameters including page size</param>
/// <returns>a dataset of the search results</returns>
public DataSet DoSearch(string SPName, string DBName, IshaiHachlili.MyTakeOnDotNet.Entities.SearchParameters searchParams)
    Database db = DatabaseFactory.CreateDatabase(DBName);
    DbCommand cmd = db.GetStoredProcCommand(SPName);
    //Add form input search parameters for this search query
    foreach (QueryParameter fld in searchParams.Parameters)
        //db.AddInParameter(cmd, fld.FieldName, fld.FieldType, fld.FieldValue);
        cmd.Parameters['@' + fld.FieldName].Value = fld.FieldValue;

    //Add common parameters (all search stored procedures should have this parameters and support paging and sorting functionality)
    cmd.Parameters["@PageIndex"].Value = searchParams.PageIndex;
    cmd.Parameters["@PageSize"].Value = searchParams.PageSize;
    cmd.Parameters["@SortColumn"].Value = searchParams.SortColumn;
    cmd.Parameters["@SortOrder"].Value = searchParams.SortOrder;

    DataSet ds = db.ExecuteDataSet(cmd);

    return ds;


Enterprise Library

About Ishai

Ishai is the founder of Smart Trivia, Inc. where he builds trivia games for smartphones using MvvmCross and Xamarin. He's also running the Silicon Valley Mobile/Cross Platform .Net Meetup and helps other companies build mobile apps using Xamarin as a consultant

Recent Tweets

Twitter October 23, 05:22
@BenThePCGuy a standard where that doesn't matter is better. One more reason to get the #Lumia920, wireless charging, no need for microUSB

Twitter October 23, 05:21
@ManMadeMoon where they dance around the issues and don't really talk about them

Twitter October 23, 05:20
@BenThePCGuy are you a @wpdev ?

Twitter October 23, 04:17
@JonahLupton But if it's black it's usually better

Twitter October 23, 02:58
@jongalloway next time ask your 5 year old how to spell