New HTML Web Editor Features in Visual Studio 2013


In this article, we will take a closer look at the new web editor features for HTML. You can download Visual Studio 2013 trial edition using this link –

Let’s first start with Visual Studio 2013 and create a new ASP.NET Web Application by choosing .NET Framework 4.5.1 as shown below –


Reading a Local File using HTML5 and JavaScript


One area where the web has lacked for some time is the lack of a true file system.  HTML5 fills this void by providing a standard way of interacting with local files using the FIle API specification.

These APIs are used to read file locally, handling images etc. Some of the specifications are as listed below:

1. File: Provides read-only information about the file like name, filesize, mimetype etc.

2. FileList: Represents an array of individually selected files from the local system

3. Blob: Represents the raw binary data and allows access to range of bytes within the data which can be used for slicing file

4. FileReader: Provides methods to read data from file or Blob

Some Visual Studio 2013 IDE Enhancements


Visual Studio 2013 builds on the powerful tools and services delivered in Visual Studio 2012 and helps you create a new modern applications. As of this writing Visual Studio 2013 is in RC although this article is based on the Preview Release. You can download Visual Studio 2013 Preview to test the IDE enhancements and new features.

1. Assuming you have downloaded and installed Visual Studio 2013, launch Visual Studio and you will see the first screen which is a Sign in screen as shown below

HTML 5 Offline Applications


This article discusses when should one think about an Offline Web Application. What is an HTML5 offline application and to create one.

When should think about creating an Offline web application?

There are many situations where creating an Offline Web Applications makes sense. Some of them are: 
  • You may want to work with your application even when you are outside your company/organization’s network.
  • You may want to view documents/web pages when you are offline with no network connectivity.
  • You may have data entry application where you are storing data offline and once the network is available, you want to synchronize the data back to your main application.
  • In case if you are working with media applications, you may want some offline media pages which allows you to see videos offline etc.
Likewise there are many situations you can think of w.r.t. Offline applications.

Using OutputCache Action Filter in ASP.NET MVC 4.0


If you have used the output caching facility from the core ASP.NET platform, you are in familiar grounds. The OutputCache filter in ASP.NET MVC uses the same output caching facility and cache’s the output from an action method. Since the output is cached, subsequent request to the same URL are served using the same cache. Needless to say, this offers performance benefits especially for requests where database queries are involved.

In order to make output caching as easy as possible, the ASP.NET MVC Framework
provides OutputCacheAttribute which can simply be applied to any Controller action or even to the entire Controller class. By default, the content is cached with an absolute expiration time of 60 seconds. You can change this duration by modifying properties of the [OutputCache] attribute such as the Duration. However when memory resource become low, there is no guarantee that content will be cached for the amount of time that you specify.

Enough theory, let’s explore this filter with a working example

Building a Knockout.js based client for Web API services in an ASP.NET MVC app


ASP.NET MVC is now a popular web development platform and often first time users have questions regards to implementation of Data Bound behavior in MVC. This is understandably because most Customers at some point have used ASP.NET Web Forms earlier and are comfortable with the event driven model that it provides.

A common question is how to create an editable list of data allowing users to Edit and Save existing data. The default MVC scaffolding in Visual Studio provides us with a way to implement this where Create/Edit/Delete are implemented on the server side and each action has a separate UI. Today we will see how we can implement it using jQuery and a lightweight client side library knockout.js (also referred to as KO).

On the server, we will use ASP.NET Web API to expose the database services that will be accessed by JavaScript. Needless to say we will use AJAX to communicate with the backend Services.

For any ‘List’ of data there is a need for implementing some kind of template or repeater behavior so that we can define the UI for one row of data and the library/framework takes that template and repeats it for the entire list. We know how to do this in ASP.NET MVC using Razor syntax. Today we’ll see how implement the repeater UI using KO’s templating engine. We will also see how we can define separate templates for Display and Edit modes.

Load Dynamic Content in jQuery UI Tabs in an ASP.NET MVC 4 application


In this article we will see how to load the contents into Tabs dynamically using ASP.NET MVC 4.0.
Create a new ASP.NET MVC 4.0 application with the name “DynamicContentsTabs”. Choose Internet Application template as shown below –


Once the project is created, let’s add the latest version of jQuery script and jQuery UI using NuGet packages. Install the required jQuery Scripts.

Backbone.js Handling DOM events and working with Collections


Backbone.js is a lightweight JavaScript library loosely based on the Model-View-Controller (MVC) pattern (it’s not an MVC framework) and it allows developers to create single-page web applications. We covered some basics of Backbone in a previous article

To manage data of web applications, Backbone provides a Model creation strategy. The model allows us to define properties to contain data and business logic. The Collection declaration allows to store collection of the data, which is later used by the view.

In Backbone, the View (UI) is generally rendered using HTML Templates, and elements declared in this Template are accessible to View, but it might be possible that the HTML page (or MVC view or .aspx) already contains HTML elements and you need to handle the DOM events for these elements. The question then is how to handle them?

In the following implementation we will see that the ‘click’ event for the html button element is handled inside the View object. The method which gets executed for the click event is used to add the model object into the collection and then the collection is rendered using HTML Table.

Copyright © 2009-2014 All Rights Reserved for by Suprotim Agarwal | Terms and Conditions