Eu confesso que nunca me interessei em desenvolver sites e muito menos aplicações web utilizando ASP.net, sempre achei que a metodologia “drag and drop” que o Web Forms nos proporciona não funciona legal na web, pois ela gera muito “lixo” para o navegador, e isso é crucial em uma WebAPP.
Portanto, desde que migrei de desktop (Delphi 7) para web, tenho trabalhado com o nosso querido Flex no Front End e o C#.net no Back End. Mas desde que o ASP.net MVC foi lançado, tenho acompanhado de perto a sua evolução, e confesso que ele tem me agradado bastante.
Para não perder o costume, venho hoje compartilhar com vocês um pouco do que tenho estudado, este post faz uma comparação de um projeto idêntico criado usando as duas metodologias.
Então chega de conversa e vamos ao que interessa:
As ferramentas que utilizei para criar os projetos foram:
• SQL Server 2008 Express
• Visual Web Developer Express 2010
• Framework ASP.net MVC 2.0
O projeto acessa uma base de dados com apenas uma tabela, com a seguinte estrutura:
Não utilizei nenhum framework ORM, fiz o mapeamento das entidades manualmente, usando as classes nativas do Framework. (SqlConnection, SqlCommand e SqlDataReader).
Quando criei os projetos, utilizei os templates do prório Visual Web Developer:
Para o projeto Web Forms, usei ASP.NET Web Application.
Para o projeto MVC usei: ASP.NET MVC 2 Web Application.
É claro que não vou fazer um passo a passo de como criar o projeto, o foco deste post não é isso, mas depois de pronto, nosso Solution Explorer do projeto WebForms ficará assim:
Já o projeto MVC, tem uma estrutura um pouco maior, porque ele trabalha completamente “tipado”, temos as classes Model, Controller e View, como manda o figurino:
Certo, agora vamos ao objetivo, quando executo o projeto WebForms e acesso a página de clientes, o Framework gera este código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title> </title><link href="../Styles/Site.css" rel="stylesheet" type="text/css" /></head><body> <form method="post" action="default.aspx" id="ctl01"><div class="aspNetHidden"><input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ZhpEPEbRGaEf3wxNFvEkKLAz6ze4Y1776/kxLQ+oQoJx5Ew6ZrkBOLulNNEfu2T+c9uFRH7RTl5UUrZ3A1gK1BMKQc174Sha+0Wt5wmfhTKcGIb1YUgfoyjwcO8TYaR3U3o3l/07IemJNiwmeH8cM7BzSKkWiBTRuwjyI6u7VHlH7TyWLCMw0bneQ8edbb2YBMnGslvv7YSjWb5RdYMIjhu77ZE4CwQwK75UxHI1QZUgHjIaNP7MrZpoxi+tQbCBVW9Lc3jZCq0gbouSkWw7epm9WZknpiH5T68BTGirDfP4BfUZygsyB6aHmrpdN47pKJz7kFH78soAuE4Yd1NWNk9mHK+6ErcoVe3EkH8ycfXm51UwzkwNp2XRdr2s2AANsWpDdxNhyDTo2Mia2/YrPGirUzqV62RWlVWpS/KBwBpdtSLlYVnLaU6eJyjrJhqXxKzTa8b3F1av8h40cX5teT+0odXAWB3E2GcrE9XGfwa1ACk5QQlFsh+UplF/dEuzes6UBjJd9LQS7kPVabfzs/y8L3BRsK0Rtb0i1unXfHMuq3eVg/XQGnwb9uEhL5EdHjniskkoUzQh1T2yJfPwajrjxU06M5Ba43Soj8pk03isqi4tBqBllPVkv13Hyz8eapd85VejaO+3CUqXVr3J9/3MvZWjNcA2QOef7H4xKmtVExbxingFQqj5K5appmJReVczk8/HLCOnLD+Wa5/7CKWTj/OucQgIgPYnGEpzMZUlKJZFLAeFfwwkR2XVZcyyCoYWjK2pJX5zuCXMVkMxKCCuWjVvtl3GPfUkz1nsgP/Jtyq7vSdiXdGE/qxV8yRGJN5h4MlvVOfYq2gKspcNIZzwCzVCidhdoY8SYjnz+qyIXmXxXD3VkF2XGbcId86i/qOkwOyk9UcAS8iR+Es/MkQg7WximaQQji+o67grOaE=" /></div> <script type="text/javascript">//<![CDATA[var theForm = document.forms['ctl01'];if (!theForm) { theForm = document.ctl01;}function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); }}//]]> </script> <script src="/WebResource.axd?d=0zvkMCjUr_X9FEtTbyaazMNWze3Aw9M1NaDOWh9f6uOOmHvbFAWAs1pNbRarKaDWg98R6NmmpknKWtHTQyUZlzqnqyqf5igxEE03R7cyCdw1&t=634356288728593750" type="text/javascript"></script> <script src="/WebResource.axd?d=X3duYeJVe5XCr3s3WKijactjVtDfU3wOlWWxrrkK9YLsUAa4ixWYiAVBisFAv-0HiM2eUx2g4A0dX_eF8cm9dBOr9ijaehYR-chY4Lxo0mM1&t=634356288728593750" type="text/javascript"></script><div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" /> <input type="hidden" name="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="J0z-AYjFMhWT0kpqMD21gr0HoEKRmyw5_w3a37YYi27BAPn9DepNebG_20nPZ-VajOl1_KCPnab6uApAzjeQe7rOkN95u7baMYMKLA59Jpw1" /> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="IRcnHy6RQ1JCPCa5l/6k5JvtDNRbcbaJH7wDUCh/MVtgwLHo5W/iwGkTGRYeZHjYgqrWjjGjzZQvt+FJuMho2GE+Qf3syKzyeGXquF9a/Ws577KUO6oFdTWrhmsBXMMh" /> </div> <div class="page"> <div class="header"> <div class="title"> <h1> My ASP.NET Application </h1> </div> <div class="loginDisplay"> [ <a href="../Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ] </div> <div class="clear hideSkiplink"> <a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=xFBnuqKYnqgWTzzLZBOde45ezhDnXgdvOgtOQCvZwJw6xfKBic_vxFOBRotUqhEobwKQWWgbNXfNYvZsldu9uZj6j6aYf49eocT9vsEpgtM1&t=634356288728593750" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu"> <ul class="level1"> <li><a class="level1" href="../Default.aspx">Home</a></li><li><a class="level1" href="../About.aspx">About</a></li> </ul></div><a id="NavigationMenu_SkipLink"></a> </div> </div> <div class="main"> <p> Listagem Completa de Clientes </p> <!-- Componente SqlDataSource que configura a minha conexão com o banco de dados --> <!-- Componente GridView que será responsável por gerar a tabela com os registros --> <div> <table cellspacing="0" rules="all" border="1" id="MainContent_GridView1" style="border-collapse:collapse;"> <tr> <th scope="col">Id_Cliente</th><th scope="col">Nome</th><th scope="col">CPF</th><th scope="col">RG</th><th scope="col">Idade</th><th scope="col"> </th><th scope="col"> </th> </tr><tr> <td>17</td><td>João</td><td>123.123.123-12</td><td>12.312.123-1</td><td>30</td><td><a href="Edita.aspx?Id_Cliente=17">Editar</a></td><td> <a onclick="return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_0" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl02$LinkButton1','')">Excluir</a> </td> </tr><tr> <td>19</td><td>José</td><td>444.444.444-44</td><td>44.444.444-4</td><td>21</td><td><a href="Edita.aspx?Id_Cliente=19">Editar</a></td><td> <a onclick="return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_1" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl03$LinkButton1','')">Excluir</a> </td> </tr><tr> <td>18</td><td>Maria</td><td>999.999.999-99</td><td>99.999.999-9</td><td>35</td><td><a href="Edita.aspx?Id_Cliente=18">Editar</a></td><td> <a onclick="return confirm('Tem certeza?');" id="MainContent_GridView1_LinkButton1_2" href="javascript:__doPostBack('ctl00$MainContent$GridView1$ctl04$LinkButton1','')">Excluir</a> </td> </tr> </table></div> <p> <input type="submit" name="ctl00$MainContent$btnInserir" value="Inserir novo cliente" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$btnInserir", "", false, "", "Insere.aspx", false, false))" id="MainContent_btnInserir" /> </p> </div> <div class="clear"> </div> </div> <div class="footer"> </div> <script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form></body></html>
Dêem uma olhada em quanto código os componentes criam. É muita coisa, imaginem isso em um grande portal? Americanas.com gerando este código? Meio inviável não? Aproveito para destacar o código gerado pelo ViewState, herói e vilão do Web Forms.
Agora vamos comparar a mesma página gerada pelo projeto MVC:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> Index </title><link href="Content/Site.css" rel="stylesheet" type="text/css" /></head> <body> <div class="page"> <div id="header"> <div id="title"> <h1>My MVC Application</h1> </div> <div id="logindisplay"> [ <a href="/Account/LogOn">Log On</a> ] </div> <div id="menucontainer"> <ul id="menu"> <li><a href="/">Home</a></li> <li><a href="/Home/About">About</a></li> </ul> </div> </div> <div id="main"> <h2>Listagem completa de clientes:</h2> <table> <tr> <th> Código </th> <th> Nome </th> <th> CPF </th> <th> RG </th> <th> Idade </th> <th></th> </tr> <tr> <td> 30 </td> <td> João </td> <td> 123.123.123-12 </td> <td> 12.312.123-1 </td> <td> 30 </td> <td> <a href="/Cliente/Edit?Id_Cliente=30">Editar</a> | <a href="/Cliente/Delete?Id_Cliente=30" onclick="return confirm('Tem certeza?');">Excluir</a> | </td> </tr> <tr> <td> 32 </td> <td> José </td> <td> 444.444.444-44 </td> <td> 44.444.444-4 </td> <td> 21 </td> <td> <a href="/Cliente/Edit?Id_Cliente=32">Editar</a> | <a href="/Cliente/Delete?Id_Cliente=32" onclick="return confirm('Tem certeza?');">Excluir</a> | </td> </tr> <tr> <td> 31 </td> <td> Maria </td> <td> 999.999.999-99 </td> <td> 99.999.999-9 </td> <td> 35 </td> <td> <a href="/Cliente/Edit?Id_Cliente=31">Editar</a> | <a href="/Cliente/Delete?Id_Cliente=31" onclick="return confirm('Tem certeza?');">Excluir</a> | </td> </tr> </table> <p> <a href="/Cliente/Create">Novo cliente...</a> </p> <div id="footer"> </div> </div> </div></body></html>
O que acham? As duas páginas fazem exatamente a mesma coisa, no entato o MVC gera beeeem menos código.
Bom pessoal, essa é apenas uma das vantagens do MVC, posso destacar outras:
- Controle total do código que será enviado ao navegador;
- Arquitetura em camadas, códigos completamente separados;
- Classes que auxiliam a geração do HTML para o browser de acordo com as ações do Controlador, sem lixo!;
- Facilidade de se implementar Ajax (de verdade) no seu projeto.
- Integração com o Jquery usando classes do Framework;
Bom é isso, vou me despedindo, mas antes deixo o código fonte dos dois projetos disponíveis para download.
