ASP .NET - Single Page Application(SPA) usando AngularJS com Web API - 6


 Neste artigo eu vou mostrar como criar uma aplicação ASP .NET Single Page Application usando os recursos do AngularJS com Web API: Criando um serviço.

Na quinta parte do artigo criamos o serviço definido em filmeService de forma a encapsular as funcionalidades da nossa Web API representada pelo controller FilmeController.

Neste artigo vamos implementar as funcionalidades para deletar, editar e criar filmes em nossa aplicação SPA.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Deletando filmes

Vamos agora permitir que o usuário possa deletar um filme em nossa aplicação.

Abra a solução Filmoteca criada no artigo anterior no VS Community 2015 (Open Project).

Abra o arquivo lista.html e inclua a linha de código para incluir um botão de comando conforme o código a seguir:

<div ng-controller="listaController">
    <table class="table">
        <tr>
            <th>Título</th>
        </tr>
        <tr ng-repeat="filme in filmes">
            <td>{{filme.Titulo}}</td>
            <td>
                <a class="btn btn-primary" href="#/detalhes/{{filme.Id}}">Detalhes</a>
                <button class="btn btn-danger" ng-click="deleta(filme)">Deletar</button>
            </td>
        </tr>
    </table>
</div>

Nossa view lista.html esta usando alguns recursos do bootstrap para definir estilos para o button Deletar e para o link Detalhes.

Nesta view incluímos um button HTML onde temos uma diretiva ng-click que aciona a function deleta(filme) passando o filme associado.

Precisamos então alterar o código do controller listaController incluindo a function deleta(filme) conforme mostra o código a seguir:

(function (app) {
    var listaController = function ($scope, filmeService)
    {
        filmeService
            .getFilmes()
            .success(function (data) {
            $scope.filmes = data;
            });
        $scope.deleta = function (filme) {
            filmeService.deletar(filme)
            .success(function () {
                removerFilmePorId(filme.Id);
            });
        };
        var removerFilmePorId = function (id) {
            for (var i = 0; i < $scope.filmes.length; i++) {
                if ($scope.filmes[i].Id == id) {
                    $scope.filmes.splice(i, 1);
                    break;
                }
            }
        };
    };
    app.controller("listaController", listaController)
}(angular.module("filmoteca")));

Temos agora duas novas functions no controller listaController. A primeira é a function deleta anexado ao objeto $scope, e por isso mesmo, este método é chamado pela diretiva ng-click que usa o serviço filmeService para deletar o filme.

Quando a chamada é feita com sucesso, é feito uma chamada à function removerFilmePorId(), que não esta associada ao objeto $scope, e, por isso, é uma implementação privada dentro do controlador. Esta function localiza e deleta o filme pelo seu id no modelo e o remove do array dos filmes.

Abaixo vemos a aparência da view lista.html :

Editando e Criando filmes

Vamos agora implementar a edição e a criação de um novo filme. Podemos fazer isso de diversas formas e neste exemplo vamos adotar a seguinte abordagem:

Dessa forma a view edita.html vai compartilhar a funcionalidade de incluir um filme e editar um filme.

Clique com o botão direito do mouse na pasta Html e a seguir em Add -> New Item e selecione o template HTML page e informe o nome edita.html. A seguir inclua o código abaixo nesta view:

<div ng-controller="editaController">
    <form ng-show="isEditavel()">
        <fieldset>
            <div class="form-group">
                <label for="titulo">
                    Titulo
                </label>
                <input id="titulo" type="text" ng-model="editar.filme.Titulo" required class="form-control" />
            </div>
            <div class="form-group">
                <label for="anoLancamento">
                    Ano de Lançamento
                </label>
                <input id="anoLancamento" type="number" ng-model="editar.filme.AnoLancamento" required min="1900" max="2050" class="form-control" />
            </div>
            <div class="form-group">
                <label for="duracao">
                    Duração
                </label>
                <input id="duracao" type="number" ng-model="editar.filme.Duracao" required min="10" max="500" class="form-control" />
            </div>
            <button class="btn btn-primary" ng-click="salvar()">Salvar</button>
            <button class="btn btn-danger" ng-click="cancelar()">Cancelar</button>
        </fieldset>
    </form>
</div>

É muito importante entender esta view :

- Nesta view usamos a diretiva ng-controller="editaController" que indica que o controlador editaController é responsável pelas functions usadas nesta view. Como este controlador ainda não existe vamos ter que criá-lo posteriormente;

- A diretiva ng-show é usada para ocultar ou mostrar uma seção do DOM baseado na expressão usada : ng-show="isEditavel()"  que deve retornar true ou false; Neste caso o elemento form somente será exibido quando a function isEditavel() retornar true a partir do model;  Estamos usando esta diretiva para ocultar o formulário, exibindo-o somente para criar ou editar um novo filme;

- A diretiva ng-model define o two-way-binding entre o model e os elementos do formulário (textarea, select, input, etc); No formulário definimos as seguintes diretivas ng-model:

Fazendo assim criamos essas propriedades no objeto $scope e permitimos que elas sejam acessadas pelo controlador editaController que iremos criar.

Perceba que o objetivo das diretivas é fazer a vinculação entre o model e a view. O model (ou controller) nunca manipula diretamente os elementos DOM; quem faz isso são as diretivas. Fazendo uma alteração no model ela se reflete na view.

Vamos então alterar a view lista.html incluindo o botão para criar um novo filme e usar a diretiva ng-include para incluir a view edita.html:

<div ng-controller="listaController">
    <table class="table">
        <tr>
            <th>Título</th>
        </tr>
        <tr ng-repeat="filme in filmes">
            <td>{{filme.Titulo}}</td>
            <td>
                <a class="btn btn-primary" href="#/detalhes/{{filme.Id}}">Detalhes</a>
                <button class="btn btn-danger" ng-click="deleta(filme)">Deletar</button>
            </td>
        </tr>
    </table>
   <button class="btn btn-success" ng-click="criar()">Novo Filme</button>
   <div ng-include="'/Cliente/Html/edita.html'"></div>
</div>

Agora a view lista.html pode invocar o método criar() que será definido no model.

A diretiva ng-include faz a inclusão da view edita.html nesta view exibindo o formulário para o usuário digitar as informações do novo livro.

Observe que usamos aspas simples('') no interior da diretiva para chamar a página edita.html, assim asseguramos que o caminho informado será reconhecido como um literal string.

A function criar() definida deverá ser criada no controlador listaController que é responsável por esta view. Altere o arquivo listaController.js incluindo a function criar():

(function (app) {
    var listaController = function ($scope, filmeService)
    {
        filmeService
            .getFilmes()
            .success(function (data) {
            $scope.filmes = data;
            });
        $scope.criar = function () {
            $scope.editar = {
                filme: {
                    Titulo: "",
                    Duracao: 0,
                    AnoLancamento: new Date().getFullYear()
                }
            };
        };
        $scope.deleta = function (filme) {
            filmeService.deletar(filme)
            .success(function () {
                removerFilmePorId(filme.Id);
            });
        };
        var removerFilmePorId = function (id) {
            for (var i = 0; i < $scope.filmes.length; i++) {
                if ($scope.filmes[i].Id == id) {
                    $scope.filmes.splice(i, 1);
                    break;
                }
            }
        };
    };
    app.controller("listaController", listaController)
}(angular.module("filmoteca")));

Da mesma forma, vamos alterar a view detalhes.html para incluir um botão de comando vinculado a diretiva ng-click para editar os dados e outro para retornar para a lista. Vamos usar também a diretiva ng-include para incluir a view edita.html na view detalhes para exibir o formulário para editar os dados. Abaixo temos o código da view detalhes.html alterado:

<div ng-controller="detalhesController">
    <h2>
       Filme :  {{filme.Titulo}}
    </h2>
    <div>
       <h3> Lançamento em : {{filme.AnoLancamento}} </h3>
    </div>
    <div>
       <h3>{{filme.Duracao}} minutos de duração.</h3>
    </div>
    <a class="btn btn-primary" ng-click="editar()">Editar</>
    <a class="btn btn-success" href="#/">Retorna</a>
    <div ng-include="'/Cliente/Html/edita.html'"></div>
</div>

Para concluir esta parte do artigo vamos definir a function editar() no controlador detalhesController conforme mostra o código a seguir:

(function (app) {
    var detalhesController = function ($scope, $routeParams, filmeService) {
        var id = $routeParams.id;
        filmeService
            .getFilmePorId(id)
            .success(function (data) {
                $scope.filme = data;
            });
        $scope.editar = function () {
            $scope.editar.filme = angular.copy($scope.filme);
        };
    };
        app.controller("detalhesController", detalhesController);
}(angular.module("filmoteca")));

 

A função editar() apenas faz uma cópia do filme selecionado no escopo para a propriedade filme atualizando a view e exibindo os dados do filme selecionado para edição.

Executando o projeto agora, teremos o seguinte resultado:

1- A página inicial exibindo a view lista.html

2- A exibição da view detalhes.html quando o usuário clica no botão Detalhes

3- A exibição do formulário representado pela view edita.html, exibindo os dados do filme selecionado, quando o usuário clica no botão Editar

4- A exibição do formulário representado pela view edita.html quando o usuário clica no botão Novo Filme:

Na próxima parte do artigo vamos implementar as funcionalidades do controlador editaController e definir as functions para criar um novo filme e alterar dados do filme selecionado.

Porque não vos fizemos saber a virtude e a vinda de nosso Senhor Jesus Cristo, seguindo fábulas artificialmente compostas; mas nós mesmos vimos a sua majestade.
2 Pedro 1:16

The Series is the title of data that we are displaying. In this tutorial we will display sales and expenses data from a database. Therefore our series collection will be Sales, Expenses.

We will delete Series1 becuase we will replace it with Expenses and Sales.

Right click the chart and click on properties. In the properties window, scroll down to Series and click on the small button next to Collection:

- See more at: http://www.visual-basic-tutorials.com/display-data-as-charts-and-graph-in-visual-basic.html#sthash.lBTOTLaR.dpuf
The Series is the title of data that we are displaying. In this tutorial we will display sales and expenses data from a database. Therefore our series collection will be Sales, Expenses.

We will delete Series1 becuase we will replace it with Expenses and Sales.

Right click the chart and click on properties. In the properties window, scroll down to Series and click on the small button next to Collection:

- See more at: http://www.visual-basic-tutorials.com/display-data-as-charts-and-graph-in-visual-basic.html#sthash.lBTOTLaR.dpuf
Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?


  Gostou
?   Compartilhe no Facebook   Compartilhe no Twitter

 

Referências:


José Carlos Macoratti