Oktatóanyag: A C# és a ASP.NET Core használatának első lépései a Visual Studióban

Ebben az oktatóanyagban a ASP.NET Core használatával történő C#-fejlesztéshez egy C# ASP.NET Core-webalkalmazást hoz létre a Visual Studióban.

Ez az oktatóanyag bemutatja, hogyan:

• Visual Studio-projekt létrehozása
• C# ASP.NET Core-webalkalmazás létrehozása
• A webalkalmazás módosítása
• Az IDE funkcióinak felfedezése
• A webalkalmazás futtatása

Előfeltételek

Az oktatóanyag elvégzéséhez a következőkre van szüksége:

• A Visual Studio telepítve van. Az ingyenes verzióért látogasson el a Visual Studio letöltési oldalára. További információ a Visual Studio legújabb kiadására való frissítésről: Visual Studio-frissítések.
• A ASP.NET és webfejlesztési munkaelem telepítve. Ha ellenőrizni vagy telepíteni szeretné ezt a számítási feladatot a Visual Studióban, válassza az Eszközök>Eszközök és szolgáltatások lekéréselehetőséget. A további információkért lásd: Számítási feladatok vagy egyes összetevők módosítása.

Projekt létrehozása

Először létre kell hoznia egy ASP.NET Core-projektet. A projekttípus tartalmazza az összes sablonfájlt, amely egy teljesen működőképes webhely létrehozásához szükséges.

1. A kezdési ablakban válassza Új projekt létrehozásalehetőséget.

   

2. Az Új projekt létrehozása ablakban válassza C# a Nyelv listából. Ezután válassza Windows a Minden platform listából, és Webes a Minden projekttípus listából.

   A nyelvi, platform- és projekttípus-szűrők alkalmazása után válassza a ASP.NET Core Web App (Razor Pages) sablont, majd válassza a Továbblehetőséget.

   

3. Az Új projekt konfigurálása ablakban írja be MyCoreApp a Projekt neve mezőbe. Ezután válassza Továbblehetőséget.

   

4. A További információ ablakban ellenőrizze, hogy a .NET 9.0 megjelenik-e a Keretrendszer mezőben.

   Ebben az ablakban engedélyezheti a tárolótámogatást, és hozzáadhat hitelesítési támogatást. A Hitelesítési típus legördülő menüje a következő négy lehetőséget kínálja:

   • Nincs: Nincs hitelesítés.
   • egyéni fiókok: Ezek a hitelesítések helyi vagy Azure-alapú adatbázisban vannak tárolva.
   • Microsoft Identitásplatform: Ez a beállítás a Microsoft Entra-azonosítót vagy a Microsoft 365-öt használja a hitelesítéshez.
   • Windows: Intranetes alkalmazásokhoz használható.

   Hagyja kijelöletlenül a Tárolótámogatás engedélyezése jelölőnégyzetet, és válassza a Nincs hitelesítési típushoz.

   

5. Válassza , majd hozzon létre.

A Visual Studio megnyitja az új projektet.

A megoldás ismertetése

Ez a megoldás a Razor Page tervezési mintát követi. Ez eltér a Model-View-Controller (MVC) tervezési mintájától, mivel egyszerűbb a modell és a vezérlőkód belefoglalása a Razor-oldalon.

A megoldás bemutatása

1. A projektsablon létrehoz egy megoldást egyetlen ASP.NET Core-projekttel, amelynek neve MyCoreApp. A Megoldáskezelő lapon megtekintheti annak tartalmát.

   

2. Bontsa ki a Pages mappát.

   

3. Válassza ki az Index.cshtml fájlt, és tekintse meg a kódszerkesztőben.

   

4. Minden .cshtml-fájlhoz tartozik egy kódfájl. A kódfájl szerkesztőben való megnyitásához bontsa ki a Index.cshtml csomópontot a Megoldáskezelőben, és válassza ki a Index.cshtml.cs fájlt.

   

5. A Index.cshtml.cs fájl megtekintése a kódszerkesztőben.

   

6. A projekt tartalmaz egy wwwroot mappát, amely a webhely gyökere. Bontsa ki a mappát a tartalmának megtekintéséhez.

   

   A statikus webhelytartalmakat, például a CSS-t, a képeket és a JavaScript-kódtárakat közvetlenül a kívánt elérési utakra helyezheti.

7. A projekt olyan konfigurációs fájlokat is tartalmaz, amelyek futásidőben kezelik a webalkalmazást. Az alapértelmezett alkalmazás konfiguráció a appsettings.jsontárolódik. Ezeket a beállításokat azonban felülbírálhatja a appsettings.Development.jsonhasználatával. Bontsa ki a appsettings.json fájlt a appsettings.Development.json fájl megtekintéséhez.

   

Futtatás, hibakeresés és módosítások végrehajtása

1. Az eszköztáron válassza a https gombot az alkalmazás hibakeresési módban való létrehozásához és futtatásához. Másik lehetőségként nyomja le F5, vagy lépjen a Hibakeresési>A hibakeresés indítása a menüsávból.

   

   Jegyzet

   Előfordulhat, hogy olyan üzenet is megjelenik, amely megkérdezi, hogy el szeretne-e fogadni egy ASP.NET Core SSL-tanúsítványt. A kód webböngészőben való megtekintéséhez válassza az Igenlehetőséget, majd válassza az Igen lehetőséget, ha egy biztonsági figyelmeztetést kap. Tudjon meg többet az SSL kényszerítéséről az ASP.NET Core-ban.

2. A Visual Studio elindít egy böngészőablakot. Ezután a menüsávon Kezdőlap és Adatvédelmi lapokat kell látnia.

3. Válassza Adatvédelmi a menüsávon. A böngésző Adatvédelmi lapja megjeleníti a Privacy.cshtml fájlban beállított szöveget.

   

4. Térjen vissza a Visual Studióba, majd nyomja le Shift+F5 billentyűkombinációt a hibakeresés leállításához. Ez a művelet bezárja a projektet a böngészőablakban.

5. A Visual Studióban nyissa meg a Privacy.cshtml szerkesztésre. Ezután törölje a mondatot, Ezen az oldalon részletezheti webhelye adatvédelmi szabályzatát, és cserélje le Ez az oldal @ViewData["TimeStamp"] *mint*építés alatt áll.

   

6. Most hozzunk létre egy kódmódosítást. Válassza a Privacy.cshtml.cslehetőséget. Ezután törölje a using-irányelveket a fájl tetején az alábbi parancsikon kiválasztásával:

   Vigye az egérmutatót, vagy válasszon ki egy szürkésített using direktívát. A gyors műveletek villanykörte a kurzor alatt vagy a bal margón jelenik meg. Jelölje ki a villanykörtét, majd válassza a kibontó nyíl melletti Szükségtelen használat eltávolításaopciót.

   

   Most válassza az Előnézet módosítások gombot, hogy megtekinthesse a változásokat.

   

   Válassza a Alkalmazlehetőséget. A Visual Studio törli a szükségtelen using irányelveket a fájlból.

7. A kultúrához vagy régióhoz formázott aktuális dátumhoz hozzon létre egy karakterláncot a DateTime.ToString metódussal.

   • A metódus első argumentuma határozza meg a dátum megjelenítésének módját. Ez a példa a formátumjelölőt (d) használja, amely a rövid dátumformátumot jelöli.
   • A második argumentum a CultureInfo objektum, amely meghatározza a dátumhoz tartozó kultúrát vagy régiót. A második argumentum többek között meghatározza a dátumban szereplő szavak nyelvét és a használt elválasztójelek típusát.

   Módosítsa a OnGet() metódus törzsét a következő kódra:

   public void OnGet()
   {
      string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
      ViewData["TimeStamp"] = dateTime;
   }
   

8. Figyelje meg, hogy a következő using irányelv automatikusan bekerül a fájl elejére:

   using System.Globalization;
   

   System.Globalization tartalmazza a CultureInfo osztályt.

9. A projekt webböngészőben való megnyitásához nyomja le F5.

10. A webhely tetején válassza Adatvédelmi a módosítások megtekintéséhez.

    

11. Zárja be a webböngészőt, és a hibakeresés leállításához nyomja le Shift+F5.

A kezdőlap módosítása

1. A(z) Megoldáskezelő-ban bontsa ki a(z) Lapok mappát, majd válassza a Index.cshtml.

   

   Az Index.cshtml fájl megfelel a webalkalmazás Kezdőlap lapjának, amely egy webböngészőben fut.

   

   A kódszerkesztőben a Kezdőlap lapon megjelenő szöveg HTML-kódja jelenik meg.

   

2. Cserélje le az Üdvözlő szöveget Hello World!

   

3. Válassza https, vagy nyomja le a Ctrl+F5 billentyűkombinációt az alkalmazás futtatásához és webböngészőben való megnyitásához.

   

4. A webböngészőben az új módosítások a Kezdőlap lapon láthatók.

   

5. Zárja be a webböngészőt, nyomja le a Shift+F5 billentyűkombinációt a hibakeresés leállításához és a projekt mentéséhez. Most már bezárhatja a Visual Studiót.

Következő lépések

Gratulálunk az oktatóanyag elvégzéséhez! Reméljük, hogy örömét lelte a C#, a ASP.NET Core és a Visual Studio IDE megismerésében. Ha többet szeretne megtudni egy webalkalmazás vagy webhely C# és ASP.NET használatával történő létrehozásáról, folytassa az alábbi oktatóanyaggal:

Razor Pages-webalkalmazás létrehozása ASP.NET Core

Vagy megtudhatja, hogyan tárolózhatja a webalkalmazást a Dockerrel:

Konténer eszközök a Visual Studio-ban

Kapcsolódó hivatkozások

• Publikálja webalkalmazását az Azure App Service-re a Visual Studio használatával
• A Visual Studio IDE és a Szerkesztő személyre szabása