# data[].attributes.headline
SINGLE PAGE APPLICATION                 EN ASP NET

# data[].attributes.subject
SINGLE PAGE APPLICATION                 EN ASP NET

# data[].attributes.attachment_link.readable_text
Introduction

ASP.NET MVC 4 Beta introduced Single Page Applications (SPA), web applications that provide rich functionality to a web page through client side scripting. As of this writing support is limited, but it does provide a basic framework for building data driven web pages using popular JavaScript libraries. This article discusses the SPA project template and parts of a typical SPA application.

What are Single Page Applications (SPA)?

Normally a web application is a collection of web pages, each doing a specific task. For example, consider a web application that does CRUD operations (Create, Read, Update and Delete) on data. A common practice is to create different web pages for operations such as showing a list of existing records, adding a new record, updating an existing record and deleting a record. A trend becoming increasingly popular is to have a single web page perform all of these operations. Such an application is called Single Page Application or SPA. So, in this example instead of developing four separate web pages you develop just one web page. At runtime, depending on the operation selected by a user, the web page renders an appropriate user interface. Such an application heavily relies on client side JavaScript libraries.
It should be noted that SPA is a general concept and ASP.NET MVC 4 has decided to offer some basic infrastructure to the developers to put this concept into practice. ASP.NET MVC 4 provides a project template that creates a basic yet functional SPA application. You can then customize the application to add more functionality. In the discussion that follows you will learn SPA with respect to ASP.NET MVC 4.
Parts of SPA

A Single Page Application consists of several pieces that fit together to provide the overall functionality of the application. A typical SPA consists of the following pieces:

Data Model : This is a server side piece that represents your data (often mapping database tables as .NET objects).

Data Service : Data service provides operations for database access (typically CRUD operations). This is also a service side piece and uses Entity Framework Code First approach.

ViewModel : View Model refers to your data and UI level operations that you wish to perform on the data. You can think of View Model as a wrapper over your model data that adds UI level operations to it. For more details of ViewModel read Implementing MVVM Pattern in Web Applications Using Knockout. A ViewModel resides as a client side piece of code.

Views : Views display your data to the user and also contain associated JavaScript. The default SPA project template uses Razor views.

Database: SPA uses Entity Framework Code First approach for database operations. The default project template creates a database in the local installation of SQL Server Express.

The following sections discuss all these parts from the default SPA project template in detail.

Creating a New Project Based on SPA Template

Installing ASP.NET MVC 4 adds a new project template in Visual Studio 2010. To create a new SPA you should create an ASP.NET MVC4 Web Application project based on this template.

The default project created using the SPA project template contains data models, views and client script files for performing CRUD operations of a sample "To Do" application. SPA extensively uses two JavaScript libraries, namely Knockout and Upshot. The following figure shows these libraries added in the Solution Explorer.

Data Model

The sample application created by the default SPA project template deals with "To Do" items, i.e. tasks. A task is represented by a data model class - TodoItem. The TodoItem class resides in the Models folder and looks like this:

public class TodoItem
{
    public int TodoItemId { get; set; }
    [Required]
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

As you can see the TodoItem is a simple class with three properties, viz. TodoItemId, Title and IsDone. The Title property is a required property as indicated by Data Annotation Attribute [Required].

To deal with the application data you need to create a DbContext and a DbDataController. This is done for you when you add a new controller to the project specifying the SPA controller template. Right click on the Controllers folder and select Add > Controller. In the Add Controller dialog specify details as shown below:

Specify the controller name as TodoController. Select scaffolding template of "Single Page Application with read/write actions and views, using Entity Framework". In the Model class drop-down select TodoItem class. In the Data context class drop-down click "New data context" and specify a name for the DbContext class. Once you click on the Add button the following files will be created for you:

TodoController.cs (Controllers folder)

SPADefaultDemoController.cs (Controllers folder)

SPADefaultDemoController.TodoItem.cs (Controllers folder)

SPADefaultDemoContext.cs (Models folder)

Index.cshtml and associated partial views (Views folder)

Out of these classes the DbContext class (SPADefaultDemoContext) looks like this:

public class SPADefaultDemoContext : DbContext
{
    public DbSet<TodoItem> TodoItems { get; set; }
}

As you can see the SPADefaultDemoContext class inherits from DbContext base class and contains a DbSet of TodoItem.

Data Service

The job of performing CRUD operations is handled by the SPADefaultDemoController (the data service) class. This class is shown below:

public partial class SPADefaultDemoController :
               DbDataController<SPADefaultDemo.Models.SPADefaultDemoContext>
{
    public IQueryable<SPADefaultDemo.Models.TodoItem> GetTodoItems() {
        return DbContext.TodoItems.OrderBy(t => t.TodoItemId);
    }

    public void InsertTodoItem(SPADefaultDemo.Models.TodoItem entity) {
        InsertEntity(entity);
    }

    public void UpdateTodoItem(SPADefaultDemo.Models.TodoItem entity) {
        UpdateEntity(entity);
    }

    public void DeleteTodoItem(SPADefaultDemo.Models.TodoItem entity) {
        DeleteEntity(entity);
    }
}

As you can see the SPADefaultDemoController class inherits from DbDataController base class and includes methods for selecting, inserting, updating and deleting TodoItem records to the database. The data service is called from the client side JavaScript code as you will see later.

ViewModel

The ViewModel class for the TodoItem data model is created automatically for you and is placed in the Scripts folder.

As you can see TodoItemsViewModel.js file is placed in the Scripts folder. This ViewModel is developed using Knockout and a part of it is shown below:

// TodoItem class
var entityType = "TodoItem:#SPADefaultDemo.Models";
MyApp.TodoItem = function (data) {
    var self = this;
    // Underlying data
    self.TodoItemId = ko.observable(data.TodoItemId);
    self.Title = ko.observable(data.Title);
    self.IsDone = ko.observable(data.IsDone);
    upshot.addEntityProperties(self, entityType);
}
...

As you can see the TodoItem ViewModel class contains the same properties as the server side data model. These properties are observable properties as indicated by ko.observable() syntax. Knockout synchronizes the data between views and ViewModel. The communication between the ViewModel and the server side data happens through Upshot.js.

View

The Index.cshtml file represents the main view of the application. Three partial views are also created viz. _Grid, _Editor and _Paging that provide the user interface for list, insert/update and paging respectively. Depending on the operation selected by the user the appropriate partial view is rendered. The following markup shows a fragment from the Index.cshtml.

@{
    ViewBag.Title = "TodoItems";
    Layout = "~/Views/Shared/_SpaLayout.cshtml";
}

<div data-bind="visible: editingTodoItem">
   @Html.Partial("_Editor") </div>   <div data-bind="visible: !editingTodoItem()">@Html.Partial("_Grid") </div>   <div class="message-info message-success" data-bind="flash: { text: successMessage, duration: 5000 }"></div> <div class="message-info message-error" data-bind="flash: { text: errorMessage, duration: 20000 }"></div>   <script type="text/javascript" src="@Url.Content("~/Scripts/TodoItemsViewModel.js")"></script> <script type="text/javascript">     $(function () {upshot.metadata(@(Html.Metadata<SPADefaultDemo.Controllers.SPADefaultDemoController>()));           var viewModel = new MyApp.TodoItemsViewModel({serviceUrl: "@Url.Content("~/api/SPADefaultDemo")"         });         ko.applyBindings(viewModel);     }); </script>

Notice that data service URL is specified as ~/api/SPADefaultDemo. The Html.Metadata() method provides the metadata of the types to the Upshot. The binding between View and ViewModel is provided by the applyBindings() method of Knockout.

If you run the application and navigate to http://localhost:1275/todo (change the port no. as per your setup) you will see something similar to the following figure.

You can click on the "Create TodoItem" button to add a few records. You can then modify or delete them. The following figure shows the view in edit mode.

Database

At this stage the sample "To do" application is able to store and retrieve the data but you might be wondering where the actual data is. Since SPA uses Code First approach to database operations, the database is automatically created for you when you run the application for the first time. The subsequent runs use the previously created database. Have a look at the following figure that shows a sample database generated under local installation of SQL Express.

As you can see, by default the database name is the same as the fully qualified name of the DbContext class. Inside there is a TodoItems table that stores the application data. To know about Entity Framework Code First read Introduction to Entity Framework Code First.

Summary

Single Page Applications heavily use client side scripting to provide rich functionality to the end user. Instead of creating multiple web pages to perform a set of operations SPA uses a single web page to perform the same tasks. ASP.NET MVC 4 provides a basic framework for building SPA applications. This article examined the project created by the default template. You can modify this code as per your requirements.
About the Author:
Bipin Joshi is a blogger and author who writes about apparently unrelated topics - Yoga & technology! A former Software Consultant and Trainer by profession, Bipin is programming since 1995 and is working with .NET framework ever since its inception. He has authored or co-authored half a dozen books and numerous articles on .NET technologies. He has also penned a few books on Yoga. Having embraced Yoga way of life he now writes about Yoga, life and technology on his website. He can also be reached there.

# data[].attributes.attachment_link.title
Introduction to Single Page Applications in ASP.NET MVC

# data[].attributes.attachment_link.description
ASP.NET MVC 4 Beta introduced Single Page Applications (SPA), web applications that provide rich functionality to a web page through a client side script. Support is limited, but a basic framework for building data driven web pages using popular JavaScript libraries is provided. This article discusses the SPA project template and parts of a typical SPA application.

# data[].attributes.body
En un SPA todos los códigos de HTML, JavaScript, y CSS se carga de una vez o los recursos necesarios se cargan dinámicamente como lo requiera la página y se van agregando, normalmente como respuesta de las acciones del usuario. La página no tiene que cargar otra vez en ningún punto del proceso tampoco se transfiere a otra página, aunque las tecnologías modernas (como elpushState() API del HTML5) pueden permitir la navegabilidad en páginas lógicas dentro de la aplicación. La interacción con las aplicaciones de página única pueden involucrar comunicaciones dinámicas con el servidor web que está detrás.

# data[].attributes.body
Una aplicación de página única es una aplicación web o es un sitio web que cabe en una sola página con el propósito de dar una experiencia más fluida a los usuarios como una aplicación de escritorio.

# data[].attributes.headline
QUE SON LAS SINGLE PAGE APPLICATIONS (SPA)

# data[].attributes.subject
QUE SON LAS SINGLE PAGE APPLICATIONS (SPA)

# data[].attributes.attachment_link.readable_text
La web está cambiando. Cada vez existe una mayor expectativa por parte de los usuarios de que las aplicaciones web se mimeticen con las aplicaciones tradicionales de escritorio, ofreciendo su inmediatez, velocidad y fluidez en el uso. Conseguir estas capacidades con una aplicación web tradicional, con gran parte del procesamiento hecho en el servidor, es muy complicado. Cada recarga de página atestigua la gran diferencia que existe entre ambas concepciones.

Para tratar de solucionarlo surgió el concepto RIA ( Rich Internet Application), basado en tecnologías como Flash, AIR o Silverlight. El hecho de necesitar plugins y no funcionar en móviles fue determinante para su fracaso.

Por todo ello, la tendencia actual es llevar cada vez más características al navegador, al lado cliente. En lugar de depender tanto del servidor o de plugins nos basamos en HTML5, CSS3 y JavaScript para crear las aplicaciones, y el servidor se limita a enviar y recibir los datos de manera rápida y eficiente. Así nacen las denominadas Single Page Applications o SPAs.

Este tipo de aplicaciones suponen un nuevo reto, con sus propias dificultades y técnicas específicas.

En el siguiente vídeo introductorio nuestro tutor Albert Margarit nos muestra las diferencias existentes entre una aplicación tradicional con renderizado en el servidor y una SPA, así como las principales características de éstas.

¡Esperamos que te interese!
Aprende a desarrollar Single Page Applications con nosotros
campusMVP es la mejor forma de aprender a programar online y en español. En nuestros cursos solamente encontrarás contenidos propios de alta calidad (teoría+vídeos+prácticas) creados y tutelados por los principales expertos del sector. Nosotros vamos mucho más allá de una simple colección de vídeos colgados en Internet porque nuestro principal objetivo es que tú aprendas. Ver todos los posts de campusMVP

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.

¿Te ha gustado este artículo? ¡Compártelo!

Archivado en: Desarrollo Web

# data[].attributes.attachment_link.title
VÍDEO: Qué son las Single Page Applications - campusMVP.es

# data[].attributes.attachment_link.description
La web está cambiando. Cada vez existe una mayor expectativa por parte de los usuarios de que las aplicaciones web se mimeticen con las aplicaciones tradicionales de escritorio, ofreciendo su inmediatez, velocidad y fluidez en el uso. Conseguir estas capacidades con una aplicación web tradicional, con gran parte del procesamiento hecho en el servidor, es muy complicado.

# data[].attributes.body
La compatibilidad con Sitios web Microsoft Azure, este servicio ayuda a proporcionar una plataforma de hosting web compartida, escalable y de alta densidad para aplicaciones web Node.js, PHP y ASP NET. Incluye una galería de aplicaciones web personalizable de las aplicaciones web de código abierto y la integración con sistemas de control de código fuente para aplicaciones y sitios web desarrollados de manera personalizada.

# data[].attributes.body
Pay per View es un modelo de negocio que nació en el sector de la televisión. Como indica su nombre, se trata de un sistema de pago en el que el usuario paga sólo por lo que ve, aunque fuera del medio audiovisual sería el “Pago por Consumo”.

# data[].attributes.body
La plataforma de Windows ofrece una
experiencia de desarrollo completa, administración automática de servicios y
planes de precios de “pago por uso”, todo respaldado por soporte y contratos de
nivel de servicio.  Esto brinda al usuario un grupo de precios por servicios.

# data[].attributes.body
Windows Azure proporciona a los desarrolladores un entorno de computación bajo demanda y almacenamiento alojado en los centros de datos de Microsoft para aplicaciones Web.

# data[].attributes.body
Windows Azure es el sistema operativo en la nube de Microsoft.
Proprciona un entorno gestionado para la ejecución y el despliegue de aplicaciones y servicios en la nube.

# data[].attributes.body
- Confidencialidad
- Autenticación
- Integridad
- No-repudiación
- Autorización
- Confianza
-Privacidad

# data[].attributes.body
Internet Information Services (IIS) puede conceder o negar el acceso en función de la dirección IP o del nombre de host del usuario.

# data[].attributes.body
AUTORIZACIÓN. Limita los derechos de acceso mediante la concesión o negación de permisos específicos a una identidad autenticada.

# data[].attributes.body
AUTENTICACION. La aplicación obtiene las credenciales (diversas formas de identificación, como nombre y contraseña) de un usuario, y las valida consultando a una autoridad determinada.

# data[].attributes.body
ASP NET funciona junto con Microsoft .NET Framework y Servicios de Microsoft Internet Information Server (IIS) para ayudar a proporcionar aplicaciones Web seguras.

# data[].attributes.body
La seguridad de los sitios Web es una cuestión de importancia fundamental, además de compleja, para los desarrolladores de sitios Web. La protección de un sitio requiere la elaboración cuidadosa de un plan; por consiguiente, los programadores y administradores de sitios Web deben comprender perfectamente las opciones para proteger los sitios.

# data[].attributes.body
ASP NET controla el acceso a la información de los sitios comparando las credenciales autenticadas, o representaciones de las mismas, con los permisos del sistema de archivos de Microsoft Windows NT o con un archivo XML que contiene la lista de usuarios autorizados, funciones autorizadas (grupos) o verbos HTTP autorizados.

# data[].attributes.body
Windows: básica, implícita, y Autenticación de Windows integrada (NTLM o Kerberos).

Autenticación mediante formularios, con la que crea una página de inicio de sesión y se administra la autenticación en la aplicación.

Autenticación mediante certificados de cliente