MVC Framework - Primeiro Aplicativo

Vamos pular e criar nosso primeiro aplicativo MVC usando Views e Controllers. Assim que tivermos uma pequena experiência prática sobre como funciona um aplicativo MVC básico, aprenderemos todos os componentes e conceitos individuais nos próximos capítulos.

Criar o primeiro aplicativo MVC

Step 1- Inicie o Visual Studio e selecione Arquivo → Novo → Projeto. Selecione Web → Aplicativo da Web ASP.NET MVC e nomeie este projeto comoFirstMVCApplicatio. Selecione o local comoC:\MVC. Clique OK.

Step 2- Isso abrirá a opção Modelo de projeto. Selecione o template vazio e View Engine as Razor. Clique OK.

Agora, o Visual Studio criará nosso primeiro projeto MVC, conforme mostrado na captura de tela a seguir.

Step 3- Agora vamos criar o primeiro Controller em nossa aplicação. Os controladores são apenas classes C # simples, que contêm vários métodos públicos, conhecidos como métodos de ação. Para adicionar um novo controlador, clique com o botão direito na pasta Controladores em nosso projeto e selecione Adicionar → Controlador. Nomeie o controlador como HomeController e clique em Adicionar.

Isso criará um arquivo de classe HomeController.cs na pasta Controladores com o seguinte código padrão.

using System; 
using System.Web.Mvc;  

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

O código acima basicamente define um método público Index dentro de nosso HomeController e retorna um objeto ViewResult. Nas próximas etapas, aprenderemos como retornar uma View usando o objeto ViewResult.

Step 4- Agora vamos adicionar uma nova visualização ao nosso Controlador doméstico. Para adicionar uma nova Visualização, clique com o botão direito na pasta de visualização e clique em Adicionar → Visualização.

Step 5- Nomeie a nova visão como índice e o mecanismo de visão como Razor (SCHTML). Clique em Adicionar.

Isso irá adicionar um novo cshtml arquivo dentro da pasta Views / Home com o seguinte código -

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

Step 6 - Modifique o conteúdo do corpo da View acima com o seguinte código -

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

Step 7- Agora execute o aplicativo. Isso fornecerá a seguinte saída no navegador. Esta saída é renderizada com base no conteúdo de nosso arquivo View. O aplicativo primeiro chama o Controlador que, por sua vez, chama esta Visualização e produz a saída.

Na Etapa 7, a saída que recebemos foi baseada no conteúdo de nosso arquivo View e não teve interação com o Controlador. Dando um passo adiante, criaremos agora um pequeno exemplo para exibir uma mensagem de boas-vindas com a hora atual usando uma interação de View e Controller.

Step 8- MVC usa o objeto ViewBag para passar dados entre o Controlador e a Visualização. Abra o HomeController.cs e edite a função Index para o código a seguir.

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

No código acima, definimos o valor do atributo Greeting do objeto ViewBag. O código verifica a hora atual e retorna a mensagem Bom dia / tarde de acordo com a instrução return View (). Observe que aqui Greeting é apenas um atributo de exemplo que usamos com o objeto ViewBag. Você pode usar qualquer outro nome de atributo no lugar de Saudação.

Step 9 - Abra o Index.cshtml e copie o código a seguir na seção do corpo.

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

No código acima, estamos acessando o valor do atributo Greeting do objeto ViewBag usando @ (que seria definido no Controller).

Step 10- Agora execute o aplicativo novamente. Desta vez, nosso código executará o Controlador primeiro, definirá o ViewBag e então o renderizará usando o código View. A seguir será a saída.

↰ Previous page Next page ↱