Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 1
Mural de Rede Social Usando ASP.NET MVC e JavaScript – Parte 2
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 }
"
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo