Neste artigo, eu vou mostrar como criar serviços backend usando ASP .NET Core MVC com suporte a aplicações móveis nativas (Android, iOS e Windows Phone).
Continuando o artigo anterior, vamos concluir o nosso projeto, completando a segunda parte do artigo e definindo o código para incluir, alterar, excluir e selecionar tarefas através do acesso ao serviço ASP .NET Core Web API, que está atendendo no endereço: http://192.168.1.18:5000/api/tarefa/.
Para tornar mais simples o projeto, não estou usando o padrão MVVM. Estou acessando diretamente a camada de serviço, à partir das Views. Em um projeto mais robusto isso não é recomendado. Também não estou implementando a interface INotifyPropertyChanged, nem usando a coleção ObservableCollection, que permitiria atualizar a view automaticamente após qualquer alteração dos dados.
Para fazer a atualização, estou chamando o método AtualizaDados(), que acessa a web api e retorna todos os dados das tarefas. Essa abordagem simplifica o projeto, mas não é aconselhável ser usada em um projeto de produção.
Recursos usados:
-
Visual Studio Community 2017 ou Xamarin Studio
Nota: Baixe e use a versão Community 2017 do VS . Ela é grátis e é equivalente a versão Professional.
Definindo o código dos métodos CRUD no arquivo code-behind MainPage.xaml.cs
Abrindo o arquivo MainPage.axml.cs, vamos começar definindo os namespaces usados:
using System; using System.Collections.Generic; using System.Linq; using Xamarin.Forms; using XF_Tarefas.Models; using XF_Tarefas.Service;
No início do arquivo vamos declarar duas variáveis:
- dataservice – que representa uma instância do nosso serviço, que iremos usar para acessar a web API;
- tarefas – que representa uma lista de tarefas.
Como iremos usá-las, elas precisam ser visíveis em todo o arquivo:
DataService dataService; List<TarefaItem> tarefas;
Código do construtor MainPage
No construtor da classe MainPage, inclua o código abaixo, onde criamos uma nova instância da classe DataService() e chamamos o método AtualizaDados();
public MainPage() { InitializeComponent(); dataService = new DataService(); AtualizaDados(); }
Método AtualizaDados()
A seguir, temos o código do método AtualizaDados():
async void AtualizaDados() { tarefas = await dataService.GetTarefasAsync(); listaTarefas.ItemsSource = tarefas.OrderBy(item => item.Nome).ToList(); }
Estamos obtendo as tarefas a partir da nossa web API, usando o método GetTarefasAsync() e exibindo o resultado no controle ListView, usando sua propriedade ItemSource.
Assim, quando a aplicação for iniciada, ela vai exibir todas as tarefas que definimos em nossa web API.
Código do evento Clicked do botão: adicionar tarefa
Para incluir uma nova tarefa, basta digitar as informações para Nome, Notas e marcar se a tarefa foi concluída ou não. Ao fim, clique no botão Adicionar Tarefa.
O evento Clicked possui o seguinte código:
private async void btnAdicionar_Clicked(object sender, EventArgs e) { if (Valida()) { TarefaItem novaTarefa = new TarefaItem { ID = "T" + DateTime.Now.Millisecond.ToString(), Nome = txtNome.Text.Trim(), Notas = txtNotas.Text.Trim(), Concluido = opConcluido.IsToggled }; try { await dataService.AddTarefaAsync(novaTarefa); LimpaTarefa(); AtualizaDados(); } catch (Exception ex) { await DisplayAlert("Erro", ex.Message, "OK"); } } else { await DisplayAlert("Erro", "Dados inválidos...", "OK"); } }
Este código chama o método Valida(), que irá verificar se as informações da tarefa foram informadas e, em caso positivo, retornar true.
A seguir, criamos uma nova tarefa e atribuímos os valores digitados. Depois, usamos o método AddTarefaAsync() da classe DataService passando a nova tarefa para ser incluída e atualizamos os dados do Listview.
Código do método Valida()
O código do método Valida() apenas retorna true se os dados foram informados e false, caso contrário:
private bool Valida() { if( string.IsNullOrEmpty(txtNome.Text) && string.IsNullOrEmpty(txtNotas.Text)) { return false; } else { return true; } }
Código da ação de contexto do Listview para atualizar uma tarefa: OnAtualizar
Se você não sabe o que uma ação de contexto do ListView, veja este artigo: Xamarin.Forms – Trabalhando com ListView.
private async void OnAtualizar(object sender, EventArgs e) { if (Valida()) { try { var mi = ((MenuItem)sender); TarefaItem tarefaAtualizar = (TarefaItem)mi.CommandParameter; tarefaAtualizar.Nome = txtNome.Text; tarefaAtualizar.Notas = txtNotas.Text; tarefaAtualizar.Concluido = opConcluido.IsToggled; await dataService.UpdateTarefaAsync(tarefaAtualizar); LimpaTarefa(); AtualizaDados(); } catch (Exception ex) { await DisplayAlert("Erro", ex.Message, "OK"); } } else { await DisplayAlert("Erro", "Dados inválidos...", "OK"); } }
Para atualizar uma tarefa, você tem que selecionar a tarefa que deseja alterar no ListView para que os dados da tarefa sejam exibidos nas views Entry/Switch acima do ListView.
Após isso, altere os dados e depois, na tarefa, selecione o ListView, mantenha o mouse pressionado por alguns segundos para que as ações de contexto sejam exibidas.
Clique, então, em Alterar para acionar o evento OnAtualizar() que vai usar o método UpdateTarefaAsync() para atualizar os dados da tarefa.
Código do evento ItemSelected do ListView
No evento ItemSelected, do ListView, temos o código que vai permitir obter os dados de um item selecionado e exibi-los nas views Entry/Switch da página:
private void listaTarefas_ItemSelected(object sender, SelectedItemChangedEventArgs e) { var tarefa = e.SelectedItem as TarefaItem; txtNome.Text = tarefa.Nome; txtNotas.Text = tarefa.Notas; opConcluido.IsToggled = tarefa.Concluido; }
Código da ação de contexto do Listview para remover uma tarefa: OnDeletar
Na ação de contexto do ListView, definida no evento OnDeletar, temos o código que irá remover a tarefa selecionada:
private async void OnDeletar(object sender, EventArgs e) { try { var mi = ((MenuItem)sender); TarefaItem tarefaDeletar = (TarefaItem)mi.CommandParameter; await dataService.DeletaTarefaAsync(tarefaDeletar); LimpaTarefa(); AtualizaDados(); } catch (Exception ex) { await DisplayAlert("Erro", ex.Message, "OK"); } }
Este código chama o método DeletaTarefaAsync(), da classe DataService, passando a tarefa selecionada para que ele seja removido via web API.
Executando o projeto, iremos obter o seguinte resultado:
Pegue o projeto aqui: XF_Tarefas.zip