Creación del cliente de JavaScript

Descargar proyecto completado

En esta sección, creará el cliente para la aplicación mediante HTML, JavaScript y la biblioteca Knockout.js . Compilaremos la aplicación cliente en fases:

• Mostrar una lista de libros.
• Mostrando detalles del libro.
• Agregar un nuevo libro.

La biblioteca Knockout usa el patrón Model-View-ViewModel (MVVM):

• El modelo es la representación del lado servidor de los datos en el dominio empresarial (en nuestro caso, libros y autores).
• La vista es la capa de presentación (HTML).
• El modelo de vista es un objeto de JavaScript que contiene los modelos. El modelo de vista es una abstracción de código de la interfaz de usuario. No tiene conocimiento de la representación HTML. En su lugar, representa características abstractas de la vista, como "una lista de libros".

La vista está vinculada con datos al modelo de vista. Las actualizaciones del modelo de vista se reflejan automáticamente en la vista. El modelo de visión también recibe eventos de la interfaz, como pulsaciones de botones.

Este enfoque facilita el cambio del diseño y la interfaz de usuario de la aplicación, ya que puedes cambiar los enlaces, sin volver a escribir ningún código. Por ejemplo, puede mostrar una lista de elementos como <ul> y luego cambiarla posteriormente a una tabla.

Añadir la biblioteca Knockout

En Visual Studio, en el menú Herramientas , seleccione Administrador de paquetes NuGet. A continuación, seleccione Consola del Administrador de paquetes. En la ventana Consola del Administrador de paquetes, escriba el siguiente comando:

Install-Package knockoutjs

Este comando agrega los archivos Knockout a la carpeta Scripts.

Crear el modelo de vista

Agregue un archivo JavaScript denominado app.js a la carpeta Scripts. (En el Explorador de soluciones, haga clic con el botón derecho en la carpeta Scripts, seleccione Agregar y, a continuación, seleccione Archivo JavaScript). Pegue el código siguiente:

var ViewModel = function () {
    var self = this;
    self.books = ko.observableArray();
    self.error = ko.observable();

    var booksUri = '/api/books/';

    function ajaxHelper(uri, method, data) {
        self.error(''); // Clear error message
        return $.ajax({
            type: method,
            url: uri,
            dataType: 'json',
            contentType: 'application/json',
            data: data ? JSON.stringify(data) : null
        }).fail(function (jqXHR, textStatus, errorThrown) {
            self.error(errorThrown);
        });
    }

    function getAllBooks() {
        ajaxHelper(booksUri, 'GET').done(function (data) {
            self.books(data);
        });
    }

    // Fetch the initial data.
    getAllBooks();
};

ko.applyBindings(new ViewModel());

En Knockout, la clase observable habilita el enlace de datos. Cuando el contenido de un observable cambia, el observable notifica a todos los controles enlazados a datos para que puedan actualizarse. (La observableArray clase es la versión de matriz de observable). Para empezar, nuestro modelo de vista tiene dos observables:

• books contiene la lista de libros.
• error contiene un mensaje de error si se produce un error en una llamada AJAX.

El getAllBooks método realiza una llamada AJAX para obtener la lista de libros. A continuación, inserta el resultado en la books matriz.

El ko.applyBindings método forma parte de la biblioteca Knockout. Toma el modelo de vista como parámetro y configura el enlace de datos.

Adición de una agrupación de scripts

La agrupación es una característica de ASP.NET 4.5 que facilita la combinación o agrupación de varios archivos en un solo archivo. La agrupación reduce el número de solicitudes al servidor, lo que puede mejorar el tiempo de carga de páginas.

Abra el archivo App_Start/BundleConfig.cs. Agregue el código siguiente al método RegisterBundles.

public static void RegisterBundles(BundleCollection bundles)
{
    // ...

    // New code:
    bundles.Add(new ScriptBundle("~/bundles/app").Include(
              "~/Scripts/knockout-{version}.js",
              "~/Scripts/app.js"));
}