ASP NET – Introdução ao framework MVC – C#

Publicado: 14 de maio de 2015 em C#

O ASP.NET MVC oferece uma poderosa maneira baseada em padrões para construir sites dinâmicos que permite uma clara separação de conceitos e que lhe dá controle total sobre a marcação para tornar o desenvolvimento mais agradável e ágil. O ASP.NET MVC inclui muitas características que permitem, desenvolvimento amigável-TDD, é rápido para a criação de aplicações sofisticadas que utilizam os mais recentes padrões da web.

O Design Pattern MVC (Model-view-controller), em português modelo-visão-controlador, é um padrão de arquitetura de software que separa a representação da informação da interação do usuário com ele. O modelo (model) consiste nos dados da aplicação, regras de negócios, lógica e funções. Uma visão (view) pode ser qualquer saída de representação dos dados, como uma tabela ou um diagrama. É possível ter várias visões do mesmo dado, como um gráfico de barras para gerenciamento e uma visão tabular para contadores. O controlador (controller) faz a mediação da entrada, convertendo-a em comandos para o modelo ou visão. As ideias centrais por trás do MVC
são a reusabilidade de código e separação de conceitos.

De fato usar o padrão MVC é muito simples, basicamente você pode ter vários controladores, um para cada assunto, por exemplo um para a pagina inicial, um para login e assim por diante. Geralmente o controlador possui um modelo que consiste nos dados da aplicação ou regras de negocio. O controlador pode manipular varias visões diferentes através de rotas, fazendo o intermédio entre modelo, visão e controlador tornando as aplicações fáceis de desenvolver e de manter. Abaixo vamos ver como isso funciona na pratica.

ASP.NET MVC: http://www.asp.net/mvc

Criando uma aplicação ASP.NET MVC

1 – Crie um novo projeto Web e escolha ASP.NET Web Application, nomeie seu projeto de acordo com a figura abaixo:

Projeto - ASP.NET

Projeto – ASP.NET

2 – Selecione o template como ASP.NET MVC:

Template - MVC

Template – MVC

3 – Seu novo projeto será criado e você será recepcionado com uma página chamada readme.html que consiste na apresentação do Framework MVC e contém vários links para que você comece a aprender sobre ASP.NET MVC:

Bem-Vindo - ASP.NET MVC

Bem-Vindo – ASP.NET MVC

4 – Você pode compilar a aplicação MVC e verá que você possui um site com links totalmente funcionais, use o site por um instante para conhece-lo melhor:

Aplicação - MVC

Aplicação – MVC

5 – Mude o tamanho do seu navegador web e você pode ver que a aplicação é totalmente adaptável ao Device que irá utiliza-la, podendo ser um celular, um tablet ou um computador, esta adaptação automática da aplicação é devido aos frameworks e linguagens adicionais que a Microsoft adotou pra as aplicações ASP.NET.

Aplicação - Adaptável

Aplicação – Adaptável

6 – Clique com o botão direito do mouse na pagina e exiba seu código fonte e o analise, você pode ver que o código é totalmente legível e que por padrão a Microsoft utiliza alguns frameworks e linguagens como Javascript, o Bootstrap que é responsável pelo Design responsivo, o JQuery que manipula paginas web no lado cliente, também utiliza o JQuery UI que cria componentes web modernos e bonitos, além de vários outros frameworks:

MVC - Código HTML

MVC – Código HTML

7 – O MVC é um padrão antigo e muito usado na Web, o ASP.NET foi um dos últimos frameworks a implementa-lo e segue bem a linha do Ruby on Rails, se você está familiarizado com esta linguagem ou outras que utilizam o Design Pattern MVC você não terá dificuldades de utilizar o ASP.NET MVC.

O ASP.NET MVC é um padrão e também um framework de código aberto que possibilita a utilização do padrão de um modo simples. A Microsoft adotou alguns marcos na criação que possibilita melhor utilização do MVC:

  • Embrace the Web – Abraçando varias tecnologias de código aberto para tornar o ASP.NET competitivo e difundido, além de permitir que ele cruze as mais diversas plataformas.
  • Run on ASP.NET – Permite que as aplicações rodem no núcleo do ASP.NET que hoje é um framework maduro com mais de 10 anos, estável, seguro e optimizado para performance.
  • Extensible – Permite que você adicione novas funcionalidades ao framework para atender as suas necessidades.
  • Testable – Permite que você execute testes unitários em sua aplicação através de frameworks de testes.
MVC - Design Pattern

MVC – Design Pattern

8 – Vamos ver como é isso na pratica, no Solution Explorer abra a pasta Controller do seu projeto e abra o controlador chamado HomeController.cs, o analise e o modifique de acordo com o código abaixo:

Controlador

Controlador

9 – Abra na pasta View/Home e abra a visão chamada about.cshtml e altere de acordo com o código abaixo. Como você pode ver o controlador chama a visão e passa valores para ela dinamicamente. O controlador chama a visão através de rotas no qual veremos mais tarde.

ViewBag – A propriedade ViewBag permite compartilhar dinamicamente valores a partir do controlador para a visão. É um objeto dinâmico, que significa que não tem propriedades pré-definidas. Você define as propriedades que deseja para a ViewBag  simplesmente adicionando-as. No modo de exibição, você pode recuperar esses valores usando o mesmo nome da propriedade.

https://msdn.microsoft.com/en-us/library/system.web.mvc.controllerbase.viewbag(v=vs.118).aspx

MVC - View

MVC – View

10 – Após utilizar o código abaixo compile sua aplicação:

Aplicação MVC

Aplicação MVC

11 – Clique no menu About para ver as alterações:

MVC - View - Viewbag

MVC – View – Viewbag

Exemplo:

Neste exemplo utilizamos uma aplicação padrão MVC,  a estudamos e a modificamos para entender os conceitos de controlador e visão. Você pode criar mais propriedades para que seja passado do controlador/visão.

C#

Controlador

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MeuMVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Desenvolvimento Aberto - MVC.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Visão

index.cshtml

@{
    ViewBag.Title = " - Desenvolvimento Aberto - Home Page";
}

<div class="jumbotron">
    <h1>Desenvolvimento Aberto - ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="http://asp.net" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

about.cshtml

@{
    ViewBag.Title = "Sobre";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Rê, Você é a página mais linda que o destino escreveu na minha vida.</p>

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s