MVC Framework - Guia rápido

o Model-View-Controller (MVC) é um padrão de arquitetura que separa um aplicativo em três componentes lógicos principais: o model, a visualização e o controlador. Cada um desses componentes é construído para lidar com aspectos específicos de desenvolvimento de um aplicativo. MVC é uma das estruturas de desenvolvimento da web padrão da indústria mais frequentemente usadas para criar projetos escaláveis e extensíveis.

Componentes MVC

A seguir estão os componentes do MVC -

Modelo

O componente Model corresponde a todas as lógicas relacionadas aos dados com as quais o usuário trabalha. Isso pode representar os dados que estão sendo transferidos entre os componentes View e Controller ou quaisquer outros dados relacionados à lógica de negócios. Por exemplo, um objeto Cliente irá recuperar as informações do cliente do banco de dados, manipulá-las e atualizá-las de volta no banco de dados ou usá-las para renderizar dados.

Visão

O componente View é usado para toda a lógica da IU do aplicativo. Por exemplo, a visualização do Cliente incluirá todos os componentes da IU, como caixas de texto, menus suspensos etc. com os quais o usuário final interage.

Controlador

Os controladores atuam como uma interface entre os componentes Model e View para processar toda a lógica de negócios e solicitações de entrada, manipular dados usando o componente Model e interagir com as Views para renderizar a saída final. Por exemplo, o controlador do Cliente tratará de todas as interações e entradas da Visão do Cliente e atualizará o banco de dados usando o Modelo do Cliente. O mesmo controlador será usado para visualizar os dados do cliente.

ASP.NET MVC

ASP.NET oferece suporte a três modelos de desenvolvimento principais: páginas da Web, formulários da Web e MVC (Model View Controller). A estrutura ASP.NET MVC é uma estrutura de apresentação leve e altamente testável que é integrada aos recursos ASP.NET existentes, como páginas mestras, autenticação, etc. No .NET, essa estrutura é definida no assembly System.Web.Mvc. A versão mais recente do MVC Framework é 5.0. Usamos o Visual Studio para criar aplicativos ASP.NET MVC que podem ser adicionados como um modelo no Visual Studio.

Recursos da ASP.NET MVC

ASP.NET MVC fornece os seguintes recursos -

Ideal para desenvolver aplicativos complexos, mas leves.
Fornece uma estrutura extensível e conectável, que pode ser facilmente substituída e personalizada. Por exemplo, se você não deseja usar o Razor embutido ou o ASPX View Engine, você pode usar qualquer outro mecanismo de visualização de terceiros ou até mesmo personalizar os existentes.
Utiliza o design baseado em componentes do aplicativo, dividindo-o logicamente em componentes de modelo, visualização e controlador. Isso permite que os desenvolvedores gerenciem a complexidade de projetos de grande escala e trabalhem em componentes individuais.
A estrutura MVC aprimora o desenvolvimento orientado a teste e testabilidade do aplicativo, uma vez que todos os componentes podem ser projetados com base em interface e testados usando objetos simulados. Portanto, o ASP.NET MVC Framework é ideal para projetos com uma grande equipe de desenvolvedores da web.
Suporta todas as vastas funcionalidades ASP.NET existentes, como Autorização e Autenticação, Páginas Mestras, Vinculação de Dados, Controles de Usuário, Associações, Roteamento ASP.NET, etc.
Não usa o conceito de estado de exibição (que está presente no ASP.NET). Isso ajuda na construção de aplicativos, que são leves e fornecem controle total aos desenvolvedores.

Portanto, você pode considerar o MVC Framework como uma importante estrutura construída em cima do ASP.NET, fornecendo um grande conjunto de funcionalidades adicionais com foco no desenvolvimento e teste baseados em componentes.

No último capítulo, estudamos o fluxo da arquitetura de alto nível do MVC Framework. Agora vamos dar uma olhada em como a execução de um aplicativo MVC ocorre quando há uma determinada solicitação do cliente. O diagrama a seguir ilustra o fluxo.

Diagrama de Fluxo MVC

Etapas do Fluxo

Step 1 - O navegador do cliente envia a solicitação ao aplicativo MVC.

Step 2 - Global.ascx recebe essa solicitação e executa o roteamento com base na URL da solicitação de entrada usando os objetos RouteTable, RouteData, UrlRoutingModule e MvcRouteHandler.

Step 3 - Esta operação de roteamento chama o controlador apropriado e o executa usando o objeto IControllerFactory e o método Execute do objeto MvcHandler.

Step 4 - O controlador processa os dados usando o modelo e invoca o método apropriado usando o objeto ControllerActionInvoker

Step 5 - O Model processado é então passado para a View, que por sua vez renderiza a saída final.

MVC e ASP.NET Web Forms são modelos de desenvolvimento inter-relacionados, embora diferentes, dependendo dos requisitos do aplicativo e de outros fatores. Em um alto nível, você pode considerar que MVC é uma estrutura de aplicativo da web avançada e sofisticada projetada com a separação de interesses e testabilidade em mente. Ambas as estruturas têm suas vantagens e desvantagens, dependendo de requisitos específicos. Este conceito pode ser visualizado usando o seguinte diagrama -

Diagrama MVC e ASP.NET

Tabela de comparação

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.

Agora que já criamos um aplicativo MVC de amostra, vamos entender a estrutura de pastas de um projeto MVC. Vamos criar um novo projeto MVC para aprender isso.

No Visual Studio, abra Arquivo → Novo → Projeto e selecione Aplicativo ASP.NET MVC. Nomeie comoMVCFolderDemo.

Clique OK. Na próxima janela, selecione Aplicativo da Internet como o Modelo de Projeto e clique em OK.

Isso criará um aplicativo MVC de amostra, conforme mostrado na captura de tela a seguir.

Note- Os arquivos presentes neste projeto estão saindo do modelo padrão que selecionamos. Isso pode mudar ligeiramente de acordo com as diferentes versões.

Pasta de controladores

Esta pasta conterá todas as classes de controladores. MVC requer que o nome de todos os arquivos do controlador termine com Controller.

Em nosso exemplo, a pasta Controllers contém dois arquivos de classe: AccountController e HomeController.

Pasta de Modelos

Esta pasta conterá todas as classes de modelo, que são usadas para trabalhar nos dados do aplicativo.

Em nosso exemplo, a pasta Modelos contém AccountModels. Você pode abrir e examinar o código neste arquivo para ver como o modelo de dados é criado para gerenciar contas em nosso exemplo.

Pasta de visualizações

Esta pasta armazena os arquivos HTML relacionados à exibição do aplicativo e à interface do usuário. Ele contém uma pasta para cada controlador.

Em nosso exemplo, você verá três subpastas em Visualizações, nomeadamente Conta, Página Inicial e Compartilhada, que contém arquivos html específicos para aquela área de visualização.

App_Start Folder

Esta pasta contém todos os arquivos que são necessários durante o carregamento do aplicativo.

Por exemplo, o arquivo RouteConfig é usado para rotear a URL de entrada para o controlador e ação corretos.

Pasta de Conteúdo

Esta pasta contém todos os arquivos estáticos, como css, imagens, ícones, etc.

O arquivo Site.css dentro desta pasta é o estilo padrão que o aplicativo aplica.

Pasta de Scripts

Esta pasta armazena todos os arquivos JS no projeto. Por padrão, o Visual Studio adiciona MVC, jQuery e outras bibliotecas JS padrão.

O componente 'Model' é responsável por gerenciar os dados da aplicação. Ele responde à solicitação da visualização e também às instruções do controlador para se atualizar.

As classes de modelo podem ser criadas manualmente ou geradas a partir de entidades de banco de dados. Veremos muitos exemplos para a criação manual de modelos nos próximos capítulos. Portanto, neste capítulo, tentaremos a outra opção, ou seja, gerar a partir do banco de dados para que você tenha experiência prática em ambos os métodos.

Criar Entidades de Banco de Dados

Conecte-se ao SQL Server e crie um novo banco de dados.

Agora execute as seguintes consultas para criar novas tabelas.

CREATE TABLE [dbo].[Student]( 
   [StudentID]      INT           IDENTITY (1,1) NOT NULL, 
   [LastName]       NVARCHAR (50) NULL, 
   [FirstName]      NVARCHAR (50) NULL, 
   [EnrollmentDate] DATETIME      NULL, 
   PRIMARY KEY CLUSTERED ([StudentID] ASC) 
)  

CREATE TABLE [dbo].[Course]( 
   [CourseID] INT           IDENTITY (1,1) NOT NULL, 
   [Title]    NVARCHAR (50) NULL, 
   [Credits]  INT           NULL, 
   PRIMARY KEY CLUSTERED ([CourseID] ASC) 
)  

CREATE TABLE [dbo].[Enrollment]( 
   [EnrollmentID] INT IDENTITY (1,1) NOT NULL, 
   [Grade]        DECIMAL(3,2) NULL, 
   [CourseID]     INT NOT NULL, 
   [StudentID]    INT NOT NULL, 
   PRIMARY KEY CLUSTERED ([EnrollmentID] ASC), 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Course_CourseID] FOREIGN KEY ([CourseID]) 
   REFERENCES [dbo].[Course]([CourseID]) ON DELETE CASCADE, 
      CONSTRAINT [FK_dbo.Enrollment_dbo.Student_StudentID] FOREIGN KEY ([StudentID]) 
   REFERENCES [dbo].[Student]([StudentID]) ON DELETE CASCADE 
)

Gerar modelos usando entidades de banco de dados

Depois de criar o banco de dados e configurar as tabelas, você pode prosseguir e criar um novo aplicativo vazio MVC. Clique com o botão direito na pasta Modelos em seu projeto e selecione Adicionar → Novo Item. Em seguida, selecione ADO.NET Entity Data Model.

No próximo assistente, escolha Gerar do banco de dados e clique em Avançar. Defina a conexão com seu banco de dados SQL.

Selecione seu banco de dados e clique em Testar Conexão. Uma tela semelhante à seguinte se seguirá. Clique em Avançar.

Selecione tabelas, exibições e procedimentos e funções armazenados. Clique em Concluir. Você verá a Model View criada conforme mostrado na imagem a seguir.

As operações acima criariam automaticamente um arquivo de modelo para todas as entidades do banco de dados. Por exemplo, a tabela Student que criamos resultará em um arquivo de modelo Student.cs com o seguinte código -

namespace MvcModelExample.Models { 
   using System; 
   using System.Collections.Generic; 
     
   public partial class Student { 
      
      public Student() { 
         this.Enrollments = new HashSet(); 
      } 
     
      public int StudentID { get; set; } 
      public string LastName { get; set; } 
      public string FirstName { get; set; } 
      public Nullable EnrollmentDate { get; set; } 
      public virtual ICollection Enrollments { get; set; } 
   } 
}

Os controladores Asp.net MVC são responsáveis por controlar o fluxo de execução da aplicação. Quando você faz uma solicitação (significa solicitar uma página) para o aplicativo MVC, um controlador é responsável por retornar a resposta a essa solicitação. O controlador pode realizar uma ou mais ações. A ação do controlador pode retornar diferentes tipos de resultados de ação para uma solicitação específica.

O Controlador é responsável por controlar a lógica da aplicação e atua como o coordenador entre a Visualização e o Modelo. O Controlador recebe uma entrada dos usuários através da Visualização, então processa os dados do usuário com a ajuda do Modelo e passa os resultados de volta para a Visualização.

Crie um controlador

Para criar um controlador -

Step 1 - Crie um aplicativo vazio MVC e clique com o botão direito do mouse na pasta Controlador em seu aplicativo MVC.

Step 2- Selecione a opção de menu Adicionar → Controlador. Após a seleção, a caixa de diálogo Adicionar controlador é exibida. Nomeie o controlador comoDemoController.

Um arquivo de classe Controller será criado conforme mostrado na imagem a seguir.

Crie um controlador com IController

No MVC Framework, as classes de controlador devem implementar a interface IController do namespace System.Web.Mvc.

public interface IController {
   void Execute(RequestContext requestContext);
}

Esta é uma interface muito simples. O único método, Execute, é chamado quando uma solicitação é direcionada à classe do controlador. O MVC Framework sabe qual classe de controlador foi direcionada em uma solicitação, lendo o valor da propriedade do controlador gerada pelos dados de roteamento.

Step 1- Adicione um novo arquivo de classe e nomeie-o como DemoCustomController. Agora modifique esta classe para herdar a interface IController.

Step 2 - Copie o seguinte código dentro desta classe.

public class DemoCustomController:IController { 
   
   public void Execute(System.Web.Routing.RequestContext requestContext) { 
      var controller = (string)requestContext.RouteData.Values["controller"]; 
      var action = (string)requestContext.RouteData.Values["action"]; 
      requestContext.HttpContext.Response.Write( 
      string.Format("Controller: {0}, Action: {1}", controller, action)); 
   } 
}

Step 3 - Execute o aplicativo e você receberá a seguinte saída.

Conforme visto nos capítulos introdutórios iniciais, View é o componente envolvido com a interface de usuário do aplicativo. Essas visualizações são geralmente vinculadas aos dados do modelo e têm extensões como html, aspx, cshtml, vbhtml, etc. Em nosso primeiro aplicativo MVC, usamos Visualizações com controlador para exibir dados para o usuário final. Para renderizar esse conteúdo estático e dinâmico para o navegador, MVC Framework utiliza View Engines. View Engines são basicamente implementação de sintaxe de marcação, que são responsáveis por renderizar o HTML final para o navegador.

MVC Framework vem com dois motores de visualização integrados -

Razor Engine- Razor é uma sintaxe de marcação que habilita o código C # ou VB do lado do servidor nas páginas da web. Este código do lado do servidor pode ser usado para criar conteúdo dinâmico quando a página da web está sendo carregada. Razor é um motor avançado em comparação com o motor ASPX e foi lançado nas versões posteriores do MVC.

ASPX Engine- ASPX ou o mecanismo de formulários da Web é o mecanismo de visualização padrão incluído no MVC Framework desde o início. Escrever um código com esse mecanismo é semelhante a escrever um código em ASP.NET Web Forms.

A seguir estão pequenos trechos de código comparando o Razor e o motor ASPX.

Navalha

@Html.ActionLink("Create New", "UserAdd")

ASPX

<% Html.ActionLink("SignUp", "SignUp") %>

Destes dois, o Razor é um View Engine avançado, pois vem com sintaxe compacta, abordagens de desenvolvimento orientadas a testes e melhores recursos de segurança. Usaremos o mecanismo Razor em todos os nossos exemplos, visto que é o mecanismo de exibição mais usado.

Esses View Engines podem ser codificados e implementados nos seguintes dois tipos -

Fortemente tipado
Tipo dinâmico

Essas abordagens são semelhantes à vinculação inicial e à vinculação tardia, respectivamente, nas quais os modelos serão vinculados ao modo de exibição de forma forte ou dinâmica.

Vistas fortemente digitadas

Para entender esse conceito, vamos criar um aplicativo MVC de amostra (siga as etapas nos capítulos anteriores) e adicionar um arquivo de classe Controller chamado ViewDemoController.

Agora, copie o seguinte código no arquivo do controlador -

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

namespace ViewsInMVC.Controllers { 
   
   public class ViewDemoController : Controller { 
      
      public class Blog { 
         public string Name; 
         public string URL; 
      }  
      
      private readonly List topBlogs = new List { 
         new Blog { Name = "Joe Delage", URL = "http://tutorialspoint/joe/"}, 
         new Blog {Name = "Mark Dsouza", URL = "http://tutorialspoint/mark"}, 
         new Blog {Name = "Michael Shawn", URL = "http://tutorialspoint/michael"} 
      };  
      
      public ActionResult StonglyTypedIndex() { 
         return View(topBlogs); 
      }  
      
      public ActionResult IndexNotStonglyTyped() { 
         return View(topBlogs); 
      }   
   } 
}

No código acima, temos dois métodos de ação definidos: StronglyTypedIndex e IndexNotStonglyTyped. Agora vamos adicionar visualizações para esses métodos de ação.

Clique com o botão direito no método de ação StonglyTypedIndex e clique em Adicionar Visualização. Na próxima janela, marque a caixa de seleção 'Criar uma visualização fortemente tipada'. Isso também habilitará as opções de modelo de Classe de modelo e Scaffold. Selecione a opção Lista do modelo de andaime. Clique em Adicionar.

Um arquivo de visualização semelhante à imagem a seguir será criado. Como você pode notar, ele incluiu a classe de modelo Blog do ViewDemoController no topo. Você também poderá usar o IntelliSense em seu código com essa abordagem.

Visualizações dinâmicas digitadas

Para criar visualizações dinâmicas digitadas, clique com o botão direito na ação IndexNotStonglyTyped e clique em Adicionar Visualização.

Desta vez, não marque a caixa de seleção 'Criar uma visualização fortemente tipada'.

A visualização resultante terá o seguinte código -

@model dynamic 
            
@{ 
   ViewBag.Title = "IndexNotStonglyTyped"; 
}

<h2>Index Not Stongly Typed</h2>  
<p> 
   <ul> 
      
      @foreach (var blog in Model) { 
         <li> 
            <a href = "@blog.URL">@blog.Name</a> 
         </li>    
      } 
   
   </ul> 
</p>

Como você pode ver no código acima, desta vez ele não adicionou o modelo Blog à Visualização como no caso anterior. Além disso, você não seria capaz de usar o IntelliSense desta vez porque desta vez a vinculação será feita em tempo de execução.

Visualizações fortemente tipadas são consideradas uma abordagem melhor, pois já sabemos quais dados estão sendo passados como o Modelo, ao contrário de Visualizações tipadas dinâmicas nas quais os dados são vinculados no tempo de execução e podem levar a erros de tempo de execução, se algo mudar no modelo vinculado.

Layouts são usados em MVC para fornecer uma aparência consistente em todas as páginas de nosso aplicativo. É o mesmo que definir as páginas mestras, mas o MVC fornece mais algumas funcionalidades.

Crie layouts MVC

Step 1 - Crie um aplicativo MVC de amostra com um aplicativo da Internet como modelo e crie uma pasta de conteúdo no diretório raiz do aplicativo da web.

Step 2- Crie um arquivo de folha de estilo denominado MyStyleSheet.css na pasta CONTENT. Este arquivo CSS conterá todas as classes CSS necessárias para um design de página de aplicativo da web consistente.

Step 3 - Crie uma pasta compartilhada na pasta Exibir.

Step 4- Crie um arquivo MasterLayout.cshtml na pasta Compartilhada. O arquivo MasterLayout.cshtml representa o layout de cada página do aplicativo. Clique com o botão direito na pasta Compartilhada no Gerenciador de Soluções, vá para Adicionar item e clique em Exibir. Copie o seguinte código de layout.

Código de Layout

<!DOCTYPE html> 

<html lang = "en"> 
   <head> 
      <meta charset = "utf-8" /> 
      <title>@ViewBag.Title - Tutorial Point</title> 
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon" />
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")" />
   </head> 
   
   <body> 
      <header> 
         
         <div class = "content-wrapper"> 
            <div class = "float-left"> 
               <p class = "site-title"> 
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p> 
            </div> 
            
            <div class = "float-right">
               <nav> 
                  <ul id = "menu"> 
                     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul> 
               </nav> 
            </div> 
         </div> 
      
      </header>
      <div id = "body"> 
         @RenderSection("featured", required: false) 
         <section class = "content-wrapper main-content clear-fix"> 
            @RenderBody() 
         </section> 
      </div>
      
      <footer>
         <div class = "content-wrapper">
            <div class = "float-left"> 
               <p>© @DateTime.Now.Year - Tutorial Point</p> 
            </div> 
         </div> 
      </footer>
   
   </body>
</html>

Neste layout, estamos usando um método auxiliar HTML e alguns outros métodos definidos pelo sistema; portanto, vamos examinar esses métodos um por um.

Url.Content()- Este método especifica o caminho de qualquer arquivo que estamos usando em nosso código View. Ele pega o caminho virtual como entrada e retorna o caminho absoluto.
Html.ActionLink()- Este método renderiza links HTML que vinculam a ação de algum controlador. O primeiro parâmetro especifica o nome de exibição, o segundo parâmetro especifica o nome da Ação e o terceiro parâmetro especifica o nome do Controlador.
RenderSection() - Especifica o nome da seção que desejamos exibir naquele local no modelo.
RenderBody() - Renderiza o corpo real da Visualização associada.

Step 5 - Por fim, abra o arquivo _ViewStart.cshtml dentro da pasta Views e adicione o seguinte código -

@{ 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}

Se o arquivo não estiver presente, você pode criar o arquivo com este nome.

Step 6 - Execute o aplicativo agora para ver a página inicial modificada.

O Roteamento ASP.NET MVC permite o uso de URLs que são descritivos das ações do usuário e são mais facilmente compreendidos pelos usuários. Ao mesmo tempo, o Roteamento pode ser usado para ocultar dados que não se destinam a serem exibidos ao usuário final.

Por exemplo, em um aplicativo que não usa roteamento, o usuário verá a URL como http: //myapplication/Users.aspx? Id = 1, que corresponderia ao arquivo Users.aspx dentro do caminho de myapplication e envio de ID como 1 Geralmente, não gostaríamos de mostrar esses nomes de arquivo ao usuário final.

Para lidar com URLs MVC, a plataforma ASP.NET usa o sistema de roteamento, que permite criar qualquer padrão de URLs que desejar e expressá-los de maneira clara e concisa. Cada rota em MVC contém um padrão de URL específico. Este padrão de URL é comparado ao URL de solicitação de entrada e se a URL corresponder a esse padrão, ele será usado pelo mecanismo de roteamento para processar a solicitação.

Formato de URL de roteamento MVC

Para entender o roteamento MVC, considere o seguinte URL -

http://servername/Products/Phones

No URL acima, Produtos é o primeiro segmento e Telefone é o segundo segmento, que pode ser expresso no seguinte formato -

{controller}/{action}

A estrutura MVC considera automaticamente o primeiro segmento como o nome do Controlador e o segundo segmento como uma das ações dentro desse Controlador.

Note- Se o nome do seu controlador for ProductsController, você só mencionaria Produtos na URL de roteamento. A estrutura MVC entende automaticamente o sufixo do controlador.

Crie uma rota simples

As rotas são definidas no arquivo RouteConfig.cs que está presente na pasta do projeto App_Start.

Você verá o seguinte código dentro deste arquivo -

public class RouteConfig { 
   
   public static void RegisterRoutes(RouteCollection routes) { 
      routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
      
      routes.MapRoute( 
         name: "Default", 
         url: "{controller}/{action}/{id}", 
         defaults: new { controller = "Home", action = "Index", 
            id = UrlParameter.Optional } 
      ); 
   } 
}

Este método RegisterRoutes é chamado pelo Global.ascx quando o aplicativo é iniciado. O método Application_Start em Global.ascx chama esta função MapRoute que define o Controller padrão e sua ação (método dentro da classe Controller).

Para modificar o mapeamento padrão acima conforme nosso exemplo, altere a seguinte linha de código -

defaults: new { controller = "Products", action = "Phones", id = UrlParameter.Optional }

Esta configuração escolherá o ProductsController e chamará o método Phone dentro dele. Da mesma forma, se você tiver outro método, como Eletrônicos dentro de ProductsController, o URL para ele seria -

http://servername/Products/Electronics

Na ASP.NET MVC, os controladores definem métodos de ação e esses métodos de ação geralmente têm uma relação um-para-um com os controles da IU, como clicar em um botão ou link, etc. Por exemplo, em um de nossos exemplos anteriores, o UserController métodos contidos na classe UserAdd, UserDelete, etc.

No entanto, muitas vezes gostaríamos de realizar alguma ação antes ou depois de uma operação específica. Para atingir essa funcionalidade, a ASP.NET MVC fornece um recurso para adicionar comportamentos pré e pós-ação nos métodos de ação do controlador.

Tipos de Filtros

A estrutura ASP.NET MVC suporta os seguintes filtros de ação -

Action Filters- Filtros de ação são usados para implementar lógica que é executada antes e depois de uma ação do controlador ser executada. Veremos os Filtros de ação em detalhes neste capítulo.
Authorization Filters - Filtros de autorização são usados para implementar autenticação e autorização para ações do controlador.
Result Filters- Os filtros de resultados contêm lógica que é executada antes e depois que um resultado de visualização é executado. Por exemplo, você pode querer modificar o resultado de uma visualização antes que ela seja renderizada para o navegador.
Exception Filters- Filtros de exceção são o último tipo de filtro a ser executado. Você pode usar um filtro de exceção para tratar os erros levantados pelas ações do controlador ou pelos resultados da ação do controlador. Você também pode usar filtros de exceção para registrar erros.

Os filtros de ação são um dos filtros mais comumente usados para realizar processamento de dados adicional, ou manipular os valores de retorno ou cancelar a execução da ação ou modificar a estrutura da visualização em tempo de execução.

Filtros de ação

Filtros de ação são atributos adicionais que podem ser aplicados a uma seção do controlador ou a todo o controlador para modificar a maneira como uma ação é executada. Esses atributos são classes .NET especiais derivadas de System.Attribute que podem ser anexadas a classes, métodos, propriedades e campos.

ASP.NET MVC fornece os seguintes filtros de ação -

Output Cache - Este filtro de ação armazena em cache a saída de uma ação do controlador por um período de tempo especificado.
Handle Error - Este filtro de ação lida com erros levantados quando uma ação do controlador é executada.
Authorize - Este filtro de ação permite restringir o acesso a um determinado usuário ou função.

Agora, veremos o exemplo de código para aplicar esses filtros em um controlador de exemplo ActionFilterDemoController. (ActionFilterDemoController é usado apenas como exemplo. Você pode usar esses filtros em qualquer um dos seus controladores.)

Cache de saída

Example - Especifica o valor de retorno a ser armazenado em cache por 10 segundos.

public class ActionFilterDemoController : Controller { 
   [HttpGet] 
   OutputCache(Duration = 10)] 
   
   public string Index() { 
      return DateTime.Now.ToString("T");  
   } 
}

Tratamento de erro

Example - Redireciona o aplicativo para uma página de erro personalizada quando um erro é acionado pelo controlador.

[HandleError] 
public class ActionFilterDemoController : Controller { 
   
   public ActionResult Index() { 
      throw new NullReferenceException(); 
   }  
   
   public ActionResult About() { 
      return View(); 
   } 
}

Com o código acima, se ocorrer algum erro durante a execução da ação, ele encontrará uma visualização chamada Erro na pasta Visualizações e renderizará essa página para o usuário.

Autorizar

Example - Permitir que apenas usuários autorizados façam login no aplicativo.

public class ActionFilterDemoController: Controller { 
   [Authorize] 
   
   public ActionResult Index() { 
      ViewBag.Message = "This can be viewed only by authenticated users only"; 
      return View(); 
   }  
   
   [Authorize(Roles="admin")] 
   public ActionResult AdminIndex() { 
      ViewBag.Message = "This can be viewed only by users in Admin role only"; 
      return View(); 
   } 
}

Com o código acima, se você tentar acessar o aplicativo sem fazer login, um erro semelhante ao mostrado na imagem a seguir será gerado.

No primeiro capítulo, aprendemos como os controladores e as visualizações interagem no MVC. Neste tutorial, vamos dar um passo à frente e aprender como usar modelos e criar um aplicativo avançado para criar, editar, excluir. e visualizar a lista de usuários em nosso aplicativo.

Crie um aplicativo MVC avançado

Step 1- Selecione Arquivo → Novo → Projeto → Aplicativo da Web ASP.NET MVC. Nomeie-o como AdvancedMVCApplication. Clique OK. Na próxima janela, selecione Template como Internet Application e View Engine como Razor. Observe que, desta vez, estamos usando um modelo em vez de um aplicativo vazio.

Isso criará um novo projeto de solução, conforme mostrado na captura de tela a seguir. Como estamos usando o tema ASP.NET padrão, ele vem com visualizações, controladores, modelos e outros arquivos de amostra.

Step 2 - Construa a solução e execute o aplicativo para ver sua saída padrão, conforme mostrado na captura de tela a seguir.

Step 3- Adicionar um novo modelo que definirá a estrutura de dados dos usuários. Clique com o botão direito na pasta Modelos e clique em Adicionar → Classe. Nomeie como UserModel e clique em Adicionar.

Step 4 - Copie o código a seguir no UserModel.cs recém-criado.

using System; 
using System.ComponentModel; 
using System.ComponentModel.DataAnnotations; 
using System.Web.Mvc.Html;  

namespace AdvancedMVCApplication.Models { 
   public class UserModels { 
   
      [Required] 
      public int Id { get; set; } 
      [DisplayName("First Name")] 
      [Required(ErrorMessage = "First name is required")] 
      public string FirstName { get; set; }  
      [Required] 
      public string LastName { get; set; } 
         
      public string Address { get; set; } 
         
      [Required] 
      [StringLength(50)] 
      public string Email { get; set; } 
         
      [DataType(DataType.Date)] 
      public DateTime DOB { get; set; } 
          
      [Range(100,1000000)] 
      public decimal Salary { get; set; } 
   } 
}

No código acima, especificamos todos os parâmetros que o modelo do usuário possui, seus tipos de dados e validações como campos obrigatórios e comprimento.

Agora que temos nosso modelo de usuário pronto para armazenar os dados, criaremos um arquivo de classe Users.cs, que conterá métodos para visualizar usuários, adicionar, editar e excluir usuários.

Step 5- Clique com o botão direito em Modelos e clique em Adicionar → Classe. Nomeie-o como usuários. Isso criará a classe users.cs dentro de Models. Copie o código a seguir na classe users.cs.

using System; 
using System.Collections.Generic; 
using System.EnterpriseServices;  

namespace AdvancedMVCApplication.Models { 
   
   public class Users { 
      public List UserList = new List();  
      
      //action to get user details 
      public UserModels GetUser(int id) { 
         UserModels usrMdl = null;  
         
         foreach (UserModels um in UserList) 
            
            if (um.Id == id) 
               usrMdl = um; 
               return usrMdl; 
      }  
      
      //action to create new user 
      public void CreateUser(UserModels userModel) { 
         UserList.Add(userModel); 
      }  
      
      //action to udpate existing user 
      public void UpdateUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               usrlst.Address = userModel.Address; 
               usrlst.DOB = userModel.DOB; 
               usrlst.Email = userModel.Email; 
               usrlst.FirstName = userModel.FirstName; 
               usrlst.LastName = userModel.LastName; 
               usrlst.Salary = userModel.Salary; 
               break; 
            } 
         } 
      }  
      
      //action to delete exising user 
      public void DeleteUser(UserModels userModel) { 
         
         foreach (UserModels usrlst in UserList) { 
            
            if (usrlst.Id == userModel.Id) { 
               UserList.Remove(usrlst); 
               break; 
            } 
         } 
      } 
   } 
}

Assim que tivermos nosso UserModel.cs e Users.cs, adicionaremos Views ao nosso modelo para visualizar usuários, adicionar, editar e excluir usuários. Primeiro, vamos criar uma visão para criar um usuário.

Step 6 - Clique com o botão direito na pasta Visualizações e clique em Adicionar → Visualizar.

Step 7 - Na próxima janela, selecione View Name como UserAdd, View Engine as Razor e selecione a caixa de seleção Create a fortemente tipado view.

Step 8- Clique em Adicionar. Isso criará o seguinte código CSHML por padrão, conforme mostrado abaixo -

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "UserAdd"; 
}

<h2>UserAdd</h2>  

@using (Html.BeginForm()) { 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </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>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Create" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   
   @Scripts.Render("~/bundles/jqueryval") 
}

Como você pode ver, esta visão contém detalhes de visão de todos os atributos dos campos, incluindo suas mensagens de validação, rótulos, etc. Esta visão terá a seguinte aparência em nosso aplicativo final.

Semelhante ao UserAdd, agora vamos adicionar mais quatro visualizações fornecidas abaixo com o código fornecido -

Index.cshtml

Esta visualização exibirá todos os usuários presentes em nosso sistema na página de índice.

@model IEnumerable<AdvancedMVCApplication.Models.UserModels>  

@{ 
   ViewBag.Title = "Index"; 
}  

<h2>Index</h2>  

<p> 
   @Html.ActionLink("Create New", "UserAdd") 
</p>  

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Address) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Email) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.DOB) 
      </th> 
   
      <th> 
         @Html.DisplayNameFor(model => model.Salary) 
      </th> 
   
      <th></th>  
   </tr>  
   
   @foreach (var item in Model) { 
      <tr> 
         <td>
            @Html.DisplayFor(modelItem => item.FirstName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.LastName) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Address) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Email) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.DOB) 
         </td> 
    
         <td> 
            @Html.DisplayFor(modelItem => item.Salary) 
         </td> 
    
         <td> 
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }) | 
            @Html.ActionLink("Details", "Details", new { id = item.Id }) | 
            @Html.ActionLink("Delete", "Delete", new { id = item.Id }) 
         </td> 
      </tr> 
   } 
</table>

Esta visualização terá a seguinte aparência em nosso aplicativo final.

Details.cshtml

Esta visualização exibirá os detalhes de um usuário específico quando clicamos no registro do usuário.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Details"; 
}  

<h2>Details</h2>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName)
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
    
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
  
</fieldset>  
<p>
   @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) | 
   @Html.ActionLink("Back to List", "Index") 
</p>

Esta visualização terá a seguinte aparência em nosso aplicativo final.

Edit.cshtml

Esta visualização exibirá o formulário de edição para editar os detalhes de um usuário existente.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Edit"; 
}  

<h2>Edit</h2>  
@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   @Html.ValidationSummary(true)  
   
   <fieldset> 
      <legend>UserModels</legend>  
      @Html.HiddenFor(model => model.Id)  
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.FirstName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.FirstName) 
         @Html.ValidationMessageFor(model => model.FirstName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.LastName) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.LastName) 
         @Html.ValidationMessageFor(model => model.LastName) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Address) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Address) 
         @Html.ValidationMessageFor(model => model.Address) 
      </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>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.DOB)
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.DOB) 
         @Html.ValidationMessageFor(model => model.DOB) 
      </div>  
      
      <div class = "editor-label"> 
         @Html.LabelFor(model => model.Salary) 
      </div> 
   
      <div class = "editor-field"> 
         @Html.EditorFor(model => model.Salary) 
         @Html.ValidationMessageFor(model => model.Salary) 
      </div>  
      
      <p> 
         <input type = "submit" value = "Save" /> 
      </p> 
   </fieldset> 
}  
<div> 
   @Html.ActionLink("Back to List", "Index") 
</div>  

@section Scripts { 
   @Scripts.Render("~/bundles/jqueryval") 
}

Esta visualização terá a seguinte aparência em nosso aplicativo.

Delete.cshtml

Esta visualização exibirá o formulário para excluir o usuário existente.

@model AdvancedMVCApplication.Models.UserModels  

@{ 
   ViewBag.Title = "Delete"; 
} 

<h2>Delete</h2>  
<h3>Are you sure you want to delete this?</h3>  
<fieldset> 
   <legend>UserModels</legend>  
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.FirstName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.FirstName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.LastName) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.LastName) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Address) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Address) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Email) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Email) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.DOB) 
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.DOB) 
   </div>  
   
   <div class = "display-label"> 
      @Html.DisplayNameFor(model => model.Salary)
   </div> 
  
   <div class = "display-field"> 
      @Html.DisplayFor(model => model.Salary) 
   </div> 
</fieldset>  

@using (Html.BeginForm()) { 
   @Html.AntiForgeryToken() 
   
   <p> 
      <input type = "submit" value = "Delete" /> | 
      @Html.ActionLink("Back to List", "Index") 
   </p> 
}

Esta visualização terá a seguinte aparência em nosso aplicativo final.

Step 9- Já adicionamos os modelos e visualizações em nosso aplicativo. Agora, finalmente, adicionaremos um controlador para nossa visualização. Clique com o botão direito na pasta Controladores e clique em Adicionar → Controlador. Nomeie-o como UserController.

Por padrão, sua classe Controller será criada com o seguinte código -

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

namespace AdvancedMVCApplication.Controllers {  
   
   public class UserController : Controller { 
      private static Users _users = new Users(); 
      
      public ActionResult Index() { 
         return View(_users.UserList); 
      } 
   } 
}

No código acima, o método Index será usado ao renderizar a lista de usuários na página Index.

Step 10 - Clique com o botão direito no método Índice e selecione Criar Visualização para criar uma Visualização para nossa página de Índice (que listará todos os usuários e fornecerá opções para criar novos usuários).

Step 11- Agora adicione o seguinte código no UserController.cs. Neste código, estamos criando métodos de ação para diferentes ações do usuário e retornando visualizações correspondentes que criamos anteriormente.

Vamos adicionar dois métodos para cada operação: GET e POST. HttpGet será usado ao buscar os dados e processá-los. HttpPost será usado para criar / atualizar dados. Por exemplo, quando estamos adicionando um novo usuário, precisaremos de um formulário para adicionar um usuário, que é uma operação GET. Assim que preenchermos o formulário e enviarmos esses valores, precisaremos do método POST.

//Action for Index View  
public ActionResult Index() { 
   return View(_users.UserList); 
}  

//Action for UserAdd View 
[HttpGet] 
public ActionResult UserAdd() { 
   return View(); 
}  

[HttpPost] 
public ActionResult UserAdd(UserModels userModel) { 
   _users.CreateUser(userModel); 
   return View("Index", _users.UserList); 
}  

//Action for Details View 
[HttpGet] 
public ActionResult Details(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Details() { 
   return View("Index", _users.UserList); 
}  

//Action for Edit View 
[HttpGet] 
public ActionResult Edit(int id) { 
   return View(_users.UserList.FirstOrDefault(x=>x.Id==id)); 
} 

[HttpPost] 
public ActionResult Edit(UserModels userModel) { 
   _users.UpdateUser(userModel); 
   return View("Index", _users.UserList); 
} 
        
//Action for Delete View 
[HttpGet] 
public ActionResult Delete(int id) { 
   return View(_users.UserList.FirstOrDefault(x => x.Id == id)); 
}  

[HttpPost] 
public ActionResult Delete(UserModels userModel) { 
   _users.DeleteUser(userModel); 
   return View("Index", _users.UserList); 
} sers.UserList);

Step 12 - A última coisa a fazer é acessar o arquivo RouteConfig.cs na pasta App_Start e alterar o controlador padrão para User.

defaults: new { controller = "User", action = "Index", id = UrlParameter.Optional }

Isso é tudo de que precisamos para colocar nosso aplicativo avançado em funcionamento.

Step 13- Agora execute o aplicativo. Você poderá ver um aplicativo conforme mostrado na captura de tela a seguir. Você pode executar todas as funcionalidades de adição, visualização, edição e exclusão de usuários, como vimos nas imagens anteriores.

Como você deve saber, Ajax é uma abreviatura para Asynchronous JavaScript and XML. O MVC Framework contém suporte integrado para Ajax discreto. Você pode usar os métodos auxiliares para definir seus recursos Ajax sem adicionar um código em todas as visualizações. Este recurso no MVC é baseado nos recursos do jQuery.

Para habilitar o suporte AJAX discreto no aplicativo MVC, abra o arquivo Web.Config e defina a propriedade UnobtrusiveJavaScriptEnabled dentro da seção appSettings usando o código a seguir. Se a chave já estiver presente em seu aplicativo, você pode ignorar esta etapa.

<add key = "UnobtrusiveJavaScriptEnabled" value = "true" />

Depois disso, abra o arquivo de layout comum _Layout.cshtmlarquivo localizado na pasta Views / Shared. Vamos adicionar referências às bibliotecas jQuery aqui usando o seguinte código -

<script src = "~/Scripts/jquery-ui-1.8.24.min.js" type = "text/javascript">
</script> 

<script src = "~/Scripts/jquery.unobtrusive-ajax.min.js" type = "text/javascript">
</script>

Crie um aplicativo Ajax discreto

No exemplo a seguir, criaremos um formulário que exibirá a lista de usuários do sistema. Colocaremos um menu suspenso com três opções: Admin, Normal e Convidado. Quando você seleciona um desses valores, ele exibe a lista de usuários pertencentes a esta categoria usando uma configuração AJAX discreta.

Step 1 - Crie um arquivo de modelo Model.cs e copie o código a seguir.

using System;  

namespace MVCAjaxSupportExample.Models { 
   
   public class User { 
      public int UserId { get; set; } 
      public string FirstName { get; set; } 
      public string LastName { get; set; } 
      public DateTime BirthDate { get; set; } 
      public Role Role { get; set; } 
   }  
   
   public enum Role { 
      Admin, 
      Normal, 
      Guest 
   } 
}

Step 2 - Crie um arquivo de controlador chamado UserController.cs e crie dois métodos de ação dentro dele usando o código a seguir.

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

namespace MVCAjaxSupportExample.Controllers {
   
   public class UserController : Controller { 
      
      private readonly User[] userData = 
      { 
         new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin}, 
         new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin}, 
         new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal}, 
         new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal}, 
         new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest} 
      }; 
      
      public ActionResult Index() { 
         return View(userData); 
      } 
      
      public PartialViewResult GetUserData(string selectedRole = "All") { 
         IEnumerable data = userData; 
         
         if (selectedRole != "All") { 
            var selected = (Role) Enum.Parse(typeof (Role), selectedRole); 
            data = userData.Where(p => p.Role == selected); 
         } 
         
         return PartialView(data); 
      }  
      
      public ActionResult GetUser(string selectedRole = "All") { 
         return View((object) selectedRole); 
      } 
   } 
}

Step 3- Agora crie uma visualização parcial chamada GetUserData com o código a seguir. Esta visualização será usada para renderizar a lista de usuários com base na função selecionada na lista suspensa.

@model IEnumerable<MVCAjaxSupportExample.Models.User> 

<table> 
   <tr> 
      <th> 
         @Html.DisplayNameFor(model => model.FirstName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.LastName) 
      </th> 
      
      <th> 
         @Html.DisplayNameFor(model => model.BirthDate) 
      </th> 
      <th></th> 
   </tr>  

   @foreach (var item in Model) { 
   <tr> 
      <td> 
         @Html.DisplayFor(modelItem => item.FirstName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.LastName) 
      </td> 
      
      <td> 
         @Html.DisplayFor(modelItem => item.BirthDate) 
      </td> 
      
      <td> 
         
      </td> 
   </tr> 
}  
</table>

Step 4- Agora crie um View GetUser com o seguinte código. Esta visualização obterá de forma assíncrona os dados da ação GetUserData do controlador criado anteriormente.

@using MVCAjaxSupportExample.Models 
@model string 

@{ 
ViewBag.Title = "GetUser"; 

AjaxOptions ajaxOpts = new AjaxOptions { 
UpdateTargetId = "tableBody" 
}; 
} 

<h2>Get User</h2> 
<table> 
   <thead>
      <tr>
         <th>First</th>
         <th>Last</th>
         <th>Role</th>
      </tr>
   </thead> 
   
   <tbody id="tableBody"> 
      @Html.Action("GetUserData", new {selectedRole = Model }) 
   </tbody> 
</table>  

@using (Ajax.BeginForm("GetUser", ajaxOpts)) { 
   <div> 
      @Html.DropDownList("selectedRole", new SelectList( 
      new [] {"All"}.Concat(Enum.GetNames(typeof(Role))))) 
      <button type="submit">Submit</button> 
   </div> 
}

Step 5 - Finalmente, altere as entradas Route.config para iniciar o Controlador de usuário.

defaults: new { controller = "User", action = "GetUser", id = UrlParameter.Optional }

Step 6 - Execute o aplicativo que se parecerá com a imagem a seguir.

Se você selecionar Admin na lista suspensa, ele irá buscar todos os usuários com o tipo Admin. Isso está acontecendo via AJAX e não recarrega a página inteira.

Bundling e Minificationsão duas técnicas de melhoria de desempenho que melhoram o tempo de carregamento da solicitação do aplicativo. A maioria dos principais navegadores atuais limita o número de conexões simultâneas por nome de host a seis. Isso significa que, ao mesmo tempo, todas as solicitações adicionais serão enfileiradas pelo navegador.

Habilitar agrupamento e minimização

Para habilitar o empacotamento e a minificação em seu aplicativo MVC, abra o arquivo Web.config dentro de sua solução. Neste arquivo, procure as configurações de compilação em system.web -

<system.web>
   <compilation debug = "true" />
</system.web>

Por padrão, você verá o parâmetro debug definido como true, o que significa que o empacotamento e a minificação estão desabilitados. Defina este parâmetro como falso.

Pacote

Para melhorar o desempenho do aplicativo, a ASP.NET MVC fornece um recurso embutido para agrupar vários arquivos em um único arquivo, que por sua vez melhora o desempenho de carregamento da página devido a menos solicitações HTTP.

O empacotamento é um grupo lógico simples de arquivos que podem ser referenciados por um nome exclusivo e carregados com uma única solicitação HTTP.

Por padrão, o BundleConfig do aplicativo MVC (localizado dentro da pasta App_Start) vem com o seguinte código -

public static void RegisterBundles(BundleCollection bundles) { 
   
   // Following is the sample code to bundle all the css files in the project         
   
   // The code to bundle other javascript files will also be similar to this 
  
   bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( 
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css",  
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 
}

O código acima basicamente agrupa todos os arquivos CSS presentes na pasta Conteúdo / temas / base em um único arquivo.

Minificação

A minimização é outra técnica de melhoria de desempenho em que otimiza o código javascript, css, encurtando os nomes das variáveis, removendo espaços em branco desnecessários, quebras de linha, comentários, etc.

Minificação com Visual Studio e extensão Web Essentials

Para usar esta opção, você terá que primeiro instalar a Extensão Web Essentials em seu Visual Studio. Depois disso, quando você clicar com o botão direito em qualquer arquivo css ou javascript, será exibida a opção de criar uma versão reduzida desse arquivo.

Portanto, se você tiver um arquivo css denominado Site.css, ele criará sua versão minimizada como Site.min.css.

Agora, da próxima vez que seu aplicativo for executado no navegador, ele agrupará e minimizará todos os arquivos css e js, melhorando assim o desempenho do aplicativo.

No ASP.NET, o tratamento de erros é feito usando a abordagem padrão try catch ou usando eventos de aplicativo. ASP.NET MVC vem com suporte embutido para tratamento de exceções usando um recurso conhecido como filtros de exceção. Vamos aprender duas abordagens aqui: uma com a substituição do método onException e outra definindo os filtros HandleError.

Substituir Método OnException

Essa abordagem é usada quando queremos tratar todas as exceções entre os métodos de ação no nível do controlador.

Para entender essa abordagem, crie um aplicativo MVC (siga as etapas abordadas nos capítulos anteriores). Agora adicione uma nova classe Controller e adicione o seguinte código que sobrescreve o método onException e gera explicitamente um erro em nosso método Action -

Agora vamos criar uma visão comum chamada Errorque será mostrado ao usuário quando ocorrer alguma exceção no aplicativo. Dentro da pasta Views, crie uma nova pasta chamada Shared e adicione uma nova View chamada Error.

Copie o seguinte código dentro do Error.cshtml recém-criado -

Se você tentar executar o aplicativo agora, terá o seguinte resultado. O código acima renderiza a Visualização de Erro quando ocorre alguma exceção em qualquer um dos métodos de ação dentro deste controlador.

A vantagem dessa abordagem é que várias ações no mesmo controlador podem compartilhar essa lógica de tratamento de erros. No entanto, a desvantagem é que não podemos usar a mesma lógica de tratamento de erros em vários controladores.

Atributo HandleError

O atributo HandleError é um dos filtros de ação que estudamos no capítulo Filtros e Filtros de ação. O HandleErrorAttribute é a implementação padrão de IExceptionFilter. Este filtro lida com todas as exceções levantadas por ações, filtros e visualizações do controlador.

Para usar esse recurso, primeiro ative a seção customErrors em web.config. Abra o web.config e coloque o seguinte código dentro de system.web e defina seu valor como On.

<customErrors mode = "On"/>

Já temos a Error View criada dentro da pasta Shared em Views. Desta vez, altere o código deste arquivo de visualização para o seguinte, para digitá-lo fortemente com o modelo HandleErrorInfo (que está presente em System.Web.MVC).

@model System.Web.Mvc.HandleErrorInfo 

@{ 
Layout = null; 
} 
  
<!DOCTYPE html> 
<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Error</title> 
   </head> 
   
   <body> 
      <h2> 
         Sorry, an error occurred while processing your request.  
      </h2> 
      <h2>Exception details</h2> 
      
      <p> 
         Controller: @Model.ControllerName <br> 
         Action: @Model.ActionName 
         Exception: @Model.Exception 
      </p> 
   
   </body> 
</html>

Agora coloque o seguinte código em seu arquivo de controlador que especifica o atributo [HandleError] no arquivo de controlador.

using System; 
using System.Data.Common; 
using System.Web.Mvc;  

namespace ExceptionHandlingMVC.Controllers { 
   [HandleError] 
   public class ExceptionHandlingController : Controller { 
      
      public ActionResult TestMethod() { 
         throw new Exception("Test Exception"); 
         return View(); 
      } 
   } 
}

Se você tentar executar o aplicativo agora, obterá um erro semelhante ao mostrado na imagem a seguir.

Como você pode ver, desta vez o erro contém mais informações sobre o controlador e os detalhes relacionados à ação. Dessa forma, o HandleError pode ser usado em qualquer nível e entre controladores para lidar com esses erros.

↰ Previous page