ASP.NET Core 2.0 + Entity Framework Core + Sqlite

O objetivo deste artigo é demonstrar como criar uma aplicação simples e rápida utilizando o ASP.NET CORE com o Entity Framework Core em uma base de dados SQLite.

Vamos ver como gerar o projeto, como incluir as dependências necessárias e como trabalhar com o Migrations para criar e alterar o banco de dados.

A ideia do projeto é criar um CRUD básico, mostrando informações de desenhos animados. Neste exemplo usei o site da varievo como fonte de dados. Veja o projeto final na imagem abaixo:

Leia mais…

Série WebApi Parte 2 – Autenticação via token.

logo

Quando falamos de aplicações web e aplicações mobile a questão de autenticação é importante para garantir a integridade de sua implementação e segurança de seus dados, em um cenário web tradicional é amplamente utilizado o uso de cookies ou sessions para guardar  a autenticação válida durante a navegação evitando assim que seja preciso se autenticar toda a vez que tentar utilizar algum recurso protegido de um sistema.

Quando estamos falando de serviços a autenticação muda um pouco, elas não podem manter um cookie por exemplo, então recorrem a um token a cada vez que precisar acessar algum recurso protegido.

Leia mais…

Série WebAPI Parte1 – Vamos falar de OWIN e Projeto KATANA

logo_webapiOwin

Pretendo publicar uma série de artigos sobre WEBAPI, e neste vou tentar explicar para quem ainda não conhece o que é  OWIN e o Projeto KATANA.

Você já deve ter visto várias maneiras de implementar uma WEBAPI, uma forma que chamou minha atenção e uma dúvida que tinha era por que algumas implementações possuía um arquivo chamado Startup.cs e outras não.

Estudando e lendo sobre isso descobri que quando temos essa classe Startup.cs estamos falando de uma OWIN Application.

Leia mais…

No liquidificador: Knockout + Bootstrap + Toastr.js + BootBox + Asp.NET MVC + BootsWatch + WebAPI + MongoDB

Fala pessoal, neste final de semana da páscoa aproveitei o feriado e coloquei no liquidificador várias tecnologias para “misturar” e ver o que “sai” no final.

Desta vez vou criar um sistema com Knockout, Bootstrap, BootsWatch, BootToastr.js, BootBox, Asp.net MVC, Web Api, Swagger e MongoDB.

Vamos explicar um pouco de cada tecnologia principalmente para quem não conhece:

Knockout é uma biblioteca javascript (open source) que simplifica a construção de interfaces gráficas dinâmicas, usando o padrão MVVM (Model-View-View-Model), para saber mais acesse o site oficial.

Bootstrap é um framework front-end que cria sites já com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS, muito utilizado no mercado, acesse o bootstrap para conhecer melhor.

Toastr.js é um framework javascript para exibir notificações não bloqueadoras na tela, exibe aquelas “janelinhas” verdes, vermelhas, amarelas dependendo da situação ou definição de mensagem ao usuário, mais informações podem ser obtidas no github do projeto.

BootBox é um framework para exibição de caixas de diálogo usando o bootstrap modal, bem simples de usar e bonito, entre no link do projeto para conhecer melhor, possui varios exemplos de uso.

ASP.NET MVC  bom esse é o framework MVC web da Microsoft, já deve ser conhecido de quase todos os desenvolvedores web, vou deixar o link para maiores informações.

BootsWatch trata-se de um site que disponibiliza temas free para o bootstrap, muito bacana, basta acessar o site deles e escolher o tema que você achar mais bonito e subscrever o arquivo bootstrap.min.css.

WebApi segundo a própria definição da Microsoft “é uma estrutura que facilita a criação de serviços HTTP que atingem uma ampla gama de clientes, incluindo navegadores e dispositivos móveis. ASP.NET Web API é uma plataforma ideal para a construção de aplicativos RESTful no .NET Framework.” segue o link para obter mais informações.

Swagger este é um dos meus favoritos, uso o swagger para documentar minhas api´s, ele é um projeto composto por algumas ferramentas que auxiliam o desenvolvimento de APIs Rest e gera uma ótima documentação bem como ambiente completo para os testes de sua API. Veja no link oficial da ferramenta maiores detalhes.

MongoDB bom este dispensa comentários, trata-se de um banco NOSQL que já venho falando sobre aqui no meu site, você pode acompanhar sobre ele nos dois artigos que fiz (parte 1 e parte 2), é importante que o MongoDB já esteja funcionando em sua máquina para o exemplo ok?

Bom agora é colocar tudo no “liquidificador” e ver o que sae!!

Leia mais…

Listar registros com ASP.NET MVC – parte 2

Fala pessoal, continuando a série de artigos sobre listagem de dados com ASP.NET MVC, hoje vamos pegar o exemplo da parte 1 e criar outra página com grid e paginação do Jquery DataTables.

Abaixo o resultado da minha consulta utilizando o DataTables:

img2_list_parte2

O Datatables traz para você de “graça” ordenação, filtro, alteração de quantidade de resultados por página e paginação sem muito ou quase nenhum trabalho de implementação.

Lembrando que as funcionalidades são somente para os resultados que se encontram no client, ou seja quando efetuar um filtro será apenas nos itens já inseridos na grid.

Bom cenário quando você tem uma tabela com poucos registros e pode fazer um “select full” retornando todos os registros de uma vez do banco.

Vamos a implementação, o primeiro passo é entrar no site do Datatables e efetuar o download do pacote, abra o projeto do artigo anterior e faça as referências aos seguintes arquivos:

  • datatables.min.js
  • dataTables.bootstrap.min.js
  • dataTables.bootstrap.min.css

Vamos alterar o controller TodoController e inserir mais dois métodos:

public ActionResult IndexWithDataTables()
{
   return View();
}

O método acima apenas vai retornar uma View nova.
Agora vamos criar um método responsável por efetuar a busca dos dados no repositório:

public ActionResult GetData()
{
    var listVM = ConvertListModelToListViewModel(_repository.Get());
	return Json(new { data = listVM }, JsonRequestBehavior.AllowGet);
}

O método acima será acionado via ajax pelo componente do dataTables, então
assim que carregar a página este método será acionado e irá buscar todas as tarefas no banco de dados.

Na View criada vamos adicionar os seguintes comandos:

<h4 class="text-success">Listando tarefas com o Datatables</h4>
<div style="width:90%;">
<table id="Jdatatable" class="table table-responsive table-bordered">
  <thead>
    <tr>
	<th>Id</th>
	<th>Titulo</th>
	<th>Criado em:</th>
	<th>Descrição</th>
	<th>Fechado ?</th>
	<th>Realizado em:</th>
    </tr>
   </thead>
</table>
</div>

Agora vamos inserir o bloco javascript:

<script type="text/javascript">
$(document).ready(function () {
	$("#Jdatatable").DataTable({
		"ajax": {
		"url": "/Todo/GetData",
		"type": "GET",
		"datatype": "json"
		},
		"columns": [
	        { "data": "Id", "autoWidth": true },
		{ "data": "Title", "autoWidth": true },
		{
		"data": "DataOpen", "autoWidth": true, "type": "date",
		"render": function (value) {
		if (value === null) return "";
			var pattern = /Date\(([^)]+)\)/;
			var results = pattern.exec(value);
          		var dt = new Date(parseFloat(results[1]));
			return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
		}
		},
		{ "data": "Description", "autoWidth": true },
		{ "data": "Closed", "autoWidth": true },
		{
		"data": "DataClosed", "autoWidth": true, "type": "date",
		"render": function (value) {
		if (value === null) return "";
			var pattern = /Date\(([^)]+)\)/;
			var results = pattern.exec(value);
			var dt = new Date(parseFloat(results[1]));
			return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
		}
		}
          ]
	});
});
</script>

Na imagem abaixo explico alguns eventos (clique nela para aumentar):

img_list_parte2

No próximo artigo vou configurar esse mesmo exemplo para trabalhar com paginação, filtros e ordenação via “server side” , veremos como montar uma paginação no Entity Framework e como utilizar no Datatables.

Pretendo subir no meu GitHub a solução final com todos os artigos desta série, aguardem!

Espero que tenha ajudado, principalmente que está iniciando os estudos em desenvolvimento web, e se ajudou comenta para incentivar.

Um abraço.

Listar registros com ASP.NET MVC.

Fala pessoal, resolvi escrever um pouco sobre uma rotina muito comum em uma aplicação web, consultar dados no banco e mostrar em tela.

Vou fazer uma série de artigos demonstrando várias maneiras de fazer esse tipo de funcionalidade com ASP.NET MVC, para isso criei um sistema bem simples que lista tarefas cadastradas, um “TODO LIST”.

O primeiro modo de visualizar os dados é um componente do próprio .NET, o WebGrid, este componente faz parte da biblioteca System.Web.Helpers e cumpre bem o papel de visualizar os dados, possui paginação e ordenação e é bem simples de implementar.

Abaixo o resultado da minha consulta utilizando o WebGrid:
artigo_lista1

Para isso criei uma classe no meu domínio chamada de Todo com a seguinte estrutura:

namespace TutorialGrid.Domain
{
	public class Todo
	{
		public int Id { get; set; }
		public string Title { get; set; }
		public DateTime DataOpen { get; set; }
		public DateTime? DataClosed { get; set; }
		public string Description { get; set; }
		public bool Closed { get; set; }
	}
}

Na minha DLL de acesso ao banco de dados, utilizo o Entity Framework Code First, o intuito deste post é falar sobre grids portanto se houver dúvidas quanto a implementação das classes, comenta que respondo de prontidão.

Interface:

namespace TutorialGrid.Domain.Repositories
{
	public interface ITodoRepository: IDisposable
	{
		List<Todo> Get();
		List<Todo> GetPaginate(int skip = 0, int take = 25);	
		Todo Get(int id);
		void Create(Todo todo);
		void Update(Todo todo);
		void Delete(int id);
	}
}

Implementação do método GET:

namespace TutorialGrid.Data.Repositories
{
	public class TodoRepository : ITodoRepository
	{
		private AppDataContext _db;

		public TodoRepository()
		{
			_db = new AppDataContext();
		}

		public List<Todo> Get()
		{
			return _db.Todos.ToList();
		}
        }
}

Na camada web criei um view model chamado TodoViewModel com a seguinte estrutura:

namespace TutorialGrid.Web.ViewModels
{
	public class TodoViewModel
	{
		public int Id { get; set; }

		[Required(ErrorMessage = "O campo titulo é obrigatório")]
		[Display(Name = "Titulo")]
		public string Title { get; set; }
		[Display(Name = "Tarefa criado em:")]
		public DateTime DataOpen { get; set; }
		
		[Display(Name = "Tarefa realizada em:")]
		public DateTime? DataClosed { get; set; }

		[Required(ErrorMessage = "O campo descrição é obrigatório")]
		[Display(Name = "Descrição")]
		public string Description { get; set; }
		
		[Display(Name = "Tarefa Finalizada")]
		public bool Closed { get; set; }
	}
}

Código do controller:

public class TodoController : Controller
{
    private ITodoRepository _repository = new TodoRepository();
    public ActionResult IndexWithWebGrid()
    {
       var listVM = 
          ConvertListModelToListViewModel(_repository.Get());
       return View(listVM);
    }
}

O método ConvertListModelToListViewModel eu fiz simplesmente para transferir a lista de model para uma lista de view model, poderia aqui usar o Automapper de boa que iria funcionar. Depois faço um exemplo com AutoMapper para mostrar!.

Código do método ConvertListModelToListViewModel:

private List<TodoViewModel> ConvertListModelToListViewModel(List<Todo> listModel)
{
	List<TodoViewModel> listViewModel = new List<TodoViewModel>();
	foreach (Todo todo in listModel)
	{
		TodoViewModel viewModel = new TodoViewModel();
		viewModel.Id = todo.Id;
		viewModel.Title = todo.Title;
		viewModel.Description = todo.Description;
		viewModel.DataOpen = todo.DataOpen;
		viewModel.DataClosed = todo.DataClosed;
		viewModel.Closed = todo.Closed;
		listViewModel.Add(viewModel);
	}
	return listViewModel;
}

Enfim o código da View:

@model IEnumerable<TutorialGrid.Web.ViewModels.TodoViewModel>
@{
    ViewBag.Title = "IndexWithWebGrid";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10);
    grid.Pager(WebGridPagerModes.All);
}
<style type="text/css">
   .webgrid-row-style {	padding: 3px 7px 2px;}
</style>
<h2>Listando tarefas com o WebGrid</h2>
<div id="webgrid">
	@grid.GetHtml(
	  tableStyle: "table table-responsive table-striped table-bordered table-hover ",
	  headerStyle: "wedgrid-header",
	  footerStyle: "",
	  rowStyle: "webgrid-row-style",
	  columns: grid.Columns(
		grid.Column(columnName: "Id", header: "Id"),
		grid.Column(columnName: "Title", header: "Titulo"),
		grid.Column(columnName: "DataOpen", header: "Criado em:"),
		grid.Column(columnName: "Description", header: "Descrição"),
		grid.Column(header:"Fechado?", format:@<text><input type="checkbox" checked="@item.Closed" disabled="disabled" /></text>),
		grid.Column(columnName: "DataClosed", header: "Realizado em:")
	  )
	)
</div>

artigo_lista2

O caso acima não é o melhor cenário, tendo em vista que a paginação ocorre do lado client, ou seja efetuamos a busca de todos os registros no banco e deixamos a cargo do client a paginação.

Este cenário é ideal para mostrar dados de tabelas que temos a certeza que não possuem muitos dados. Para tabelas com muitos registros devemos sempre implementar a paginação do lado server, nos próximos artigos desta série vou mostrar uma forma de fazer essa funcionalidade.

É isso ae pessoal, no próximo artigo da série sobre grids vou demonstrar o uso do Datatables com a mesma estrutura de dados acima.

Valeu e se ajudou posta um comentário, os comentários ajudam a melhorar, tanto os positivos quanto os negativos, então todos são bem vindos!!

React.js : uma introdução com o famoso Hello Word com ASP.NET MVC

O ReactJS é uma biblioteca para construção de interfaces de usuários com JavaScript concorrente mais ou menos ao Angular e Knockout, digo mais ou menos porque o ReactJS está no patamar de biblioteca e os outros já estão como frameworks, ainda vou estudar mais a fundo isso.

Foi criado pelo Facebook e liberado pela primeira vez em 2013, hoje é usado também por empresas como Instagram, Yahoo, Github e até o NetFlix. Segundo o que estou lendo na internet o ReactJS é mais eficiente e tem uma biblioteca mais veloz que seus concorrentes.

Esse estudo está na página do pessoal do The Dapper Developer onde eles fazem uma comparação entre ReactJs, Angular e Knockout, bem interessante e vale a pena dar uma olhada.

É interessante dar uma olhada nesse framework, ele é utilizado pelo pessoal do Codecademy, e essas ferramentas que dão certo em cases de sucesso como o Codecademy sempre me chamam a atenção no sentido de estudar e ver como posso utilizar nos meus projetos do dia a dia.

É o mesmo caso do Dapper para acesso a dados que começei a utilizar depois de descobrir que foi criado e utilizado pelo pessoal do StackOverFlow.

A infoQ tem um livro disponivel em pdf para download que explica o cenário de uso do ReactJS no projeto da Codeacademy, muito legal é só baixar e ler o artigo.

Bom vamos ao exemplo básico:

  • Crie um novo projeto no Visual Studio do tipo WebApplication;
  • Instale o ReactJS através do comando Install-Package react.js lá no Package Manager Console;
  • Instale o ReactJS.NET através do comando Install-Package React.Web.Mvc4;
  • Adicione uma pasta nova na pasta de Scripts chamada jsx é nesta pasta que irão ficar os arquivos do reactJs, eles possuem uma extensão .jsx;
  • Crie na pasta um arquivo chamado HelloWord.jsx;
  • Dentro do arquivo escreva o seguinte código:
var HelloWorld = React.createClass({
    render: function(){
        return (
            <div>Hello {this.props.name}</div>
            );
    }
});
React.render( <HelloWorld name="World" />, 
    document.getElementById('container'));
  • Altere o arquivo index.cshtml para o código abaixo:
@{
    ViewBag.Title = "Index";
}
<h2 id="container"></h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/react/react.min.js"></script>
<script src="~/Scripts/jsx/HelloWorld.jsx"></script>

Rode a aplicação e veja o resultado, clique com o botão direito do mouse e veja o código fonte da página, se você clicar no arquivo HelloWorld.jsx deve aparecer o arquivo jsx compilado pelo ReactJS.NET:

reactjsImg4

Agora vamos buscar a uma informação do servidor usando JQuery e uma chamada Json.
Altere o código do arquivo HelloWord.jsx para:

var HelloWorld = React.createClass({
 
getInitialState: function() {
    return { name:''};
  },
componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, 
        err.toString());
      }.bind(this)
    });
  },
    render : function(){
        return (
        <div> Hello {this.state.name} </div>
        );
    }
});
 
React.render(
    <HelloWorld url="/home/getname" />,
    document.getElementById('container')
);

Ao rodar novamente o código veremos que a mensagem mudou, agora buscando a informação via Ajax em um controle
que devolve o resultado em json, esse retorno pode ser observado na janela do console, na imagem abaixo utilizo o firebug para ver o retorno.

reactjsImg3

No código foi criado um objeto com o React com o nome de HelloWorld, este objeto possui duas funções: getInitialState que é executado apenas uma vez durante o ciclo de vida do componente, e a função componentDidMount que efetivamente efetua a chamada ao método do controler e retorna a informação via json. Esta função é executada toda a vez que o componente é processado.

O comando React.render chama a função HelloWord passando a url do controller e o id do elemento html onde queremos renderizar o resultado.

Este é o primeiro post do meu estudo, vamos voltar a falar sobre o ReactJS com outros exemplos, como disse no começo do post estou começando a estudar e pretendo ir fazendo exemplos mais complexos e dividindo com todos os resultados.

O código fonte se encontra no meu GitHub.

Este artigo foi originalmente escrito em TechBrij

Agradeço a todos..e “Got some give some” quem se beneficia tem que contribuir!!!

TaskList com ASP.NET MVC e Knockoutjs

Falaaaa pessoal!!!

Hoje vou mostrar como criar um pequeno tasklist com asp.net mvc e knockoutjs. A idéia é que o usuário insira um nome para a lista de atividades e cadastre as atividades que quiser.

O intuito aqui é mostrar a integração entre o ASP.NET MVC e o Knockoutjs, não vou gravar nada em banco mas da forma que ficou fica bem tranquilo de enviar para o repositório.

Vamos lá…primeiro crie o projeto web no Visual Studio, vamos precisar colocar as referencias ao KnockoutJS
para isso acesse o Nuget e insira as seguintes referencias:

<?xml version="1.0" encoding="utf-8"?>
<packages>
  ...
  <package id="Knockout.Mapping" version="2.4.0" 
          targetFramework="net451" />
  <package id="knockoutjs" version="3.4.0" 
          targetFramework="net451" />
  ...
</packages>

Crie uma classe na pasta Models chamada TaskList e outra chamada TaskItem com a seguine estrutura:

public class TaskList
{
	public string Title { get; set; }
	public List<TaskItem> Tasks { get; set; }
}
public class TaskItem
{
	public string Title { get; set; }
}

Crie um controller chamado TaskController com o seguinte código:

public class TaskController : Controller
{
        public ActionResult Index()
        {
	   var list = new TaskList
	   {
		Title = "My Task List",
		Tasks = new List<TaskItem> {
                     new TaskItem {Title = "My First Task"},
                     new TaskItem {Title = "My Second Task"}
                }
            };
	    return View(list);
        }
	[HttpPost]
	public ActionResult Index(TaskList list)
	{
	       return View(list);
        }
}

Agora vamos criar a página chtml:

Pronto, agora coloque seu código para rodar, se tudo der certo vc deverá estar vendo uma tela parecida com essa abaixo:
tasklist

A idéia é definir um nome para sua tasklist e adicionar quantas atividades quiser, poder remover caso ache necessário e quando clicar me submit enviar a tasklist completa para o server.

E isso ae! se ajudou comenta!

Mais um exemplo de aplicação para estudo.

Mais um exemplo de aplicação utilizando o ANGULAR JS + ASP.NET MVC + ENTITY FRAMEWORK CODE FIRST

Neste exemplo estou utilizando o AngularJS, foi construido um cadastro de contatos com filtros para busca e paginação, uso de modal para excluir um contato, uso do toast/notification e ainda o uso do loading para requisições http.

Para usar o banco de dados utilizei o entity framework code-first.

É mais uma aplicação básica com conceitos interessantes para suas aplicações. Faça bom uso!!!

Algumas imagens do sistema:

appAngular1

appAngular2

appAngular3

É isso ae se ajudou compartilha e dê sua opinião.

Como utilizar o toastr notifications com ASP.NET MVC

Fala pessoal, vou explicar uma forma de implementar o toastr notifications em uma aplicação asp.net mvc, é bem legal essa forma de notificar os usuários e é bem usado hoje em dia.

Primeiro em seu projeto mvc faça a inclusão das bibliotecas do Tostr pelo NuGet, pode ser pela ferramenta visual ou pelo Package Manager Console com o comando:

install-package toastr

Altere o arquivo BundleConfig para incluir os arquivos toastr.css e toastr.js.

Na sua master page _Layout.chtml crie 4 campos do tipo “hidden”

<input type="hidden" id="success" 
           value="@TempData["success"]" />
<input type="hidden" id="info"    
           value="@TempData["info"]" />
<input type="hidden" id="warning" 
           value="@TempData["warning"]" />
<input type="hidden" id="error" 
           value="@TempData["error"]" />

Na sua sessão de scripts inclua os seguintes comandos:

$(function () {
     var displayMessage = function (message, msgType) {
	toastr.options = {
		"closeButton": true,
		"debug": false,
		"newestOnTop": false,
		"progressBar": true,
		"positionClass": "toast-top-right",
		"preventDuplicates": false,
		"onclick": null,
		"showDuration": "300",
		"hideDuration": "1000",
		"timeOut": "5000",
		"extendedTimeOut": "1000",
		"showEasing": "swing",
		"hideEasing": "linear",
		"showMethod": "fadeIn",
		"hideMethod": "fadeOut"
	};
	toastr[msgType](message);
     };

     if ($('#success').val()) {
	displayMessage($('#success').val(), 'success');
     }
     if ($('#info').val()) {
	displayMessage($('#info').val(), 'info');
     }
    if ($('#warning').val()) {
	displayMessage($('#warning').val(), 'warning');
    }
    if ($('#error').val()) {
	displayMessage($('#error').val(), 'error');
    }
});

Para utilizar nos seus controller basta acionar desta maneira:

public ActionResult Create(ParameterVM model)
{
	if (ModelState.IsValid)
	{
		return RedirectToAction("Index");
	}
	TempData["warning"] = "Mensagem de warning!!";
	TempData["success"] = "Mensagem de sucesso!!";
	TempData["info"] = "Mensagem de informação!!";
	TempData["error"] = "Mensagem de erro!!";
	return View(model);
} 

Abaixo imagem de como deve ficar suas notificações:

Notifications

No meu caso fiz uma pequena alteração no css para as notificações não ficarem “coladas no topo”, para isso eu subsescrevi uma parte do css do toast.

.toast-top-right {
  top: 60px;
  right: 12px;
}

Para configurar o toastr acesse o Demo examples

Crédito aos criadores do Toastr John Papa e Hans Fjällemark