Egyszerű ASP.NET 4.5-ös weblap létrehozása a Visual Studio 2013 használatával

készítette : Erik Reitan

Az új webalkalmazás-fejlesztéshez a Blazort javasoljuk.

Ez az útmutató bevezetést ad a Microsoft Visual Studio 2013 és a Microsoft Visual Studio Express 2013 for Web webes fejlesztési környezetével. Ez az útmutató végigvezeti egy egyszerű ASP.NET webűrlap létrehozásán, és bemutatja az új lap létrehozásának, vezérlők hozzáadásának és kódírásának alapvető technikáit.

Az ebben az útmutatóban bemutatott feladatok a következők:

• Fájlrendszer webűrlapok alkalmazásprojekt létrehozása.
• Ismerkedés a Visual Studióval.
• ASP.NET lap létrehozása.
• Vezérlők hozzáadása.
• Eseménykezelők hozzáadása.
• Lap futtatása és tesztelése a Visual Studióból.

Előfeltételek

Az útmutató elvégzéséhez a következőkre lesz szüksége:

• Microsoft Visual Studio 2013 vagy Microsoft Visual Studio Express 2013 for Web. A .NET-keretrendszer automatikusan telepítve van.

  Megjegyzés:

  Ebben az oktatóanyag-sorozatban a Microsoft Visual Studio 2013 és a Microsoft Visual Studio Express 2013 for Web gyakran Visual Studio-nak is nevezik.

  Ha a Visual Studiót használja, ez az útmutató feltételezi, hogy a Web Development beállításgyűjteményét választotta ki a Visual Studio első indításakor. További információ : Útmutató: Webfejlesztési környezet beállításainak kiválasztása.

Webalkalmazás-projekt és lap létrehozása

Az útmutató ezen részében létrehoz egy webalkalmazás-projektet, és hozzáad hozzá egy új lapot. Emellett HTML-szöveget is hozzáadhat, és futtathatja a lapot a böngészőben.

Webalkalmazás-projekt létrehozása

1. Nyissa meg a Microsoft Visual Studiót.

2. A Fájl menüben válassza Új projektlehetőséget.
   

   Megjelenik a New project (Új projekt) párbeszédpanel.

3. Válassza ki a Sablonok ->Visual C# ->Web sablonok csoportot a bal oldalon.

4. Válassza ki a ASP.NET webalkalmazás-sablont a középső oszlopban.

5. Nevezze el a projektet BasicWebApp néven , és kattintson az OK gombra.
   

6. Ezután válassza ki a Webes űrlapok sablont, és kattintson az OK gombra a projekt létrehozásához.
   

   A Visual Studio létrehoz egy új projektet, amely a Webes űrlapok sablon alapján előre összeállított funkciókat tartalmaz. Ez nem csak egy Home.aspx lapot, egy About.aspx lapot, egy Contact.aspx lapot biztosít, hanem olyan tagsági funkciókat is tartalmaz, amelyek regisztrálják a felhasználókat, és mentik a hitelesítő adataikat, hogy bejelentkezhessenek a webhelyére. Új lap létrehozásakor a Visual Studio alapértelmezés szerint Forrás nézetben jeleníti meg a lapot, ahol megtekintheti a lap HTML-elemeit. Az alábbi ábrán az látható, hogy mit láthat a Forrás nézetben, ha létrehozott egy új, BasicWebApp.aspx nevű weblapot.
   

A Visual Studio webszerkesztő környezetének bemutatása

Mielőtt módosítaná a lapot, érdemes megismerkednie a Visual Studio fejlesztői környezetével. Az alábbi ábra a Visual Studio és a Visual Studio Express for Web alkalmazásban elérhető ablakokat és eszközöket mutatja be.

Megjegyzés:

Ez a diagram az alapértelmezett ablak- és ablakhelyeket mutatja. A Nézet menüben további ablakokat jeleníthet meg, valamint átrendezheti és átméretezheti az ablakokat a beállításoknak megfelelően. Ha már módosították az ablak elrendezését, a megjelenő elem nem fog megegyezni az ábrával.

A Visual Studio-környezet

Ismerkedés a webtervezővel

Vizsgálja meg a fenti ábrát, és egyezzen a szöveggel a következő listával, amely a leggyakrabban használt ablakokat és eszközöket ismerteti. (Itt nem minden látható ablak és eszköz szerepel, csak az előző ábrán megjelöltek.)

• Eszköztárak. Adjon meg parancsokat a szöveg formázásához, a szöveg kereséséhez és így tovább. Egyes eszköztárak csak Tervező nézetben való munka esetén érhetők el.
• Megoldáskezelő ablak. Megjeleníti a webalkalmazás fájljait és mappáit.
• Dokumentumablak. Megjeleníti azokat a dokumentumokat, amelyeken lapozott ablakokban dolgozik. A dokumentumok között a fülekre kattintva válthat.
• Tulajdonságok ablak. Lehetővé teszi a lap, a HTML-elemek, a vezérlők és más objektumok beállításainak módosítását.
• Lapfülek megtekintése. Különböző nézeteket jeleníthet meg ugyanarról a dokumentumról. A tervező nézet egy közel WYSIWYG szerkesztőfelület. A forrásnézet a lap HTML-szerkesztője. Az osztott nézet a Dokumentum Tervező és Forrás nézetét is megjeleníti. Az útmutató későbbi részében a Tervezés és a Forrás nézetekkel fog dolgozni. Ha inkább Tervező nézetben szeretné megnyitni a weblapokat, az Eszközök menüben kattintson a Beállítások gombra, válassza ki a HTML Designer csomópontot, és módosítsa a Kezdőlapok beállítását .
• Eszközkészlet. Vezérlőket és HTML-elemeket biztosít, amelyeket a lapra húzhat. Az eszközkészlet elemeit a közös függvények csoportosítják.
• S erver Explorer. Adatbázis-kapcsolatokat jelenít meg. Ha a Kiszolgálókezelő nem látható, kattintson a Nézet menü Kiszolgálókezelő parancsára.

Új ASP.NET Web Forms oldal létrehozása

Amikor új Web Forms-alkalmazást hoz létre a ASP.NET Web Application projektsablon használatával, a Visual Studio hozzáad egy Default.aspx nevű ASP.NET lapot (weblapot), valamint számos más fájlt és mappát. A Default.aspx lapot használhatja a webalkalmazás kezdőlapjaként. Az útmutató alatt azonban először egy új lapot fog létrehozni, majd azon dolgozni.

Lap hozzáadása a webalkalmazáshoz

1. Zárja be a Default.aspx oldalt. Ehhez kattintson a fájlnevet megjelenítő fülre, majd a bezárás beállításra.
2. A Megoldáskezelőben kattintson a jobb gombbal a webalkalmazás nevére (ebben az oktatóanyagban az alkalmazás neve BasicWebSite), majd kattintson az Add ->New Item (Új elem hozzáadása) elemre.
   Megjelenik az Új elem hozzáadása párbeszédpanel.
3. Válassza ki a Visual C# ->Web templates csoportot a bal oldalon. Ezután válassza a webes űrlapot a középső listából, és nevezze el FirstWebPage.aspx.
   
4. Kattintson a Hozzáadás gombra a weblap projekthez való hozzáadásához.
   A Visual Studio létrehozza az új lapot, és megnyitja.

HTML hozzáadása a laphoz

Az útmutató ezen részében statikus szöveget fog hozzáadni a laphoz.

Szöveg hozzáadása a laphoz

1. A dokumentumablak alján kattintson a Tervezés fülre a Tervező nézetre való váltáshoz.

   A Tervező nézet az aktuális lapot WYSIWYG-szerű módon jeleníti meg. Jelenleg nincs szöveg vagy vezérlőelem a lapon, így a lap üres, kivéve egy téglalapot tagoló szaggatott vonallal. Ez a téglalap egy div elemet jelöl az oldalon.

2. Kattintson a szaggatott vonallal tagolt téglalapba.

3. Írja be Welcome to Visual Web Developer, majd nyomja meg kétszer az ENTER billentyűt.

   Az alábbi ábrán a Tervező nézetben beírt szöveg látható.

   

4. Váltás Forrás nézetre.

   A Tervező nézetben való beíráskor létrehozott HTML-fájl a Forrás nézetben jelenik meg.
   

Az oldal futtatása

Mielőtt vezérlőket adna hozzá a laphoz, először futtathatja.

Az oldal futtatása

1. A Megoldáskezelőben kattintson a jobb gombbal a FirstWebPage.aspx , és válassza a Beállítás kezdőoldalként lehetőséget.

2. A lap futtatásához nyomja le a CTRL+F5 billentyűkombinációt.

   A lap megjelenik a böngészőben. Bár a létrehozott lap .aspx fájlnévkiterjesztéssel rendelkezik, jelenleg úgy fut, mint bármely HTML-oldal.

   Ha meg szeretne jeleníteni egy lapot a böngészőben, kattintson a jobb gombbal a lapra a Megoldáskezelőben , és válassza a Nézet böngészőben lehetőséget.

3. Zárja be a böngészőt a webalkalmazás leállításához.

Vezérlők hozzáadása és programozása

Ezután kiszolgálóvezérlőket fog hozzáadni a laphoz. A kiszolgálóvezérlők, például gombok, címkék, szövegdobozok és más ismerős vezérlők tipikus űrlapfeldolgozási képességeket biztosítanak a webűrlapokhoz. A vezérlőket azonban az ügyfél helyett a kiszolgálón futó kóddal is programozza.

Gombvezérlőt, Szövegdoboz vezérlőt és Címke vezérlőelemet fog hozzáadni a laphoz, és kódot kell írnia a Gomb vezérlőelem Kattintás eseményének kezeléséhez.

Vezérlők hozzáadása a laphoz

1. A Tervezés fülre kattintva váltson Tervezés nézetre.

2. Helyezze a beszúrási pontot a Welcome to Visual Web Developer szöveg végére, és nyomja le az ENTER billentyűt öt vagy több alkalommal, hogy helyet készítsen a div elem dobozában.

3. Az Eszközkészletben bontsa ki a Standard csoportot, ha még nincs kibontva.
   Előfordulhat, hogy a bal oldalon lévő Eszközkészlet ablakot ki kell bontania a megtekintéshez.

4. Húzzon egy TextBox vezérlőt a lapra, és helyezze a div elem mező közepére, amely az első sorban Welcome to Visual Web Developer.

5. Húzza a Gomb vezérlőelemet a lapra, és vigye a Szövegdoboz vezérlőelem jobb oldalára.

6. Húzza a Címke vezérlőelemet a lapra, és helyezze egy külön sorba a Gomb vezérlőelem alatt.

7. Helyezze a beszúrási pontot a Szövegdoboz vezérlőelem fölé, majd írja be a nevét: .

   Ez a statikus HTML-szöveg a TextBox vezérlőelem felirata. A statikus HTML- és kiszolgálóvezérlőket ugyanazon az oldalon keverheti. Az alábbi ábra bemutatja, hogyan jelenik meg a három vezérlő Tervező nézetben.

   

Vezérlő tulajdonságainak beállítása

A Visual Studio különböző módszereket kínál a vezérlők tulajdonságainak beállítására az oldalon. Az útmutató ezen részében a tulajdonságokat Tervező nézetben és Forrás nézetben is meg kell adnia.

Vezérlőtulajdonságok beállítása

1. Először jelenítse meg a Tulajdonságok ablakokat a Nézet menü ->Egyéb Windows ->Tulajdonságok ablakának kiválasztásával. Másik lehetőségként az F4 lehetőséget választva megjelenítheti a Tulajdonságok ablakot.

2. Jelölje ki a Gomb vezérlőelemet, majd a Tulajdonságok ablakban állítsa a Szöveg értékét megjelenítendő névre. A beírt szöveg megjelenik a tervező gombján az alábbi ábrán látható módon.

   

3. Váltás Forrás nézetre.

   A forrásnézet megjeleníti a lap HTML-címét, beleértve a Visual Studio által a kiszolgálóvezérlőkhöz létrehozott elemeket is. A vezérlők HTML-szerű szintaxissal vannak deklarálva, azzal a kivétellel, hogy a címkék az asp előtagot használják, és tartalmazzák a runat="server" attribútumot.

   A vezérlőtulajdonságok attribútumként vannak deklarálva. Például amikor a Gomb vezérlőelem Szöveg tulajdonságát állítja be, az 1. lépésben valójában a Szöveg attribútumot állította be a vezérlőelem szövegtagolásában.

   Megjegyzés:

   Az összes vezérlő egy űrlapelemen belül található, amely a runat="server" attribútummal is rendelkezik. A runat="server" attribútum és a vezérlőcímkék asp: előtagja megjelöli a vezérlőket, hogy a ASP.NET dolgozza fel őket a kiszolgálón az oldal futtatásakor. A runat="server"< és a script runat="server" elemeken kívüli> kódokat a rendszer változatlanul elküldi a böngészőnek, ezért a ASP.NET kódnak egy olyan elemen belül kell lennie, amelynek nyitó címkéje tartalmazza a <.>

4. Ezután hozzáad egy további tulajdonságot a Címke vezérlőelemhez. Helyezze a beszúrási pontot közvetlenül az asp:Label után az asp<:Címke> címkébe, majd nyomja le a SZÓKÖZ billentyűt.

   Megjelenik egy legördülő lista, amely megjeleníti a Címke vezérlőelemhez beállítható elérhető tulajdonságok listáját. Ez az IntelliSense-nek nevezett funkció segít a Forrás nézetben a kiszolgálóvezérlők, a HTML-elemek és a lap egyéb elemeinek szintaxisában. Az alábbi ábrán a Címke vezérlőelem IntelliSense legördülő listája látható.

   

5. Válassza a ForeColor lehetőséget, majd írjon be egy egyenlőségjelet.

   Az IntelliSense megjeleníti a színek listáját.

   Megjegyzés:

   Az IntelliSense legördülő lista bármikor megjeleníthető a CTRL+J billentyűkombináció lenyomásával a kód megtekintésekor.

6. Válasszon egy színt a Címke vezérlőelem szövegéhez. Ügyeljen arra, hogy olyan színt válasszon, amely elég sötét ahhoz, hogy fehér háttéren olvasson.

   A ForeColor attribútum a kiválasztott színnel fejeződik be, beleértve a záró idézőjelet is.

A gombvezérlő programozása

Ehhez az útmutatóhoz olyan kódot fog írni, amely beolvassa a felhasználó által a szövegmezőbe beírt nevet, majd megjeleníti a nevet a Címke vezérlőelemben.

Alapértelmezett gombesemény-kezelő hozzáadása

1. Váltás Tervező nézetre.

2. Kattintson duplán a Gomb vezérlőelemre.

   A Visual Studio alapértelmezés szerint egy kód mögötti fájlra vált, és létrehoz egy csontvázesemény-kezelőt a Gomb vezérlőelem alapértelmezett eseményéhez, a Click eseményhez. A kód mögötti fájl elválasztja a felhasználói felületi korrektúrát (például a HTML-t) a kiszolgáló kódjától (például C#).
   A kurzor az eseménykezelő kódjának hozzáadásához van elhelyezve.

   Megjegyzés:

   A vezérlőelemre duplán kattintva Tervező nézetben csak az egyik lehetőség az eseménykezelők létrehozására.

3. Az Button1_Click eseménykezelőbe írja be a Label1 kifejezést, majd egy pontot (.).

   Amikor beírja a címke azonosítóját (Label1) követő időszakot, a Visual Studio megjeleníti a Címke vezérlőelemhez elérhető tagok listáját az alábbi ábrán látható módon. Egy tag gyakran tulajdonság, eljárás vagy esemény.

   

4. Fejezze be a kattintási eseménykezelőt a gombhoz, hogy az az alábbi kód példában látható módon legyen olvasható.

   protected void Button1_Click(object sender, System.EventArgs e)
   {    
       Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
   }
   

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
   End Sub
   

5. Váltson vissza a HTML-markup Forrás nézet megtekintéséhez a Solution Explorer területén a FirstWebPage.aspx elemre jobb gombbal kattintva, majd válassza a Nézet lehetőséget.

6. Görgessen az asp<:Button> elemhez. Vegye figyelembe, hogy az asp<:Button> elem most már az onclick="Button1_Click" attribútummal rendelkezik.

   Ez az attribútum a gomb Kattintás eseményét az előző lépésben kódolt kezelőmetódushoz köti.

   Az eseménykezelő metódusoknak bármilyen neve lehet; a látott név a Visual Studio által létrehozott alapértelmezett név. A lényeg az, hogy a HTML-ben az OnClick attribútumhoz használt névnek meg kell egyeznie a kód mögötti kódban definiált metódus nevével.

Az oldal futtatása

Most már tesztelheti a kiszolgálóvezérlőket a lapon.

Az oldal futtatása

1. Nyomja le a CTRL+F5 billentyűkombinációt a lap böngészőben való futtatásához. Hiba esetén ellenőrizze újra a fenti lépéseket.

2. Írjon be egy nevet a szövegmezőbe, és kattintson a Megjelenítendő név gombra.

   A megadott név megjelenik a Címke vezérlőelemben. Vegye figyelembe, hogy amikor a gombra kattint, a lap megjelenik a webkiszolgálón. ASP.NET ezután újra létrehozza a lapot, futtatja a kódot (ebben az esetben a Gomb vezérlőelem Kattintás eseménykezelője fut), majd elküldi az új lapot a böngészőnek. Ha megtekinti az állapotsort a böngészőben, láthatja, hogy a lap minden alkalommal oda-vissza halad a webkiszolgálón, amikor a gombra kattint.

3. A böngészőben a lap forrásának megtekintéséhez kattintson a jobb gombbal a lapra, és válassza a Forrás megtekintése lehetőséget.

   A lap forráskódjában a HTML kiszolgálókód nélkül jelenik meg. Pontosabban, nem látja az <asp:> elemeket, amelyekkel a Forrás nézetben dolgozott. A lap futtatásakor ASP.NET feldolgozza a kiszolgálóvezérlőket, és html-elemeket jelenít meg a vezérlőt képviselő függvényeket végrehajtó lapra. Az asp<:Button> vezérlő például <input type="submit"> HTML-elemként kerül megjelenítésre.

4. Zárja be a böngészőt.

További vezérlők használata

Az útmutatónak ebben a részében a Naptár vezérlővel fog dolgozni, amely egy adott hónapban jeleníti meg a dátumokat. A Naptár vezérlőelem összetettebb vezérlő, mint a gomb, a szövegdoboz és a címke, amellyel dolgozott, és a kiszolgálóvezérlők néhány további funkcióját szemlélteti.

Ebben a szakaszban egy System.Web.UI.WebControls.Calendar vezérlőt fog hozzáadni a laphoz, és formázni fogja.

Naptár vezérlőelem hozzáadása

1. A Visual Studióban váltson Tervező nézetre.

2. Az EszközkészletStandard szakaszából húzzon egy Naptár vezérlőelemet a lapra, és húzza a többi vezérlőt tartalmazó div elem alá.

   Megjelenik a naptár intelligens címkepanelje. A panel olyan parancsokat jelenít meg, amelyek megkönnyítik a kijelölt vezérlő leggyakoribb feladatainak végrehajtását. Az alábbi ábrán a Naptár vezérlőelem látható a Tervező nézetben megjelenített módon.

   

3. Az intelligens címke panelen válassza az Automatikus formázás lehetőséget.

   Megjelenik az Automatikus formázás párbeszédpanel, amely lehetővé teszi a naptár formázási sémájának kiválasztását. Az alábbi ábrán a Naptár vezérlőelem Automatikus formázás párbeszédpanelje látható.

   

4. A Séma kiválasztása listában válassza az Egyszerű lehetőséget, majd kattintson az OK gombra.

5. Váltás Forrás nézetre.

   Megjelenik az asp<:Naptár> elem. Ez az elem sokkal hosszabb, mint a korábban létrehozott egyszerű vezérlők elemei. Olyan alelemeket is tartalmaz, mint például <a WeekEndDayStyle>, amelyek különböző formázási beállításokat jelölnek. Az alábbi ábrán a Naptár vezérlőelem látható Forrás nézetben. (A Forrás nézetben látható pontos korrektúra kissé eltérhet az ábrától.)

   

A Naptár vezérlőelem programozása

Ebben a szakaszban a Naptár vezérlőelemet programozza az aktuálisan kijelölt dátum megjelenítéséhez.

A Naptár vezérlőelem programozása

1. Tervező nézetben kattintson duplán a Naptár vezérlőelemre.

   Létrejön és megjelenik egy új eseménykezelő a FirstWebPage.aspx.cs nevű kód mögötti fájlban.

2. Fejezze be a SelectionChanged eseménykezelőt az alábbi kóddal.

   protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   {    
       Label1.Text = Calendar1.SelectedDate.ToLongDateString();
   }
   

   Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Calendar1.SelectedDate.ToLongDateString()
   End Sub
   

   A fenti kód a címkevezérlő szövegét a naptár vezérlőelem kijelölt dátumára állítja.

Az oldal futtatása

Most már tesztelheti a naptárt.

Az oldal futtatása

1. Nyomja le a CTRL+F5 billentyűkombinációt a lap böngészőben való futtatásához.

2. Kattintson egy dátumra a naptárban.

   A rákattintott dátum megjelenik a Címke vezérlőelemben.

3. A böngészőben tekintse meg az oldal forráskódját.

   Vegye figyelembe, hogy a Naptár vezérlőelem táblázatként lett megjelenítve a lapon, minden nap td elemként.

4. Zárja be a böngészőt.

Következő lépések

Ez az útmutató a Visual Studio laptervezőjének alapvető funkcióit mutatja be. Most, hogy megismerte, hogyan hozhat létre és szerkeszthet webes űrlapokat a Visual Studióban, érdemes lehet megismerkednie más funkciókkal. Tegyük fel például, hogy a következőket szeretné elvégezni:

• Az ASP.NET Web Forms alapjairól a lépésenkénti oktatóanyag-sorozat követésével ismerhet meg többet, melynek címe: Az ASP.NET 4.5 Webes űrlapok és Visual Studio 2013 használatának első lépései.
• További információ a kaszkádolt stíluslapokról (CSS). További információ: A CSS használata – áttekintés.