ASP .NET MVC 4 - Apresentação e introdução (revisão)

A ASP .NET MVC 4 é um framework para criação de aplicações escaláveis usando padrões de projetos, a tecnologia ASP .NET e a plataforma .NET. Você pode desenvolver aplicações para web usando ASP .NET MVC 4 e as linguagens C# ou VB .NET.

Atualmente a ASP .NET MVC 4 é suportada no Visual Studio 2010 e no Visual Studio 2012. As versões anteriores do Visual Studio não dão suporte ao ASP .NET MVC 4.

O Visual Studio 2012 e o Visual Studio 2012 Express (Incluindo a versão Express for web) já trazem embutido o ASP .NET MVC 4; o Visual Studio 2010 contém o ASP .NET MVC 2 e ASP .NET MVC 3.

Para instalar o ASP.NET MVC 4 para o Visual Studio 2010, você deve ter o SP1 instalado para o VS 2010. Se você não tem o Service Pack 1 instalado para o Visual Studio, clique aqui e baixe o service para atualizar o seu Visual Studio 2010.

Há três opções diferentes para instalar o ASP.NET MVC 4 para o Visual Studio 2010:

O que é afinal o ASP .NET MVC ?

Atualmente tecnologia ASP .NET suporta 3 diferentes tipos de modelo de desenvolvimento : Web Forms , Web Pages e MVC.

A ASP .NET MVC é um framework para desenvolvimento de aplicações Web criado na plataforma .NET, e embora o modelo Web Forms seja um substituto a tecnologia Active Server Pages (ASP), a ASP .NET MVC não veio para substituir os Web Forms, sendo apenas uma alternativa como modelo de desenvolvimento para criação de um web site ASP .NET.

A partir de março de 2012 a ASP .NET MVC foi liberada sob a licença Open Source (Apache License 2.0) e pode ser baixada no endereço: Codeplex.com 

A ASP.NET MVC ajuda a reduzir a complexidade da aplicação web, dividindo uma aplicação em três camadas, Model-View e Controller. Esta separação traz benefícios como isolamento dos componentes durante o desenvolvimento e também esta separação oferece um melhor suporte para desenvolvimento orientado a testes (TDD). A ASP.NET MVC pode criar site com bom desempenho e de fácil manutenção.

A versão atual do ASP.NET MVC é de 4 e foi lançado em 15 de agosto de 2012. Abaixo temos um histórico das versões do ASP .NET MVC:

Data

Versão
10 Dez 07  ASP.NET MVC CTP 
13 Mar 09   ASP.NET MVC 1.0 
16 Dez 09  ASP.NET MVC 2 RC
04 Fev 10  ASP.NET MVC 2 RC 2
10 Mar 10  ASP.NET MVC 2 
06 Out 10 ASP.NET MVC 3 Beta 
09 Nov 10 ASP.NET MVC 3 RC
10 Dez 10 ASP.NET MVC 3 RC 2
13 Jan 11 ASP.NET MVC 3
20 Set 11  ASP.NET MVC 4 Developer Preview 
15 Fev 12 ASP.NET MVC 4 Beta
31 Mai 12 ASP.NET MVC 4 RC
15 Ago 12  ASP.NET MVC 4 

A arquitetuar MVC

O padrão Model-View-Controller (MVC) é um princípio de projeto de arquitetura que separa os componentes da aplicação de uma aplicação Web em três camadas. Essa separação dá mais controle sobre as partes individuais da aplicação, permitindo assim um desenvolvimento bem com uma manutenção mais fácil além de facilitar também a realização de testes.

O Model (Modelo)

O Model contém e expõe as propriedades e a lógica do aplicativo, podemos dizer que o model representa a lógica do negócio e os dados. No exemplo que iremos criar logo a seguir para a aplicação Agenda a classe 'AgendaModel' representa as propriedades de uma "lista telefônica" na aplicação e pode expor propriedades, tais como Nome, Sobrenome e número de telefone e também pode expor métodos.

A View (Visão)

A View é responsável por criar o código de resposta HTML ou qualquer resposta de volta ao navegador como pdf, html, arquivos .xls, txt, etc. Podemos afirmar que a visão é responsável por transformar um modelo ou modelos em uma representação visual.

O Controller (Controlador)

O Controlador é responsável pelo processamento de entradas do usuário a partir da View e por dar respostas para View. Isso significa que o controlador decide a ação e executa as tarefas/lógica com base em parâmetros. O Controller atua como coordenador entre a view e o model.

Uma breve (bem breve mesmo) comparação entre ASP .NET MVC e Web Forms

Se você já trabalhou com ASP.NET Web Forms, então você pode estar interessado em ver algumas comparações entre os dois.

A principal coisa é que tanto a ASP.NET Web Forms como ASP.NET MVC são construídos em cima do framework ASP.NET.

Há algumas semelhanças e diferenças entre estes dois modelos.

O desenvolvimento ASP.NET Web Forms é mais fácil em comparação com o modelo ASP.NET MVC o modelo Web Forms não exige um desenvolvedor especialista em JavaScript e HTML para escrever uma aplicação web, já o modelo ASP.NET MVC utiliza muito as tecnologias de script e isso requer um bom domínio sobre essas tecnologias.

O ASP.NET Web Forms é muito rico em controles de servidor já no ASP.NET MVC não há controles de servidor suportados e ele é totalmente dependente de controles HTML o que é parcialmente suprido com a utilização dos HtmlHelpers para renderizar controles HTML em uma view.

A ASP.NET MVC esta baseada na separação de interesses sendo assim dessa forma um sistema mais flexível e escalável e a implementação de testes em projetos ASP.NET MVC é muito mais simples do que em aplicações Web Forms.

O ciclo de requisição ASP.NET MVC é muito mais simples do que nos Web Forms, visto que o ASP .NET MVC não possui o View State, o que dá um melhor desempenho nas aplicações que usam o modelo MVC.

Vamos então arregaçar as mangas e criar uma aplicação ASP .NET MVC 4.

Criando uma aplicação ASP .NET MVC 4 (revisão)

Vamos criar uma pequena aplicação ASP .NET MVC 4 chamada Agenda usando o Microsoft Visual Studio 2012 Experss for Web que é uma ferramenta grátis que você pode baixar neste link: Visual Studio Express 2012 for web

Abra o Visual Studio Express 2012 for Web e no menu FILE clique em New Project;

A seguir selecione o template Visual C# -> Web -> ASP .NET MVC 4 Web Application , informe o nome Agenda e clique no botão OK;

Selecione o template Internet Application e o engine Razor e clique no botão OK;

O mecanismo View Engine é responsável por renderizar o HTML de suas view para o navegador. O modelo de view engine tem uma sintaxe diferente para a implementação.

Atualmente, há um pequeno número de motores de exibição disponíveis para MVC e os quatro melhores motores são Razor, Spark, ASPX e NHaml.

O template Internet Application estende o Modelo básico com dois controladores (controlador Account e controlador Home) com toda a lógica e funcionalidade implementada em Action e Views. Neste modelo a funcionalidade de gerenciamento de adesão dá a opção ao usuário para se registrar,alterar senha e fazer o login no site.

Será criado um projeto contendo toda a estrutura de um projeto MVC pronto para ser usado:

Obs: Eu poderia iniciar pela definição do controller e isso facilitaria a criação dos demais templates em suas respectivas pastas mas vou seguir um caminho diferente apenas para mostrar outra forma de definir o código da aplicação

Vamos alterar o projeto criado ajustando-o a nossa necessidade para criar a aplicação ASP .NET MVC 4 Agenda que gerencia informações de endereço e telefones.

Definindo o Model

Vamos incluir na pasta Models a classe AgendaModel.

Clique com o botão direito do mouse sobre a pasta Models e selecione Add -> Class;

A seguir selecione Class e informe o nome AgendaModel.cs e clique no botão OK;

Vamos definir o conteúdo da classe AgendaModel conforme abaixo. Estamos usando o namespace DataAnnotations para realizar poder os atributos de validação definidos para as propriedades da classe:

Definindo as Views

Vamos agora incluir nossas visões na pasta Views. Antes clique com o botão direito do mouse e selecione Add -> New Folder e informe o nome Agenda;

Clique com o botão direito sobre a pasta Agenda e selecione Add -> View;

A seguir informe o nome Index, selecione a view engine Razor(CSHTML), marque o item Create a strongly-typed view e selecione AgendaModel;

Escolha o template List e clique no botão Add;

Será criada a view Index.cshtml na pasta View/Agenda com o seguinte código:

@model IEnumerable<Agenda.Models.AgendaModel>

@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>@Html.DisplayNameFor(model => model.Nome) </th>
        <th>@Html.DisplayNameFor(model => model.Sobrenome) </th>
        <th> @Html.DisplayNameFor(model => model.Telefone)</th>
        <th>@Html.DisplayNameFor(model => model.Celular) </th>
        <th> @Html.DisplayNameFor(model => model.Email)</th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td> @Html.DisplayFor(modelItem => item.Nome) </td>
        <td> @Html.DisplayFor(modelItem => item.Sobrenome) </td>
        <td> @Html.DisplayFor(modelItem => item.Telefone) </td>
        <td> @Html.DisplayFor(modelItem => item.Celular) </td>
        <td> @Html.DisplayFor(modelItem => item.Email)</td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

Usando o mesmo procecimento descrito acima vamos criar os arquivos a seguir na pasta Views/Agenda:

O código do arquivo Details.cshtml é visto abaixo:

@model Agenda.Models.AgendaModel
@{
    ViewBag.Title = "Details";
}
<h2>Details</h2>
<fieldset>
    <legend>AgendaModel</legend>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Nome)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Nome)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Sobrenome)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Sobrenome)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Telefone)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Telefone)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Celular)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Celular)
    </div>

    <div class="display-label">
         @Html.DisplayNameFor(model => model.Email)
    </div>
    <div class="display-field">
        @Html.DisplayFor(model => model.Email)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) |
    @Html.ActionLink("Back to List", "Index")
</p>

O conteúdo do arquivo Create.cshtml é dado a seguir:

@model Agenda.Models.AgendaModel
@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>AgendaModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Nome)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Nome)
            @Html.ValidationMessageFor(model => model.Nome)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Sobrenome)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Sobrenome)
            @Html.ValidationMessageFor(model => model.Sobrenome)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Telefone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Telefone)
            @Html.ValidationMessageFor(model => model.Telefone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Celular)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Celular)
            @Html.ValidationMessageFor(model => model.Celular)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

O arquivo Edit.cshtml possui o seguinte código:

@model Agenda.Models.AgendaModel
@{
    ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>AgendaModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Nome)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Nome)
            @Html.ValidationMessageFor(model => model.Nome)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Sobrenome)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Sobrenome)
            @Html.ValidationMessageFor(model => model.Sobrenome)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Telefone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Telefone)
            @Html.ValidationMessageFor(model => model.Telefone)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Celular)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Celular)
            @Html.ValidationMessageFor(model => model.Celular)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Definindo o Controller

Vamos definir o nosso controlador. Clique com o botão direito do mouse sobre a pasta Controllers e a seguir clique em Add -> Controller;

Na janela Add Controller informe o nome AgendaController e selecione a opção MVC controller with empty read/write actions da lista e clique no botão Add;

O arquivo AgendaController.cs será criado na pasta Controllers exibindo os métodos definidos mas vazios e prontos para serem alterados.

A primeira coisa que vamos fazer é definir a propriedade AgendaLista que define um valor padrão para a Agenda visto que não irei usar um banco de dados no projeto.

A temos o código da propriedade AgendaLista :

A seguir vamos alterar o código dos métodos do controlador que criamos conforme abaixo:

1- Método Create (HttPost)

        // POST: /Agenda/Create
        [HttpPost]
        public ActionResult Create(AgendaModel agdaModel)
        {
            try
            {
               _agendaLista.Add(agdaModel);
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

2- Método Edit (GET)

        //
        // GET: /Agenda/Edit/5
        public ActionResult Edit(string foneNumero)
        {
            return View(_agendaLista.Where(c => c.Celular == foneNumero).FirstOrDefault());
        }

Este código retorna os dados pelo número do celular. Ao clicar no botão Atualizar na página de edição o método a seguir será executado:

3- Método Edit (HttPost)

        //
        // POST: /Agenda/Edit/5
        [HttpPost]
        public ActionResult Edit(string foneNumero, AgendaModel agdaModel)
        {
            try
            {
                _agendaLista.Where(c => c.Celular == foneNumero).ToList().ForEach(d => { d = agdaModel; });
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

4- O método Delete

        //
        // GET: /Agenda/Delete/5
        public ActionResult Delete(string foneNumero)
        {
            _agendaLista.RemoveAll(c => c.Celular == foneNumero);
            return RedirectToAction("Index");
        }

5- O método Details

        //
        // GET: /Agenda/Details/5
        public ActionResult Details(string foneNumero)
        {
            return View(AgendaLista.Where(c => c.Celular == foneNumero).FirstOrDefault());
        }

6- O metódo Index

        //
        // GET: /Agenda/
        public ActionResult Index()
        {
            return View(AgendaLista);
        }

Agora vamos aos ajustes finais. Vamos alterar o conteúdo do arquivo _Layout.chstml na pasta Shared incluindo uma linha para exibir o menu Agenda Telefônica conforme mostrado a seguir:

Outra alteração muito importante que deve ser feita é ajustar nos arquivos Index.cshtml e Details.cshtml o critério de definição usado para localizar o registro no modelo.

No nosso exemplo estamos procurando sempre pelo número do telefone celular então devemos fazer as seguintes alterações:

Arquivo Index.cshtml

<td>
   @Html.ActionLink("Edit", "Edit", new { foneNumero=item.Celular }) |
   @Html.ActionLink("Details", "Details", new { foneNumero=item.Celular }) |
  @Html.ActionLink("Delete", "Delete", new { foneNumero=item.Celular })
</td>

Arquivo Details.cshtml

<p>
     @Html.ActionLink("Edit", "Edit", new { foneNumero=Model.Celular }) |
     @Html.ActionLink("Back to List", "Index")
</p>

Você pode customizar ainda mais os templates mas já temos o necessário para rodar o nosso exemplo. Executando projeto teremos a seguinte página inicial:

Clicando no menu Agenda Telefônica vemos página Index exibir a agenda contendo as informações padrão definida no controlador AgendaController:

Clicando no link Create New teremos a página para informar os dados e criar uma nova entrada na agenda:

Ao clicar no botão Create veremos a página Index exibir a nova informação:

Para editar uma entrada da agenda clicamos no link Edit:

Não foi implementado a persistência das informações neste exemplo fica como uma tarefa a ser concluída.(Você pode usar o entity framework ou LINQ to SQL ou ADO .NET)

Pegue os projetos aqui: Agenda.zip (Sem as referências)

João 11:35 Jesus chorou.

Referências:

José Carlos Macoratti