- Razor Pages ofereix un model centrat en la pàgina sobre ASP.NET Core, compartint el mateix potent motor d'enrutament, middleware i vista Razor que MVC.
- Els projectes reals se centren al voltant de la carpeta Pages, wwwroot, appsettings.json i Program.cs, on es configuren els serveis, el middleware i la gestió d'errors.
- Eines com Visual Studio, Rider i VS Code simplifiquen el desenvolupament, la depuració, la navegació i la refactorització de models, vistes i sintaxi de Razor.
- ASP.NET Core simplifica la publicació d'aplicacions Razor a IIS, Azure, servidors personalitzats o Docker, permetent implementacions escalables i repetibles.
Si proveu d'Angular amb ASP.NET Web API i comenceu a gaudir de C# al backend, Razor Pages és una manera increïblement natural de portar aquesta alegria al frontend sense abandonar els vostres coneixements previs de JavaScript. En comptes de saltar de cap a una pila d'IU completament diferent, podeu quedar-vos en el territori familiar d'ASP.NET Core, utilitzar la sintaxi de Razor per a la renderització del costat del servidor i, tot i així, escampar JavaScript allà on tingui sentit.
ASP.NET Core Razor Pages és l'enfocament recomanat per Microsoft per crear aplicacions web modernes a .NET, i ofereix un model net basat en pàgines que es troba a sobre del potent pipeline d'ASP.NET Core. És multiplataforma, funciona perfectament amb eines com ara Visual Studio, Visual Studio Code i JetBrains Rider, i s'escala des de prototips petits fins a aplicacions de producció amb bases de dades. En aquesta guia, explicarem com s'estructuren les aplicacions Razor Pages del món real, com Program.cs connecta tot, com funcionen els fitxers estàtics i la configuració, i com entren en joc les eines, la depuració i el desplegament.
Què és realment ASP.NET Core Razor Pages (i com es compara amb MVC)
Razor Pages és una característica d'ASP.NET Core que permet crear aplicacions web al voltant de pàgines en lloc de controladors, oferint un model mental més senzill i alhora utilitzant el mateix marc de treball subjacent que MVC. Sota el capó, s'executa sobre la mateixa pila d'enrutament, middleware i allotjament que els controladors i les vistes, però cada pàgina gestiona el seu propi comportament en lloc de centralitzar-ho tot en classes de controlador.
Cada pàgina Razor normalment es representa mitjançant un parell de fitxers: un fitxer .cshtml per al marcatge i un fitxer .cshtml.cs per a la lògica C# de la pàgina. El fitxer .cshtml conté el vostre HTML barrejat amb la sintaxi de Razor (per exemple, bucles, condicions i auxiliars HTML), mentre que el fitxer .cshtml.cs del codi subjacent conté mètodes de controlador com ara OnGet, OnPost, propietats del model i qualsevol lògica necessària per renderitzar o processar la pàgina.
Abans de Razor Pages, el patró dominant a ASP.NET era MVC, on els controladors retornaven vistes i encaminaven totes les sol·licituds a través de mètodes d'acció. MVC encara és totalment compatible i és un patró provat amb convencions fortes, però per a molts escenaris és més ràpid raonar sobre Razor Pages perquè el codi que carrega i processa una pàgina es troba físicament al costat del seu marcatge en lloc d'estar enterrat en un controlador separat.
Tot i que Razor Pages desplaça el focus lluny dels controladors, encara utilitza el mateix motor de vista Razor i admet tant HtmlHelpers com TagHelpers per generar HTML dinàmic. Els TagHelpers són particularment útils: amplien les etiquetes HTML normals amb atributs com ara asp-action, asp-controller or asp-route de manera que podeu connectar enllaços i formularis a punts finals del backend sense escriure un munt d'URL manuals o JavaScript en línia.
Per als desenvolupadors que ja coneixen JavaScript i han viscut amb frameworks SPA, Razor Pages ofereix un enfocament híbrid: HTML renderitzat pel servidor per a primeres càrregues ràpides i SEO, amb JavaScript i biblioteques front-end superposades on calgui. No esteu lligat a cap framework JS en particular i podeu mantenir el backend i el frontend a la mateixa solució, cosa que simplifica el desplegament i el manteniment.
Creació i execució d'una aplicació web Razor Pages
Quan creeu un nou projecte ASP.NET Core Razor Pages amb Visual Studio, Visual Studio Code o Rider, la plantilla connecta una aplicació mínima però completa, que inclou Program.cs, la carpeta Pages, els fitxers de configuració i l'arrel web estàtica. De fàbrica, obtens un lloc web funcional que pots executar immediatament i després evolucionar cap a quelcom més sofisticat, com ara un catàleg de pel·lícules o qualsevol altra aplicació basada en dades.
Abans d'executar l'aplicació amb HTTPS, ASP.NET Core ha d'utilitzar un certificat de desenvolupament en què el sistema operatiu confiï, i la primera vegada que executeu el projecte, és possible que vegeu un quadre de diàleg que us demani que hi confieu. Quan aparegui aquest quadre de diàleg, trieu Sí indica que esteu d'acord amb l'ús del certificat de desenvolupament local per al trànsit HTTPS a la vostra màquina, que és necessari per a les proves correctes dels punts finals segurs sense avisos del navegador.
A Windows, macOS o Linux, el Visual Studio Code permet iniciar l'aplicació prement Ctrl+F5 per executar-lo sense depurar, o utilitzant el panell Executa i depura si voleu connectar el depurador. La primera vegada, el codi VS us pot demanar que seleccioneu un tipus de depurador com ara C#, .NET 5+ i .NET Core o una configuració de llançament específica com ara C#: RazorPagesMovie [https] RazorPagesMovie depenent de la versió de .NET i de la configuració de l'espai de treball.
Després d'iniciar-lo, el navegador predeterminat s'obre en una URL similar a https://localhost:<port>, on el port s'assigna o s'especifica aleatòriament a launchSettings.json i esteu mirant la pàgina d'inici que serveix l'aplicació Razor Pages. En algunes plantilles, en comptes d'això, veureu http://localhost:5001 o un altre port; la clau és que localhost indica que és la vostra pròpia màquina i no un host extern.
Un cop hàgiu acabat les proves, podeu aturar l'aplicació en execució des del vostre IDE: al Visual Studio Code, utilitzeu el menú Executa i seleccioneu Atura la depuració o premeu Canviar+F5, mentre que al Visual Studio per a Mac feu servir Depurar > Atura la depuració. Això tanca la instància del servidor web Kestrel que s'ha iniciat per a la sessió i allibera el port per a altres execucions.
Comprensió de l'estructura del projecte: carpetes i fitxers clau
Les aplicacions Razor Pages del món real s'organitzen al voltant d'unes quantes carpetes i fitxers de configuració importants amb els quals treballareu constantment: Pages, wwwroot, appsettings.json i Program.cs (i en versions anteriors, Startup.cs). És crucial sentir-se còmode navegant per aquestes peces perquè pràcticament tots els tutorials, mostres o projectes de producció utilitzen les mateixes convencions.
La carpeta Pages és el cor d'un projecte Razor Pages, que conté totes les pàgines .cshtml i els seus fitxers de codi subjacent .cshtml.cs juntament amb el disseny compartit i les vistes parcials. Cada parell de pàgines (per exemple, Index.cshtml i Index.cshtml.cs) representa un punt final que es pot cridar a l'aplicació i fitxers especials que comencen amb un subratllat, com ara _Layout.cshtml, defineixen contingut reutilitzat en moltes pàgines.
El fitxer de disseny, normalment anomenat _Layout.cshtml, defineix el Chrome del vostre lloc web, com ara la barra de navegació superior, el peu de pàgina i l'avís de drets d'autor, i proporciona un lloc per renderitzar el cos de cada pàgina individual. Quan canvieu el disseny, afecteu instantàniament l'aspecte de totes les pàgines Razor que l'utilitzen, de manera que és el lloc ideal per editar menús, marca i scripts o estils compartits.
La carpeta wwwroot és l'arrel web designada on resideixen els recursos estàtics, com ara CSS, JavaScript, imatges i fitxers HTML sense format que el servidor web pot servir directament. Qualsevol cosa que es col·loqui sota wwwroot és accessible des del navegador (segons la configuració del fitxer estàtic), cosa que el converteix en la llar adequada per a fulls d'estil del lloc, biblioteques del costat del client i imatges a les quals es fa referència al vostre marcatge.
La configuració de l'aplicació normalment s'emmagatzema a appsettings.json (i variants específiques de l'entorn com ara appsettings.Development.json), que contenen paràmetres com ara cadenes de connexió i indicadors de funcions. El sistema de configuració d'ASP.NET Core carrega aquests fitxers i els combina amb variables d'entorn i altres proveïdors, cosa que simplifica la vinculació de seccions a classes d'opcions amb tipatge fort al codi.
Program.cs i el pipeline d'ASP.NET Core
El fitxer Program.cs conté el punt d'entrada per a l'aplicació Razor Pages i defineix com es configuren l'amfitrió web, els serveis i el pipeline de middleware abans que la primera sol·licitud arribi al vostre lloc. A les versions modernes d'ASP.NET Core, Program.cs utilitza un model d'"allotjament mínim" simplificat amb una instrucció de nivell superior que crea un WebApplicationBuilder i després construeix i configura el WebApplication instància.
El patró típic de Program.cs comença amb var builder = WebApplication.CreateBuilder(args); que configura un host amb valors per defecte comuns i després crida builder.Services.AddRazorPages(); per registrar les pàgines Razor amb el contenidor d'injecció de dependències. Després de configurar els serveis, var app = builder.Build(); crea l'objecte d'aplicació que després connecteu amb middleware i punts finals.
La gestió d'errors i el comportament de seguretat depenen en gran mesura de l'entorn, per la qual cosa normalment es veu una comprovació d'entorn com ara if (!app.Environment.IsDevelopment()) per habilitar funcions de nivell de producció. Dins d'aquesta condició normalment trobareu app.UseExceptionHandler("/Error"); que envia els errors no gestionats a una pàgina d'errors dedicada, i app.UseHsts(); que activa HTTP Strict Transport Security (HSTS) per indicar als navegadors que sempre utilitzin HTTPS per al vostre domini.
El pipeline de middleware s'assembla amb crides com ara app.UseHttpsRedirection();, app.UseStaticFiles(); or app.MapStaticAssets();, app.UseRouting(); i opcionalment app.UseAuthorization(); seguit de mapatges de punts finals. La redirecció HTTPS força l'actualització de les sol·licituds HTTP insegures a HTTPS, el middleware de fitxers estàtics (o el mapatge d'actius estàtics més nou a .NET 9) permet la publicació directa de recursos des de wwwroot i l'encaminament decideix quin punt final gestiona cada URL entrant.
Finalment, les pàgines Razor estan connectades a l'encaminament amb app.MapRazorPages(); opcionalment encadenat amb .WithStaticAssets(); en plantilles més noves per integrar l'optimització d'actius estàtics i l'aplicació s'inicia utilitzant app.Run();. En aquest punt, l'aplicació escolta els ports configurats i el servidor Kestrel està llest per gestionar sol·licituds reals, ja sigui localment en desenvolupament o en un amfitrió de producció com ara IIS, Azure App Service o Docker.
Pàgines Razor, models i models de visualització en aplicacions reals
Darrere de cada aplicació no trivial de Razor Pages hi ha un conjunt de models de domini i models de vista que representen les vostres dades i com es mostren, tant si gestioneu un catàleg de pel·lícules, un blog o un tauler de control empresarial. Els models normalment es mapen estretament a les entitats de la base de dades, mentre que els models de vista es poden adaptar a una pantalla o flux d'usuari específic, combinant diversos models o valors preformatats per facilitar la renderització.
Un flux de treball de desenvolupament comú és començar amb classes C# simples que utilitzen camps i signatures de mètodes com a stubs, i evolucionar-les gradualment en models adequats amb propietats encapsulades, atributs de validació i lògica. Eines com JetBrains Rider faciliten aquesta evolució amb accions d'intenció que converteixen automàticament els camps en propietats, creen tipus derivats per a jerarquies d'herència i apliquen altres refactoritzacions a mesura que refineu el model d'objectes.
L'herència i les interfícies ajuden a imposar una estructura coherent per als vostres models, alineant-los amb les regles de negoci reals i permetent el polimorfisme on certs comportaments són compartits però les implementacions difereixen. Per exemple, podríeu tenir una base ContentItem tipus amb derivades Movie, Series i Documentary classes, cadascuna amb diferències subtils però un contracte comú que s'utilitza a tota l'aplicació.
Un cop els models estiguin al seu lloc, les pàgines Razor o les vistes MVC es poden crear manualment o mitjançant eines de bastida que generen pàgines per llistar, crear, editar i suprimir entitats. L'estructuració accelera dràsticament el desenvolupament inicial i garanteix que l'encaminament, l'enllaç de models i la validació estiguin connectats correctament, que després podeu personalitzar amb el vostre propi marcatge i estil.
La sintaxi de Razor utilitzada als fitxers .cshtml es combina perfectament amb models amb tipatge fort i models de vista, cosa que permet mostrar dades, executar bucles i condicionals, i generar enllaços i formularis mitjançant HtmlHelpers o TagHelpers sense perdre la seguretat en temps de compilació. Aquesta barreja de C# i marcatge manté molta lògica del costat del servidor, però tot i així produeix un HTML net al navegador que funciona bé amb CSS i JavaScript.
Treballar amb la sintaxi de Razor, TagHelpers i navegació a Rider
La sintaxi de Razor és una capa lleugera sobre HTML que s'activa sempre que @ apareix el símbol, cosa que facilita la inserció d'expressions, sentències o crides auxiliars de C# directament al marcatge. Podeu recórrer llistes d'elements, mostrar o ocultar elements segons condicions o mostrar valors i dates formatades sense escriure un llenguatge de plantilla separat ni escampar JavaScript per tot arreu.
Els TagHelpers semblen una extensió natural de l'HTML on els atributs especials que comencen per asp- modificar el comportament o la sortida dels elements, sovint substituint mètodes HtmlHelper més antics i eliminant la necessitat d'enllaços d'script en línia. Alguns exemples inclouen asp-action i asp-controller per encaminar etiquetes d'àncora i formularis a accions específiques o encaminar atributs com ara asp-route-id per passar paràmetres de manera neta a les URL.
El suport per a l'IDE és molt important quan s'està treballant en HTML, i Rider ofereix funcions útils com ara les rutes de navegació a la part inferior de l'editor per mostrar la ubicació actual a l'estructura del document. Les rutes de pa es poden personalitzar a Preferències o Opcions a la secció Editor, i fan que navegar per fitxers Razor llargs amb etiquetes imbricades sigui molt menys dolorós.
En els projectes MVC, Rider també entén les convencions que enllacen controladors, accions i vistes, de manera que passar el cursor per sobre dels resultats de les accions pot mostrar-vos les possibles rutes de vista i Control + Clic (o Cmd-Clic a macOS) salta directament al fitxer .cshtml corresponent. Dreceres com Ctrl + B or Cmd-B proporciona una manera ràpida de navegar per la base de codi sense haver de buscar pels exploradors de solucions.
Més enllà de les eines específiques de Razor, Rider inclou un ampli conjunt d'intencions i solucions ràpides per a HTML, CSS i JavaScript que us ajuden a escriure codi net i ben estructurat del costat del client dins del mateix IDE que el vostre backend C#. Aquesta integració estreta pot estalviar molts canvis de context a l'hora de crear una interfície d'usuari complexa i interactiva que encara depèn de vistes o pàgines de Razor renderitzades pel servidor.
Depuració de pàgines Razor i aplicacions ASP.NET Core
La depuració és una activitat diària en el desenvolupament web, i les aplicacions ASP.NET Core que executen Razor Pages no són una excepció, per la qual cosa és essencial tenir un suport de depuració sòlid a l'IDE. Tant el Visual Studio com el Rider proporcionen depuradors interactius que es poden connectar al procés de Kestrel, revisar el codi C# pas a pas, inspeccionar variables i avaluar expressions mentre l'aplicació s'està executant.
El depurador de Rider a Windows admet Edita i Continua, que permet modificar el codi mentre l'aplicació està en pausa en un punt d'interrupció i aplicar els canvis sense reiniciar tota la sessió de depuració. Aquesta capacitat de corregir petits errors o experimentar durant una execució de depuració accelera significativament la resolució de problemes, especialment en projectes grans amb temps d'inici no trivials.
La pàgina d'excepcions de desenvolupador per defecte a ASP.NET Core s'habilita automàticament quan l'entorn està definit com a Desenvolupament, i us proporciona un seguiment detallat de la pila, informació de sol·licitud i diagnòstics sempre que es produeixin excepcions no controlades. Aquesta vista és extremadament útil durant la depuració local però perillosa en producció perquè pot filtrar detalls interns sobre la vostra aplicació i l'entorn.
Per protegir la informació confidencial, els entorns de producció i de prova solen desactivar la pàgina d'excepcions del desenvolupador i, en comptes d'això, utilitzen la ruta del gestor d'excepcions configurada, sovint /Error, per mostrar una pantalla d'error fàcil d'usar mentre es registren els detalls reals al costat del servidor. Aquest comportament es controla a Program.cs mitjançant la comprovació d'entorn i les crides a UseExceptionHandler i UseHsts.
Quan les coses realment es descarrilen i els tutorials no s'adapten al vostre comportament, sovint és útil comparar el vostre projecte amb un exemple conegut com a bo proporcionat per Microsoft o altres fonts autoritzades. Molts tutorials oficials de Razor Pages publiquen un projecte de mostra complet que podeu veure o descarregar per comparar-lo amb el vostre propi codi i detectar configuracions que falten, errors tipogràfics o fitxers mal col·locats.
Publicació i implementació d'aplicacions reals d'ASP.NET Core Razor
L'enviament de l'aplicació Razor Pages és on tota l'estructura i la configuració anteriors valen la pena, perquè ASP.NET Core admet diverses opcions d'implementació que s'adapten a diferents entorns d'allotjament i fluxos de treball. Tant si preferiu IIS a Windows, contenidors de Linux a Docker o una plataforma administrada com l'Azure App Service, el procés de publicació pot ser gestionat per MSBuild i integrat a les vostres pipelines de CI/CD.
Tant el Visual Studio com el Rider ofereixen perfils de publicació que poden empaquetar la vostra aplicació i implementar-la a l'IIS mitjançant Web Deploy (MSDeploy), copiar-la a una carpeta local o de xarxa o enviar-la directament a un servidor remot mitjançant FTP, FTPS o SFTP. La creació d'un perfil de publicació codifica la configuració de desplegament de manera que les futures publicacions siguin tan senzilles com triar el perfil i fer clic en un botó o executar una ordre.
Per a escenaris de núvol, Azure App Service és un objectiu popular, i els IDE integren eines d'Azure per crear i publicar aplicacions web directament des del vostre projecte, de nou aprofitant MSBuild i MSDeploy. Aquest enfocament manté la coherència de la compilació i la implementació entre els entorns locals i de núvol i es pot automatitzar a Azure DevOps, GitHub Actions o altres sistemes de CI.
Docker és una altra opció de primera classe per a ASP.NET Core, que permet contenidoritzar l'aplicació Razor Pages perquè es pugui executar de manera predictible en qualsevol entorn que admeti contenidors. Rider i Visual Studio us poden ajudar a generar Dockerfiles i configuracions de docker-compose, permetent un flux de treball on desenvolupeu, depureu i implementeu la vostra aplicació dins de contenidors, ja sigui localment o en orquestradors com Kubernetes.
Independentment de la destinació, el pas de publicació compila el codi C#, agrupa les vistes Razor, copia els recursos estàtics i, segons la configuració, també pot generar un temps d'execució autònom perquè la màquina amfitriona no necessiti una instal·lació .NET compartida. Aquesta agrupació és el que converteix el vostre projecte de desenvolupament en un artefacte desplegable llest per a ser utilitzat per usuaris reals.
Combinant totes aquestes peces, des dels certificats de desenvolupament i Program.cs, passant per Pages i wwwroot, fins a la depuració i la publicació, Razor Pages ofereix una manera pragmàtica de crear aplicacions web ASP.NET Core del món real que siguin fàcils de mantenir, eficients i còmodes per als desenvolupadors que ja gaudeixen treballant en C# i no estan preparats per apostar completament per un marc de treball d'una sola pàgina per a cada situació.
