mai 21 2011

Comparando ASP.net WebForms e ASP.net MVC

Category: ASP.NET,ASP.NET MVC,C#.net,CRUD,Exemplos,Visual StudioVinícius Sandim @ 12:36

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:

 Tabela

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:

 CriandoProjeto

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:

 SolutionForms

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:

 SolutionMVC

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&amp;t=634356288728593750" type="text/javascript"></script>

<script src="/WebResource.axd?d=X3duYeJVe5XCr3s3WKijactjVtDfU3wOlWWxrrkK9YLsUAa4ixWYiAVBisFAv-0HiM2eUx2g4A0dX_eF8cm9dBOr9ijaehYR-chY4Lxo0mM1&amp;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&amp;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">&nbsp;</th><th scope="col">&nbsp;</th>        </tr><tr>            <td>17</td><td>Jo&#227;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(&#39;Tem certeza?&#39;);" id="MainContent_GridView1_LinkButton1_0" href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1$ctl02$LinkButton1&#39;,&#39;&#39;)">Excluir</a>                </td>        </tr><tr>            <td>19</td><td>Jos&#233;</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(&#39;Tem certeza?&#39;);" id="MainContent_GridView1_LinkButton1_1" href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1$ctl03$LinkButton1&#39;,&#39;&#39;)">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(&#39;Tem certeza?&#39;);" id="MainContent_GridView1_LinkButton1_2" href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1$ctl04$LinkButton1&#39;,&#39;&#39;)">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(&quot;ctl00$MainContent$btnInserir&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Insere.aspx&quot;, 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&#227;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(&#39;Tem certeza?&#39;);">Excluir</a> |            </td>        </tr>

        <tr>            <td>                32            </td>            <td>                Jos&#233;            </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(&#39;Tem certeza?&#39;);">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(&#39;Tem certeza?&#39;);">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.


jan 02 2011

Feliz 2011

Category: Android,Flash Burrito,Flex,Google,PessoalVinícius Sandim @ 21:40

Caro amigo leitor, depois de muito muito tempo, aqui estou novamente escrevendo a você. Depois das minhas desculpas do ano de 2009 (dois posts atrás), por causa de TCC e outras coisas, mal sabia eu o que o ano de 2010 me reservava. Vou resumir: Treinamentos, casamento, reforma de imóvel, viagens e dois empregos formais. Pois é, a coisa pegou e o ano acabou. E nada do que havia prometido para o ano de 2010 eu consegui cumprir (em relação ao blog, claro!).

Por outro lado, pelos mesmos motivos (Treinamentos, casamento, reforma de imóvel, viagens e dois empregos formais) o ano de 2010 foi excelente! Tive muitas experiências novas em minha vida pessoal e profissional. O que posso destacar aqui são as aulas de desenvolvimento web que comecei a ministrar para o curso de Sistemas de Informação na Universidade de Franca, como sempre digo, treinamentos e cursos são uma via de mão dupla, onde todos aprendem de forma colaborativa, é sensacional!

No momento estou me atualizando em Flex, desvendando os segredos do Flash Builder Burrito. Fiz uma versão mobile da Agenda de Contatos que deixo o código fonte disponível no blog. Até agora estou achando ótimo! Veja os prints:

Burrito1 Burrito2

A única coisa que ainda não consegui foi fazer o deploy da aplicação, nem no celular nem no emulador do Android, por isso ainda não postei o código fonte pra vocês. Assim que resolver todos os problemas, ele aqui estará.

É inacreditável a facilidade de desenvolver as aplicações mobile com o AIR. Neste exemplo estou usando o serviço remoto da agenda mesmo, usando as classes Remote Object da mesma forma de uma aplicação Flex, sem alterar absolutamente nada.

Agora, o que anda me interessando mesmo é o Android em si, depois de ver a apresentação do TCC do Marcos Rezende, que se tratava de uma aplicação que controlava o consumo de veículos, datas de revisão, tinha integração com o GPS e tudo mais (genial!), resolvi aprofundar os meus estudos na plataforma do Google, e vou ser sincero, estou gostando bastante. Creio que neste ano teremos posts sobre isso rolando por aqui.

Enfim, aproveitando o título do post, gostaria de agradecer a todos os amigos, parceiros, clientes, alunos, familiares e esposa que fizeram este ano de 2010 tão especial e desejar a todos que em 2011 todos os nossos objetivos sejam alcançados.

FELIZ 2011!!!


mar 24 2010

Treinamento Online – Desenvolvendo com Flex e .Net

Category: C#.net,Flex,FluorineFx,TreinamentoVinícius Sandim @ 00:36

Depois de muitas promessas, finalmente estou abrindo uma nova turma do treinamento de Flex com .Net.

Assim como os outros, este será um treinamento VIP, limitado a 12 participantes, para que todas as dúvidas sejam solucionadas durante o desenrolar do treinamento.

Mais detalhes:

CONTEÚDO

  • Rich Internet Applications;
  • Soluções que implementam RIA’s atualmente;
  • Quem usa Flex™;
  • Flex™ Buider 3;
  • Anatomia de um projeto Flex™;
  • MXML e Action Script;
  • Tour de Flex;
  • Principais controles;
  • Containers;
  • Datagrid;
  • Integração com back-end;
  • Comparação entre formas de integração;
  • Integração com Microsoft® .net™;
  • FluorineFx;
  • Serialização de objetos.
  • Trazendo informações dinâmicas via Remote Object;
  • Desenvolvimento de aplicação (Agenda de Contatos);
  • Publicando minha aplicação;
  • Framework caching;
  • Finalizando;

REQUISITOS

  • Conhecimentos básicos em Programação Orientada a Objeto;
  • Visual Studio 2005 ou Visual Web Developer Express 2005 instalado;
  • Adobe Flex Buider 3 instalado;

OBJETIVO

  • Capacitar todos os participantes a criar aplicações ricas para a internet usando o Flex™ como camada de apresentação e Microsoft® .net™ como camada de persistência.

PROGRAMAÇÃO

  • Carga Horária: 16 Horas;
  • Horário Previsto: 09:00 as 13:00hs;
  • Dia da Semana: Sábado;
  • Previsão Início: Abril/2010;
  • Previsão Fim: Maio/2010;
  • Vagas: 12 participantes;
  • Local: Adobe Connect;
  • Investimento: R$ 285,00;
  • Forma de Pagamento:
    • Boleto Bancário;
    • Cartão de Crédito (Em até 12x com PagSeguro);

Para se inscrever, use o botão abaixo e escolha a melhor forma de pagamento:

Dúvidas ou sugestões, entre em contato através do e-mail treinamento@viniciussandim.com.


dez 30 2009

Flex For Kids

Category: Eventos,FlexVinícius Sandim @ 19:07

É, sei que estou um pouco atrasado, mas não posso deixar de dar meu apoio ao evento.

O Flex for Kids é uma maratona de palestras on-line que será realizado no dia 06/02/2010 e contará com grandes nomes da comunidade Adobe Flex brasileira. Serão 10 palestras on-line ao vivo durante o dia inteiro, usando um ambiente de eventos multimídia onde os palestrantes ministrarão seus temas através de recursos de áudio, vídeo, slides e chat.

flex_for_kids_728x90 
Faça já a sua inscrição.


dez 07 2009

Vinícius Sandim – O Retorno

Category: Novidades,PessoalVinícius Sandim @ 20:11

É pessoal, confesso que não imaginava o trabalho que dava desenvolver um trabalho de pesquisa científica.
Portanto gostaria de me desculpar pelo chá de sumiço que tomei durante o último trimestre.
Acontece que estava desenvolvendo o meu trabalho de conclusão de curso, para finalmente obter o bacharelado em Sistemas de Informação.
Quero aproveitar este post para agradecer a todos os meus professores e orientadores que me auxiliaram na conclusão desta importante etapa de minha vida.
Sobre o tema do trabalho, gostaria de compartilhar com vocês, foi o seguinte:

SISTEMA DE COMUNICAÇÃO INSTANTÂNEA PARA SITES CORPORATIVOS

Vejam uma breve descrição:
Trata-se de um sistema que pode ser utilizado por várias empresas simultaneamente, porém isso fica transparente ao usuário final. Ele segue os conceitos da computação em nuvem, é fornecido como um serviço, portanto todos os usuários acessam o sistema através do mesmo endereço na internet e se identificam através de seu login e senha.
Ele gerencia os atendimentos de cada empresa separadamente, e cada uma tem seus atendentes e seus respectivos setores.
Outro recurso interessante é a gestão da base de conhecimento, um espaço que permite o gerenciamento dos processos realizados pela empresa e tem o objetivo de padronizar estes procedimentos.

Com o uso de conceitos novos, o projeto de pesquisa foi uma excelente oportunidade de estudo e ampliação dos conhecimentos das novas tendências do mercado.

Para matar um pouco da curiosidade, separei alguumas telas…

Atendimento2 

CategoriasDeConhecimento

Solicitacao

Solicitacao2 

As tecnologias ficam por conta de:

  • Adobe Flex 3
  • FluorineFx
  • C#.net 2008
  • SQL Server 2008

Confesso que apanhei bastante do FluorineFx para conseguir fazer funcionar o SharedObject, porém o resultado foi incrível!!! O servidor só tem atividade quando realmente uma mensagem é trocada entre os usuários. Vale a pena pesquisar…

Certo, etapa concluída! Novos projetos em vista, em breve vou fazer um post sobre as novidades pra 2010! Entre elas estão, novo layout, mais conteúdo Flex, conteúdo Silverlight, vídeos, novas turmas de treinamento e outras coisas.

Até +!


Próxima Página »