ThreadAbortException

August 2011 Entries

Using HTML5 Local Storage in ASP.NET Applications

I recently delivered a Zeollar session on  Using HTML5 Local Storage in ASP.NET Applications

Following it up with a blog post on the contents, since a few mentioned that the code was not better aligned/readable.

Local Storage and Offline Web Applications are 2 promising features of HTML5 going around the web apart from the (already tired of?) Videos.  Local Storage (persistent storage) is not entirely new since we had cookies ever since sliced bread (or seems to be so).  But, the limitation of 4KB on cookies is a tiring boredom and often web developers wanted more information to the stored on the local machine so that it is available for faster access and also much better “remember me” experience.

Local Storage is enabled for IE8 and great versions hence even if someone is on Windows XP, it should work just fine.   While, I am writing on this, am entirely new and just exploring some of the capabilities, so if there are better ways to implement, feel free to share in the comments.

To begin with, we need a few HTML input types, as follows:-

<input type="text" name="txtName" id="txtName" />

       <input type="button" value="Save" onclick="add()" />
       <input type="button" value="Get" onclick="get()" />

Apparently, its basically a bunch of buttons and a textbox to enter value.

The “add()” and “get()” needs to be fired up.

function add() {

       window.localStorage.setItem("name", document.getElementById('txtName').value);
   }

Notice that with simply window.localStorage.setItem, we could store a key value pair.  Here, am picking up the value from the TextBox.

Next, is to try and retrieve the value from the local storage

function get() {
        alert(window.localStorage.getItem("name"));
    }

Again, with getItem, we could retrieve the value from the local storage.

The local storage in HTML5 specification allows upto 10MB size of storage, which is pretty decent.  We could simply store key/value pairs.  If we need to store complex types such as properties, then it’s a little more work to serialize/deserialize using JSon.   Lets modify the add() and get() functions

<script type="text/javascript">
    var localstore = new LocalStorage();
   
    function add() {
       
        var products = [
            { name: "Rice", price: 100 },
            { name: "Wheat", price: 200 }
        ];
        localstore.set("products", products);
    }

    function get() {
        var products = localstore.get("products");
        for (var i = 0; i < products.length; i++) {
            alert('The price of ' + products[i].name + ' is ' + products[i].price);
           
        }
    }

    function LocalStorage() {
        this.get = function (name) {
            return JSON.parse(window.localStorage.getItem(name));
        };

        this.set = function (name, value) {
            window.localStorage.setItem(name, JSON.stringify(value));
        };
        this.clear = function () {
            window.localStorage.clear();
        };
    }
</script>

As you can see, we have repurposed the add() and get() to use the Storage() function that does few more things than basic string storage.

Finally, to use HTML5 local storage in a much advanced scenario, added a content-editable HTML unordered list.   When we add the contenteditable=”true” we can start typing our list as if it were a Text Area.  But the value wouldn’t be retained when we come back to the page since we need to persist the value.

<ul  id="favMovies" contenteditable="true">
<li></li>


</ul>

 

After adding this, with jQuery, identify the ul to store the values into local storage and thereafter retrieve them on page load.  (I got this idea from a video, but unable to get the link to post here.  So all credit to the author)

$(function () {

    var favMovies = document.getElementById('favMovies');

    $(favMovies).blur(function () {

        localStorage.setItem('favMovies', this.innerHTML);
    });


    //page load
    if (localStorage.getItem('favMovies')) {

        favMovies.innerHTML = localStorage.getItem('favMovies');

    }

});


I have uploaded the sample to skydrive https://skydrive.live.com/redir.aspx?cid=069f94a102eff49a&resid=69F94A102EFF49A!783

Also, the recorded session is available at http://zeollar.cloudapp.net/Session/260

Cheers !!!

MVC 3 and Windows Azure Tools for Visual Studio 2010–August 2011 Release

The new version of Windows Azure Tools for Visual Studio 2010 i.e. the August 2011 release just got out.  You can read and download it from http://blogs.msdn.com/b/windowsazure/archive/2011/08/03/announcing-the-august-2011-release-of-the-windows-azure-tools-for-microsoft-visual-studio-2010.aspx

My favorite pick is the ability to add MVC3 Web Roles.  In the past we had to do certain work-around for running MVC3 Applications.  Now, there is an ability to add MVC 3 Web Role

image

There is now support for Universal Providers as well.  You can view my recorded intro on Universal Providers at http://zeollar.cloudapp.net/Session/245 

and there are few more enhancements.  You can read about the full set of changes at http://blogs.msdn.com/b/windowsazure/archive/2011/08/03/announcing-the-august-2011-release-of-the-windows-azure-tools-for-microsoft-visual-studio-2010.aspx

Cheers !!!

AJAX Control Toolkit, NuGet Package Manager Console and the new HTMLEditorExtender Control

Its been a while since I played with Web forms, AJAX stuff.  I was curious in checking out, particularly how the AJAX Control Toolkit which used to be my favorite in the past Smile is evolving.

There is a new release of AJAX Control Toolkit, just hot off the oven.  You can download the binaries from http://ajaxcontroltoolkit.codeplex.com/ 

Now, while the regular way we have downloaded and used AJAX Control Toolkit is by visiting the above codeplex page and download the latest version, there is also a newer and simpler approach with the NuGet Package Manager in Visual Studio 2010.  NuGet package manager is a repository of binaries, applications that can be downloaded and used in your Web forms / MVC Applications.

I wanted to try out install AJAX Control Toolkit from the Package Manager Console.  So, I went ahead and created a “File – New Project – ASP.NET Web Application”.  Once you install the NuGet Package Manager from http://nuget.org/ you will get 2 ways to install libraries from NuGet.  One, is typically from the Project’s right click menu – Manage NuGet Package.

image 

The other way, my favorite, is through the Package Manager Console, a powershell based extension for Visual Studio

image

Once you select the “Package Manager Console” form the menu, the following prompt appears in the bottom (next to Build/Output Windows)

image

From there, I typed “Install-Package AJAXControlToolkit” and hit enter.  It successfully installed the latest version and also made the necessary entries, to the web.config file

image

Only thing is, you need to build the project for Visual Studio to pick intellisense for Toolkit. 

Post that, I wanted to try the new HTMLEditorExtender Control.  I added the ToolScriptManager to the page and then added a TextBox and also added the HTMLEditorExtender to it.

image

Then, when I ran the page, I got the nice HTML Editor for my TextBox where I could enter formatted text as below:-

image

Sweet, right Smile

Now, the first question that one would ask is, wasn’t there an Editor Control already in Toolkit.  Indeed, its still there.  But this one uses HTML5 Content-Editable feature enabled in the modern browsers.  It also is less in terms of markup foot print.

Infact, Stephen Walther has a detailed post explaining the difference.  Also, it is advised to use the Anti-XSS Library in combination to avoid script injections.  Read the post at http://stephenwalther.com/blog/archive/2011/08/01/ajax-control-toolkit-july-2011-release-and-the-new-html.aspx

I liked this control so much that, I thought I would revive my series on Web Forms Smile

Cheers !!!