Cómo usar AngularJS en ASP.NET MVC y Entity Framework

Cómo usar AngularJS en ASP.NET MVC y Entity Framework

En estos días, parece que todo el mundo está hablando de AngularJS y ASP.NET MVC. Entonces, en esta publicación, aprenderemos cómo combinar lo mejor de ambos mundos y usar las bondades de AngularJS en ASP.NET MVC demostrando cómo usar AngularJS en una aplicación ASP.NET MVC.

9min read

En estos días, parece que todo el mundo está hablando de AngularJS y ASP.NET MVC. Entonces, en esta publicación, aprenderemos cómo combinar lo mejor de ambos mundos y usar las bondades de AngularJS en ASP.NET MVC demostrando cómo usar AngularJS en una aplicación ASP.NET MVC.

Antes de aprender a usar AngularJS en ASP.NET MVC, consulte Infragistics biblioteca jQuery, Ignite UI para JavaScript, que lo ayuda a escribir y ejecutar aplicaciones web más rápido. Puede utilizar la biblioteca Ignite UI para JavaScript para ayudar a resolver rápidamente requisitos complejos de LOB en HTML5, jQuery, Angular, React o ASP.NET MVC. Descargue una versión de prueba gratuita de Ignite UI hoy mismo.

Para comenzar, creemos ASP.NET MVC aplicación y hagamos clic con el botón derecho en el proyecto MVC. En el menú contextual, haga clic en Administrar paquete Nuget. Busque el paquete AngularJS e instálelo en el proyecto.

let’s create ASP.NET MVC application

Después de agregar con éxito la biblioteca AnngularJS, puede encontrar esos archivos dentro de las carpetas Scripts.

Referencia: Biblioteca AngularJS

Tiene dos opciones para agregar una referencia de biblioteca de AngularJS en el proyecto: minificación y agrupación de MVC o agregando AngularJS en la sección Script de una vista individual. Si utilizas la agrupación, AngularJS estará disponible para todo el proyecto. Sin embargo, también tiene la opción de usar AngularJS en una vista en particular.

Supongamos que desea usar AngularJS en una vista determinada (Index.cshtml) del controlador Home. Primero, debe consultar la biblioteca AngularJS dentro de la sección de scripts como se muestra a continuación:

@section scripts{
    <script src="~/Scripts/angular.js"></script>
}

A continuación, aplique la directiva ng-app y cualquier otra directiva necesaria en el elemento HTML como se muestra a continuación:

<div ng-app="" class="row">
     <input type="text" ng-model="name" />
     {{name}}
</div>

Cuando ejecute la aplicación, encontrará que AngularJS está en funcionamiento en la vista de índice. En este enfoque, no podrá usar AngularJS en las otras vistas porque solo se hace referencia a la biblioteca AngularJS en la vista de índice.

Es posible que tenga un requisito para usar AngularJS en toda la aplicación MVC. En este caso, es mejor usar la agrupación y la minificación de MVC y todas las bibliotecas de AngularJS en el nivel de diseño. Para hacer esto, abra BundleConfig.cs desde la carpeta App_Start y agregue un paquete para la biblioteca AngularJS como se muestra a continuación:

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js"));

Después de agregar el paquete en el archivo BundleConfig, a continuación, debe agregar el paquete AngularJS en el archivo _Layout.cshtml como se indica a continuación:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</head>

Después de crear un paquete de AngularJS y hacer referencia a él en _Layout.cshtml, debería poder usar AngularJS en toda la aplicación.

Datos de la base de datos y en el AngularJS

Hasta ahora hemos visto cómo configurar AngularJS en un nivel de vista particular y en todo el nivel de la aplicación. Ahora sigamos adelante y creemos una aplicación MVC de extremo a extremo en la que realizaremos las siguientes tareas:

  1. Captura de datos de la base de datos mediante el primer enfoque de base de datos de EF
  2. Devolver JSON desde el controlador MVC
  3. Cree un servicio AngularJS para obtener datos mediante el $http
  4. Create an AngularJS controller
  5. Cree una vista AngularJS en la vista MVC para mostrar datos en la tabla

Conectarse a una base de datos mediante el primer enfoque de EF Database

Para conectarse a una base de datos con el enfoque de base de datos de EF, haga clic con el botón secundario en la aplicación MVC y seleccione un nuevo elemento. En la pestaña de datos, debe seleccionar la opción ADO.NET Modelo de entidad como se muestra en la imagen a continuación:

debe seleccionar la opción ADO.NET Modelo de entidad

En la siguiente pantalla, seleccione la opción "EF Designer desde la base de datos".

seleccione el "EF Designer de la base de datos"

En la siguiente pantalla, haga clic en la opción Nueva conexión. Para crear una nueva conexión a la base de datos:

  1. Provide the database server name
  2. Elija la base de datos en el menú desplegable. Aquí estamos trabajando con la base de datos "Escuela", por lo que la hemos seleccionado en el menú desplegable.
Elija la base de datos en el menú desplegable.

En la siguiente pantalla, deje el nombre predeterminado de la cadena de conexión y haga clic en siguiente.

En la siguiente pantalla, deje el nombre predeterminado de la cadena de conexión

En la siguiente pantalla, seleccione las tablas y otras entidades que desea conservar como parte del modelo. Para mantenerlo simple, estoy usando solo la tabla "Persona" en el modelo.

Seleccione las tablas y otras entidades que desea conservar como parte del modelo

A partir de ahora, hemos creado la conexión con la base de datos y se ha agregado un modelo al proyecto. Debería ver que se ha agregado un archivo edmx como parte del proyecto.

Devolver json desde el controlador mvc

Para devolver los datos de Person como JSON, sigamos adelante y agreguemos una acción en el controlador con el tipo de valor devuelto JsonResult. Tenga en cuenta que puede escribir fácilmente una API web para devolver datos JSON; sin embargo, el propósito de esta publicación es mostrarle cómo trabajar con AngularJS, por lo que me quedaré con la opción más simple, que es crear una acción que devuelva datos JSON:

public JsonResult GetPesrons() {
    SchoolEntities e = new SchoolEntities();
    var result = e.People.ToList();
    return Json(result, JsonRequestBehavior.AllowGet);
}

Cree un servicio AngularJS para obtener datos mediante el $HTTP

Aquí asumo que ya tienes algún conocimiento sobre estos términos de AngularJS, pero aquí hay una revisión rápida / introducción de los conceptos clave:

Controller

Un controlador es la función constructora de JavaScript que contiene datos y lógica empresarial. El controlador y la vista se comunican entre sí mediante el objeto $scope. Cada vez que se utiliza un controlador en la vista, se crea una instancia. Entonces, si lo usamos 10 veces, se crearán 10 instancias del constructor.

Servicio

Un servicio es la función de JavaScript mediante la cual se crea una instancia una vez por ciclo de vida de la aplicación. Todo lo que se comparta entre el controlador debe formar parte del servicio. Un servicio se puede crear de cinco maneras diferentes. La forma más popular es mediante el método de servicio o el método de fábrica. AngularJS también proporciona muchos servicios integrados: por ejemplo, el servicio $http se puede usar para llamar a un servicio basado en HTTP desde una aplicación Angular, pero se debe inyectar un servicio antes de usarlo.

Modules

Los módulos son las funciones de JavaScript que contienen otras funciones como un servicio o un controlador. Debe haber al menos un módulo por Angular aplicación.

Nota: Estas son las definiciones más simples de estos conceptos de AngularJS. Puede encontrar información más detallada en la web.

¡Ahora comencemos a crear el módulo! Primero, haga clic con el botón derecho en el proyecto y agregue un archivo JavaScript. Puedes llamarlo como quieras, pero en este ejemplo, llamémoslo StudentClient.js.

En el StudentClient.js hemos creado un módulo y un controlador simple. Más adelante modificaremos el controlador para obtener los datos de la acción MVC.

var StudentApp = angular.module("StudentApp", []);

StudentApp.controller("StudentController", function ($scope) {
    $scope.message = "Infrgistics";
});

Para usar primero el módulo y el controlador en la vista, debe agregar la referencia al StudentClient.js y luego establecer el valor de la directiva ng-app en el nombre del módulo StudentApp. A continuación, te explicamos cómo hacerlo:

@section scripts{
     <script src="~/StudentClient.js"></script>
}
<div ng-app="StudentApp" class="row">
    <div ng-controller="StudentController">
        {{message}}
    </div>
</div>

En este punto, si ejecuta la aplicación, encontrará Infragistics se representan en la vista. Empecemos por crear el servicio. Crearemos el servicio personalizado utilizando el método de fábrica. En el servicio, el uso del $http servicio incorporado llamará al método de acción del controlador.  Aquí vamos a poner el servicio en el mismo archivo StudentService.js.

StudentApp.factory("StudentService", [
    "$http",
    function ($http) {
        var StudentService = {};

        StudentService.getStudents = function () {
            return $http.get("/Home/GetPersons");
        };

        return StudentService;
    },
]);

Una vez creado el servicio, lo siguiente que hay que hacer es crear el controlador. En el controlador, utilizaremos el servicio personalizado y asignaremos los datos devueltos al objeto $scope. Veamos cómo crear el controlador en el siguiente código:

StudentApp.controller("StudentController", function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
            .success(function (studs) {
                $scope.students = studs;
                console.log($scope.students);
            })
            .error(function (error) {
                $scope.status =
                    "Unable to load customer data: " + error.message;
                console.log($scope.status);
            });
    }
});

Aquí hemos creado el controlador, el servicio y el módulo. Juntando todo, el archivo StudentClient.js debería verse así:

var StudentApp = angular.module("StudentApp", []);
StudentApp.controller("StudentController", function ($scope, StudentService) {
    getStudents();
    function getStudents() {
        StudentService.getStudents()
            .success(function (studs) {
                $scope.students = studs;
                console.log($scope.students);
            })
            .error(function (error) {
                $scope.status =
                    "Unable to load customer data: " + error.message;
                console.log($scope.status);
            });
    }
});

StudentApp.factory("StudentService", [
    "$http",
    function ($http) {
        var StudentService = {};

        StudentService.getStudents = function () {
            return $http.get("/Home/GetPersons");
        };

        return StudentService;
    },
]);

En la vista, podemos usar el controlador como se muestra a continuación, pero tenga en cuenta que estamos creando una vista AngularJS en Index.cshtml. La vista se puede crear como se muestra a continuación:

@section scripts{
    <script src="~/StudentClient.js"></script>
}

<div ng-app="StudentApp" class="container">
    <br/>
    <br/>
    <input type="text" placeholder="Search Student" ng-model="searchStudent" />
    <br />
    <div ng-controller="StudentController">
        <table class="table">
            <tr ng-repeat="r in students | filter : searchStudent">
                <td>{{r.PersonID}}</td>
                <td>{{r.FirstName}}</td>
                <td>{{r.LastName}}</td>
            </tr>
        </table>
    </div>
</div>

En la vista, estamos usando las directivas ng-app, ng-controller, ng-repeat y ng-model, junto con "filter" para filtrar la tabla en la entrada ingresada en el cuadro de texto. Esencialmente, estos son los pasos necesarios para trabajar con AngularJS en ASP.NET MVC aplicación.

Conclusión

En esta publicación, nos enfocamos en algunos pasos simples pero importantes para trabajar con AngularJS y ASP.NET MVC juntos. También abordamos las definiciones básicas de algunos componentes clave de AngularJS, el enfoque de base de datos de EF primero y MVC. En publicaciones posteriores, profundizaremos en estos temas, pero espero que esta publicación lo ayude a comenzar con AngularJS en ASP.NET MVC.

Además, no olvide consultar Ignite UI para JavaScript, que puede usar con HTML5, Angular, React y ASP.NET MVC para crear aplicaciones de Internet enriquecidas. Puede descargar una versión de prueba de todos nuestros controles JavaScript de forma gratuita.

Cómo
Solicitar una demostración