Criando um ASP.NET MVC Web Application

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 04-04-2010

0

No post ASP.Net MVC fiz uma introdução as caracteristicas desse novo tipo de projeto web. Neste post vou apresentar um pouco mais sobre esse projeto, sua estrutura, comportamento.
Para isso é necessário instalar o ASP.NET MVC. Após a instalação o Visual Studio 2008 apresentará um novo tipo de projeto Web, chamado ASP.NET MVC Web Application.

New Project ASP.NET MVC Web Application

Ao criar um projeto do tipo ASP.NET MVC Web Application uma aplicação de demonstração (padrão) é apresentada na Solution Explorer.

O ASP.NET MVC a primeira vista parece ser bem complicado, mas apartir do momento que se conhece melhor a sua estrutura e seu funcionamento, ele passa a ser bem simples.

Estrutura do ASP.NET MVC Web Application

Primeiramente vamos nos atentarmos a estrutura, pois ela contem diversas convensões que devem ser utilizadas pelo ASP.NET MVC.
Solution Explorer MVC Web Application
Repare nos diretórios, obrigatóriamente teremos o Controller, Model e View.
Outra convensão é para as classes controladoras (contidas no diretório Controller), devem possuir o sufixo Controller em seus nomes e um sub-diretório no diretorio View. Confuso? Repare na Solution o diretorio Controller, note que possui duas classes controladoras Account e Home ambas com o sufixo Controller. Agora veja o diretório View, ele possui dois sub-diretórios com o mesmo nome da controladora (Account e Home).
No diretório View ficam os templates que correspondem a ações dos controllers e seram renderizados.
O sub-diretório View/Shared contém recorsos compartilhados com a aplicação, como página de erro genérica, master page, entre outros.
O diretório Script é destinado a armazenar biblioteca JavaScript e scripts (.js)
O diretório Content é destinado a armazenar arquivos de estilo (CSS), arquivos de imagens e outros não dinâmicos.
Na raiz do ASP.NET MVC Web Application temos os arquivos Global.asax, default.aspx e web.config estes arquivos são utilizados em conjunto para realizarem a sobreescrita (rewrite) de URL, mas esse assunto ficará para um próximo post.

Como ASP.NET MVC trabalha

Para compreender melhor o funcionamento do ASP.NET MVC, vamos remover alguns arquivos e diretórios da aplicação padrão.

  • App_Data (diretório)
  • AccountController.cs (arquivo)
  • Account (diretório)
  • About.aspx (arquivo)
  • Index.aspx (arquivo)
  • Error.aspx (arquivo)
  • LogOnUserControl.ascx (arquivo)
  • Site.Master (arquivo)

Hello Word

Como é padrão e não pode faltar em qualquer tutorial de introdução, vamos criar a famosa aplicação Hello Word!. Para isso no arquivo HomeController reescreva o código para que fique da seguinte forma:

1
2
3
4
5
6
7
    public class HomeController : Controller
    {
        public string Index()
        {
            return "Hello, word!";
        }
    }

Pronto, ao executar (F5) criamos nosso primeiro ASP.NET MVC Application.

Na arquitetura MVC, os controllers são reponsáveis por manipular as requisições. No .NET, controller são classes derivadas de System.Web.Mvc.Controller. E cada método público no Controller é conhecido como Action Method (método de ação), que são chamdos da web por meio de alguma URL. Em nossa aplicação acima temos nosso controller chamado HomeController com seu action method chamado Index.
Quando executamos a aplicação o Routing System (sistema de rotas) do ASP.NET MVC decidiu qual controller e action method executar. Não por acaso utilizei este controller e action method, esta é a configuração padrão de nosso aplicação, que está configurada no arquivo Global.asax.cs, como pode ser visto:

1
2
3
4
5
6
7
8
9
10
public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
    routes.MapRoute(
        "Default",                                            // Route name
        "{controller}/{action}/{id}",                         // URL with parameters
        new { controller = "Home", action = "Index", id = "" }// Parameter defaults
    );
}

Em nosso Routing System, é definido a rota default com o controller Home e o action method Index sem passagem de parâmetro. Dessa forma as seguintes requisição serão manipuladas pela action Index no HomeController:

  • /
  • /Home
  • /Home/Index

Renderizando Web Pages

Como já mensionado, na arquitetura MVC o Controller é responsável por manipular as requisições e as Views são componentes de interface do usuário. Assim não está correto em nossa aplicação o controller enviar a resposta (no nosso caso texto) para o browser. Em uma aplicação real o controller deve passar essa tarefa para uma View. Para isso vamos reescrever o método Index da seguinte forma:

1
2
3
4
5
6
7
public class HomeController : Controller
{
    public ViewResult Index()
    {
        return View();
    }
}

Dessa forma a action retorna um objeto do tipo ViewResult, passando para o Framework a instrução de renderizar uma View. O próximo passo é criar a View, para isso podemos clicar com o botão direito no action method Index e selecione Add View, isto irá criar um novo template para o action method em “~/Views/Home/Index.aspx”.
Altere o código HTML na tag body da seguinte forma:

1
2
3
4
<body>
    <h1>Hello, Word!</h1>
    <p>(renderizada apartir da View)</p>
</body>

Nossa aplicação está finalizada, execute para visualizar a página rendenrizada pela View.

Hello Word ASP.NET MVC Web Application

Repare que não é necessário informar o nome da View que será chamada. O Framework renderiza a View que contém o mesmo nome do action method.

Há outros objetos de retorno que um Action Method pode retornar que instrui o framework diferentes fins. Esses tipos de retorno são chamados Action Results, mas isso será assunto para um próximo post, assim como a compreensão do M de Model de nossa arquitetura MVC.

Enjoy ;-)

ASP.Net MVC

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 12-02-2010

0

ASP.NET MVC é um framework (que promete bastante evolução no framework.NET 4.0 que será lançado junto com o VS 2010) voltado para o desenvolvimento de aplicações web seguindo o padrão de arquitetura MVC Model-View-Controller que separa a aplicação em três (3) componentes principais: o modelo, a visão e controlador.
O framework MVC é definido no namespace System.Web.Mvc, suporta parte do namespace System.Web e permite o desenvolvimento de aplicações web utilizando a combinação dos dois tipos de abordagens Web Forms e MVC. Nenhuma abordagem exclui a outra.

O framework MVC inclui os seguintes componentes:

  • Modelo (Model) – Objetos de modelo são partes da aplicação que implementam a lógica para as aplicações de domínio.
  • Visão (Views) – Views são componentes de interface do usuário (UI).
  • Controladores (Controllers) – Controladores são componentes que manipulam as interações dos usuários, trabalhando os dados com o model, e finalmente seleciona a view para “renderizar” os resultados de saída para mostrar no UI.

O padrão MVC permite separar os diferentes aspectos de uma aplicação web e fornece um baixo acoplamento entre elementos por especificar cada tipo de lógica que pode ser utilizada na aplicação. Esta separação permite um melhor gerenciamento de complexidade da aplicação, pois a concentração em um aspecto da programação de cada vez. Também possibilita o desenvolvimento guiado por teste (TDD) de uma forma mais fácil do que em Web Forms.
A perda de acoplamento entre os componentes de uma aplicação, MVC também promove desenvolvimento paralelo. Um desenvolvedor pode trabalhar em uma view, enquanto um segundo desenvolvedor pode trabalhar em uma lógica do contoller e um terceiro desenvolvedor pode focar na lógica de negocio do modelo.

Vantagens de uma aplicação baseada em MVC

A utilização do modelo MVC traz alguns benefícios ao desenvolvimento com relação ao antigo Web Forms como:

  • Não utilize ViewState ou foms baseados em servidor (server).
  • Maior liberdade para desenvolvedores que gostam do controle total sobre o comportamento de uma aplicação (HTML).
  • Usa um padrão Front Controller que processa as requisições de uma aplicação web através de um simples controlador (controller). Isto possibilita o desenvolvimento de uma aplicação que suporta uma rica rota de infraestrutura.
  • Fornece um suporte melhor para test-driven development (TDD).
  • O ASP.NET MVC framework suporta Injeção de Dependência (ID) e Inversão de Controle (IC).
  • Mapeamento de URL .
  • Utilização das características existente com o uso de páginas (.aspx), user control (.ascx) e máster Page (.master ) no modelo MVC.

Até mais ;-)

Quando utilizar Literal e Label

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 02-12-2009

0

Primeiramente vamos as definições:

  • Literal é um controle que reserva um local da página para exibir um texto estático.
  • Label é um controle de rótulo usado para mostrar textos na página.

Ambos os controles possuem a propriedade Text, que define o texto a ser exibido.
Não há um controle melhor ou pior. E sim saber quando e como utilizar esses controles corretamente. O mais importante é entender e saber o que é produzido em sua renderização.
É nesse momento que as diferenças ficam mais aparentes.

Criando um projeto para comparar os controles
Para exemplificar os controles criei um ASP.Net Web Site com o nome LabelTeste
Na página Default.aspx inclui o seguinte código interno a tag form:

<div id="teste">
        <h3>Controles ASP.Net</h3>
        <p><asp:Label ID="lblTeste1" runat="server"></asp:Label></p>
        <p><asp:Literal ID="ltrTeste1" runat="server"></asp:Literal></p>
        <p><asp:Label ID="lblTeste2" AssociatedControlID="txtTeste2" runat="server"></asp:Label><asp:TextBox ID="txtTeste2" runat="server"></asp:TextBox></p>
</div>

Ao executar a aplicação, teremos a seguinte tela:

Tela Web Control

Clique com o botão direito e selecione codigo-fonte e veja o código gerado 

<div id="teste">
        <h3>Controles ASP.Net</h3>
        <p><span id="lblTeste1">label 1</span></p>
        <p>literal 1</p>
        <p><label for="txtTeste2" id="lblTeste2">label 2</label><input name="txtTeste2" type="text" id="txtTeste2" /></p>
</div>

Repare no código gerado. O controle Label renderiza o texto interno das tags span, que na maioria das vezes é desnecessário. Isso aumenta a quantidade de código a ser trafego do servidor para o cliente. Neste caso que só queriamos a apresentação de um texto, damos preferência ao Literal, que renderiza somente o texto de uma forma estática sem geração de tags.
A principal vantagem do Label é quando necessitamos de associa-lo a um outro controle. Que é feito por meio do atributo AssociatedControlID.
Assim é gerado as tags label que são utilizadas para dar foco a um outro controle.

Até mais
;-)