Artigos .NET Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 3 - Revista .NET Magazine 102
Demais posts desta série:
Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 1
Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 2

Mural de Rede Social Usando ASP.Net MVC e JavaScript – Parte 3
O artigo trata de como criar um mural de rede social utilizando técnicas de composição de HTML no browser do cliente utilizando padrão MVVM e de comunicação em tempo real multiusuário utilizando a biblioteca SignalR.Net, utilizando ASP.Net MVC, C# e JavaScript. Nesta parte final iremos incrementar um pouco nosso aplicativo de exemplo, criando um cadastro de usuários, além de explicar a opção de envio de comentários para o servidor. Além disso, concluiremos algumas implementações, como a das opções “curtir” e “desfazer curtir”, além de exibir o total de pessoas que comentário uma postagem.


Em que situação o tema é útil
É útil em aplicações web com uma ou mais características de rede social (como notificações, atualizações, bate-papo, mural e fórum), que demandam comunicação em tempo real e atualização intensiva da interface HTML de forma dinâmica, sem a necessidade de recarga de toda a página.

Nas edições anteriores, vimos como desenvolver um Mural de Rede Social fazendo uso dos recursos do ASP.NET MVC e principalmente das bibliotecas JavaScript KnockoutJs e SignalR.Net.

Durante a construção do nosso exemplo, alguns recursos ficaram implementados de forma como as fotos dos usuários e, outros ficam implementados de maneira parcial, como a opção de curtir e desfazer curtir, que ainda não está sendo persistida na base de dados.

Inicialmente iremos refatorar a parte de usuários, pois a mesma está estática onde temos dois usuários cadastrados, mas não conseguimos cadastrar novos usuários, além das fotos dos mesmos (SmallPicturePath, MediumPicturePath, LargePicturePath e BackgroundPicturePath) estarem definidas de maneira fixa no sistema.

Outro item que iremos abordar é o procedimento de envio de comentários para o servidor, onde explicaremos como foi implementado, desde a criação dos métodos do servidor até o cliente, além de implementar um contador de comentários para cada postagem do mural.

Além disso, abordaremos ainda a implementação das opções de curtir e desfazer curtir, que ficaram incompletas até então, pois até a segunda parte desta série nós ainda não estávamos persistindo as informações de quais usuários curtiram quais comentários. Neste artigo daremos sequência a esta implementação, fazendo com que seja gravado no banco de dados quais usuários curtiram cada comentário.

Implementando o cadastro de Usuários

No exemplo criado na primeira parte deste artigo, nós tínhamos dois usuários pré-definidos na base de dados, além de suas fotos estarem fixas na pasta de imagens do projeto. Para incrementar nossa aplicação e dar mais dinamismo à mesma, criaremos um cadastro de usuário para nosso mural, permitindo que o mesmo faça upload de suas fotos. Para isso, acesse o AccountController e adicione mais duas actions, como mostrado na Listagem 1.

Listagem 1. Novas actions do AccountController para criação de novos usuários


01        [HttpGet]
  02        public ActionResult Create() {
  03            return View();
  04        }
  05
  06        [HttpPost]
  07        public ActionResult Create(Usuario usuario)
  08        {
  09            UsuarioRepository repositorio = new UsuarioRepository();
  10            Boolean temErro = false;
  11
  12            if (string.IsNullOrEmpty(usuario.Nome))
  13            {
  14                ModelState.AddModelError("Nome", "É preciso informar 
                     seu nome.");
  15                temErro = true;
  16            }
  17
  18            if (string.IsNullOrEmpty(usuario.Login))
  19            {
  20                ModelState.AddModelError("Login", "É preciso informar 
                     seu login.");
  21                temErro = true;
  22            }
  23
  24            if (repositorio.VerificaLoginExistente(usuario.Login))
  25            {
  26                ModelState.AddModelError("Login", "Já existe outro 
                     usuário cadastrado com este login.");
  27                temErro = true;
  28            }
  29
  30            if (string.IsNullOrEmpty(usuario.Senha))
  31            {
  32                ModelState.AddModelError("Senha", "É preciso 
                     informar sua senha.");
  33                temErro = true;
  34            }
  35
  36            if (Request.Files["PicturePath"].ContentLength == 0)
  37            {
  38                ModelState.AddModelError("PicturePath", "É preciso 
                     informar sua PicturePath.");
  39                temErro = true;
  40            }
  41
  42            if (Request.Files["SmallPicturePath"].ContentLength == 0)
  43            {
  44                ModelState.AddModelError("SmallPicturePath", 
                     "É preciso informar sua SmallPicturePath.");
  45                temErro = true;
  46            }
  47
  48            if (Request.Files["MediumPicturePath"].ContentLength == 0)
  49            {
  50                ModelState.AddModelError("MediumPicturePath", 
                     "É preciso informar sua MediumPicturePath.");
  51                temErro = true;
  52            }
  53
  54            if (Request.Files["LargePicturePath"].ContentLength == 0)
  55            {
  56                ModelState.AddModelError("LargePicturePath", 
                     "É preciso informar sua LargePicturePath.");
  57                temErro = true;
  58            }
  59
  60            if (Request.Files["BackgroundPicturePath"]
                    .ContentLength == 0)
  61            {
  62                ModelState.AddModelError("BackgroundPicturePath", 
                     "É preciso informar sua BackgroundPicturePath.");
  63                temErro = true;
  64            }
  65
  66            if (temErro)
  67                return View(usuario);
  68
  69            Request.Files["SmallPicturePath"].SaveAs
                 ( Server.MapPath("~\\content\\images\\actor" + 
                   usuario.Login + "_small.gif"));
  70            Request.Files["MediumPicturePath"].SaveAs(
                 Server.MapPath("~\\content\\images\\actor" 
                  + usuario.Login + "_medium.gif"));
  71            Request.Files["LargePicturePath"].SaveAs( 
                 Server.MapPath("~\\content\\images\\actor" 
                  + usuario.Login + "_large.gif"));
  72            Request.Files["PicturePath"].SaveAs( Server.MapPath
                ("~\\content\\images\\actor" + usuario.Login + ".gif"));
  73            Request.Files["BackgroundPicturePath"].SaveAs( 
                  Server.MapPath("~\\content\\images\\Background" + 
                  usuario.Login + ".jpg"));
  74            
  75            repositorio.SaveOrUpdate(usuario);
  76
  77            return RedirectToAction("LogOn");
  78        }
 ...

Quer ler esse conteúdo completo? Tenha acesso completo