Single-page Applications: Building Modern, responsive Web applications with asp.net

Source: Internet
Author: User
Tags html page json versions visual studio

A single-page application (SPA) is a WEB application that loads a single HTML page and dynamically updates the page when the user interacts with the application.

SPA uses AJAX and HTML5 to create fluent and responsive Web applications that do not frequently page overload. However, this means that a lot of work is done in the client's JavaScript. Traditional asp.net developers may struggle to adapt to this upheaval. Fortunately, many open source JavaScript frameworks can be used to simplify the task of creating a SPA.

In this article, I'll show you how to create a simple SPA application. In this process, I'll cover some of the basic concepts of building SPA, including model-view-controller (MVC) and model-view-view model (MVVM) mode, data binding, and routing.

About the sample application

The sample application I created is a simple movie database, as shown in Figure 1 . The leftmost column of the page displays a list of movie types. Click a type to display a list of movies of that type. Click the Edit button next to an entry to change the entry. After editing, you can click Save to submit the update to the server, or click Cancel to undo the change.

Figure 1. Single-page application Movie Database application

I created two different versions of the application, one version uses the Knockout.js library, and the other uses the Ember.js library. The two libraries have different methods, so it is instructive to compare them. In both cases, the client application has fewer than 150 JavaScript rows. On the server side, I use the asp.net Web API to provide JSON to the client. You can find the source code for both versions of the application on Github.com/mikewasson/moviesspa.

(Note: I use the candidate release [RC] version of Visual Studio 2013 to create an application.) Some content may differ from the delivery vendor [RTM] version, but it should not affect the code. )

Background

In a traditional WEB application, the server renders a new HTML page each time the application calls the server. This will trigger the page refresh in the browser. If you've ever written a Web forms application or a PHP application, the page lifecycle should seem familiar to you.

At SPA, after the first page is loaded, all interactions with the server are made through AJAX calls. These AJAX calls typically return data in JSON format (rather than markup). The application uses JSON data to dynamically update the page without overloading the page. Figure 2 illustrates the difference between the two methods.

Figure 2 Traditional page life cycle and SPA lifecycle

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.