<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d13376580\x26blogName\x3dThe+GeekWithin\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://geekwithin.blogspot.com/search\x26blogLocale\x3den_US\x26v\x3d2\x26homepageUrl\x3dhttp://geekwithin.blogspot.com/\x26vt\x3d-8111287070889316650', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

The GeekWithin

Friday, June 24, 2005

Creating a Cancel Button to Go Back

Many of you may be familiar with the need to add a Cancel button on a form or other page.

I ran to an interesting development though when all I wanted it to to was return to the previous page.... the previous page, as defined by the JavaScript history cache, is not what you may have expected. It seems that EVERY postback is stored in the browser history cache and going back like this...
<input class="button_red" onclick="window.history.go(-1);" value="Cancel" type="button">
may not always work. Sigh.

Well, never fear for I have found a solution that works quite well. It starts by modifying the HTML control a little first:
<input runat="server" id="btnCancel" name="btnCancel" class="button_red" value="Cancel" type="button">
You will notice that it is setup to runat the server, which will allow me to access it from the code behind file. Also, I have removed the onClick event since I plan to add it dynamically instead.

Next, if VS.Net is as unkind to you as to me, you will need to add the following object declaration:
protected System.Web.UI.HtmlControls.HtmlInputButton btnCancel;

Once you can access it, the next trick up our sleeves is to use the ViewState to track how many times you have accessed this page. For those who are unfamiliar, the ViewState lets you store values in it, much like a Session, and embeds them into the form.
ViewState["history"] = Convert.ToString(Convert.ToInt32(ViewState["history"].ToString()) + 1);
ViewState["history"] = "1";

You will notice that I am cheating here by using a Try.. Catch to validate whether this is our first visit. If it is our first visit, the ViewState key will not exist and cause an Exception, which in turn sets the key to a number one.

The final bit of code we need adds the onClick event to our HTML button:
btnCancel.Attributes.Add("onClick", "window.history.go(-" + ViewState["history"] + ");");

There you go! Anyone have any improvements? Comments?


Creative Commons License  This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.