My blog contains all new experiments with .Net and Silverlight which can helps to other developers.

Thursday, November 10, 2011

Making Offline MVC 3 Application.

Offline App

Hi Guys!! I never thought, building offline MVC 3 app could be this much simple.

I had a question in mind for a long time that Why this offline application? How it works? Etc...

As per my knowledge, In Silverlight there is smart client concept. So that, Even we can see and work when there is no network available (flight mode or in remote area). Whenever device/app detects network, then either user can invoke saving operation into server or application can automatically triggers event to save data.

Silverlight did a great job in this aspect. But, in case of asp.net/html application, how it can be done?.

For the same purpose, HTML 5 introduces a MIME type manifest and local storage.

It mainly adds one manifest file to load all required recourses.

This walkthrough is to demonstrate the how we can create/develop offline/online application using MVC 3.

I will first create ASP.Net MVC 3 empty app using VS 2010 and I will add offline htm page to the project.

The htm page will look like:

The first line uses the Html5 doctype and the header links to jQuery. We uses two buttons, one to create the profiles in the browser local storage and another the send the profiles to the server.

To create red boxes arround our input boxes when jQuery detects some validation we need to add these few lines of css to stylesheet:

input.error {

border: 2px solid red;

}

Now it’s time to implement our UI logic with javascript. By creating a separate file for our javascript we keep the html page clean.

To get data from controller side we can use JSON format as given bellow.

In js file we can use

$.getJSON(

//controller name.

root + '/GetDataFromServer',

"",

function (data) {

});

When the user click on the create button the createSubscription function is called, this function is responsible for serializing the data into a Json object and to store it in the isolated storage. Isolated storage is a feature defined in the Html5 spec. For each domain the browser provide access to private key/value pair collection where data can be stored and retrieved. The sendData button is attached with an anonymous function that iterate over the key/value pair collection that contains the JSON serialized subscriptions and post the JSON serialized subscription object.

The MVC 3 includes built-in JSON binding support that enables action methods to receive JSON-encoded data and model-bind it to action-method parameters. We will now create our Model to bind to, add a OfflineModel class to the models of the MVC app:

public class OfflineModel

{

[Required]

[Display(Name = "Firstname")]

public string Firstname { get; set; }

[Required]

[Display(Name = "Lastname")]

public string Lastname { get; set; }

[Display(Name = "Phone")]

public string Phone { get; set; }

[Required]

[DataType(DataType.EmailAddress)]

[Display(Name = "Email address")]

public string Email { get; set; }

public void Save()

{

//store the object in db

//...

}

}

In controller, I have written sample code for returning some data.

public ActionResult GetDataFromServer()

{

List lstscores = new List();

try

{

//Return format to the client side.

return Json(

new { message = lstscores },

JsonRequestBehavior.AllowGet);

}

catch

{

throw;

}

}

In case, we need to bind these data to any controller like table/list etc, then we can create item list dynamically.

Here “data” is the JSON array of data. Here I am creating rows and adding it into existing table.

for (var i = 0; i < data.message.length; i++) {

$("table#lst_info").find('tbody')

//Column Agency

.append($('

')

.append($('

')

.append($('')

.text(data.message[i].Agency)

)

)

//Column Actual

.append($('

')

.append($('')

.text(data.message[i].Actual)

)

)

//Column Target

.append($('

')

.append($('')

.text(data.message[i].Target)

)

)

//Column Score

.append($('

')

.append($('')

.text(data.message[i].Score)

)

)

);

}

Now, we can test the application.

To be able to load the application when we are offline we need to use a new feature available in the latest browser like IE9, the Html5:”offline application.

Add Offline.manifest file to the root of the application.

CACHE MANIFEST

/Offline.htm

/Content/Site.css

/Scripts/Offline.js

/Scripts/jquery-1.5.1.min.js

/Scripts/jquery.validate.min.js

/Content/wait.gif

Change the Doctype of the Offline.htm

////

So, now even when network is not available also, can display the page.