Mural de Rede Social Usando ASP.NET MVC e JavaScript � Parte 3

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 } "

[...] continue lendo...

Mural de Rede Social Usando ASP.NET MVC e JavaScript � Parte 3 - Revista .NET Magazine 102

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.

Artigos relacionados