Sol_Ajax_Spa_MVC_Core

? Aviso importante: este repositório está arquivado

Obrigado pelo seu interesse neste projeto! A partir de 10 de agosto de 2024, decidimos arquivar este repositório. O que isto significa?

• Nenhum novo desenvolvimento: não desenvolveremos ativamente novos recursos nem corrigiremos problemas.
• Somente leitura: o repositório agora é somente leitura. Você ainda pode cloná-lo, mas nenhuma alteração adicional será aceita.
• Soluções alternativas: se você estiver procurando soluções alternativas ou projetos semelhantes, considere explorar o seguinte link: Artigo médio: Transformando aplicativos ASP.NET Core MVC em aplicativos de página única usando AppRun

Aplicativo de página única no núcleo Asp.net (Spa MVC Core)

Melhor abordagem para transformar um aplicativo ASP.NET Core em um aplicativo de página única usando a metodologia Ajax. O lema principal é reduzir o esforço do desenvolvedor ao trabalhar na criação de um SPA e melhorar o desempenho da aplicação Web tanto no servidor quanto no cliente.

Ponto-chave

• Não há necessidade de escrever código Jquery para criar aplicativos de página única.
• A biblioteca Ajax Spa possui função ajax embutida que será chamada automaticamente.
• Use o roteamento padrão do lado do servidor.
• O desenvolvedor também pode usar outra estrutura javascript lado a lado.

Observação

Esta biblioteca será aplicada na solução Asp.net core 3.1 a 6.0.

Configurar

Etapa 1:

Instale o seguinte pacote nuget em sua solução.

Usando o gerenciador de pacotes Nuget:

 PM> Install-Package AjaxSpaMvcCore -Version 1.0.1

Usando .Net CLI:

 > dotnet add package AjaxSpaMvcCore --version 1.0.1

Etapa 2:

Vá para o arquivo Startup.cs , adicione o seguinte middleware no método Configure .

 app . UseAjaxSpa ( ) ;

Etapa 3:

Adicione a referência auxiliar da tag spa Ajax no arquivo _ViewImports.cshtml dentro da pasta View.

 @addTagHelper * , AjaxSpaMvcCore

Nota: Construa a solução.

Etapa 4:

Vá para o arquivo _Layout.cshtml e faça o seguinte processo.

1. Adicione a seguinte referência do lado do cliente antes da tag body de fechamento

 < script src =" ~/AjaxSpaResource/js/core.js " > </ script >
< script src =" ~/AjaxSpaResource/js/spa.js " > </ script >

2. Substitua o método RenderBody() pelo seguinte auxiliar de tag ajax spa, como este

< main role = " main " class = " pb-3 " >
    @* @RenderBody() *@
    < ajax-spa render-body = " @RenderBody() " ></ ajax-spa >
 </ main >

Etapa 5:

Aplique a página de layout usando o método de extensão ApplyLayoutAsync() no arquivo _ViewStart.cshtml .

 @ using AjaxSpaMvcCore
@{
    // Layout = "_Layout";
    Layout = await Context . Request . ApplyLayoutAsync ( " ~/Views/Shared/_Layout.cshtml " );
}

Crie a solução e inicie o aplicativo web no navegador. Você notará que as visualizações do seu filho não são atualizadas no navegador.

Convertemos toda a solução MVC principal do Asp.net em aplicativo de página única usando esta biblioteca.