Nézet hozzáadása MVC-alkalmazáshoz

készítette : Rick Anderson

Megjegyzés:

Az oktatóanyag frissített verziója itt érhető el a Visual Studio legújabb verziójával. Az új oktatóanyag ASP.NET Core MVC-t használ, amely számos fejlesztést biztosít az oktatóanyaghoz.

Ez az oktatóanyag a vezérlőkkel és nézetekkel rendelkező ASP.NET Core MVC-t mutatja be. A Razor Pages egy új alternatíva a ASP.NET Core-ban, amely egy lapalapú programozási modell, amely megkönnyíti és hatékonyabbá teszi a webes felhasználói felület készítését. Javasoljuk, hogy az MVC-verzió előtt próbálja ki a Razor Pages oktatóanyagot. A Razor Pages oktatóanyaga:

• Könnyebb követni.
• További funkciókkal is foglalkozik.
• Az új alkalmazásfejlesztés előnyben részesített megközelítése.

Ebben a szakaszban úgy fogja módosítani az HelloWorldController osztályt, hogy nézet sablonfájlokat használjon az ügyfél HTML-válaszainak generálási folyamatának tiszta kapszulázásához.

Egy nézetsablonfájlt fog létrehozni a Razor nézetmotor használatával. A Razor-alapú nézetsablonok .cshtml fájlkiterjesztéssel rendelkeznek, és elegáns módot nyújtanak a HTML-kimenet C# használatával történő létrehozására. A Razor minimálisra csökkenti a nézetsablonok írásakor szükséges karakterek és billentyűleütések számát, és lehetővé teszi a gyors, zökkenőmentes kódolási munkafolyamatot.

Index A metódus jelenleg egy olyan sztringet ad vissza, amely egy, a vezérlőosztályban szigorúan kódolt üzenetet tartalmaz. Módosítsa a metódust Index úgy, hogy meghívja a vezérlők Nézet metódusát, ahogy az a következő kódban látható:

public ActionResult Index() 
{ 
    return View(); 
}

A Index fenti módszer egy nézetsablon használatával hoz létre HTML-választ a böngészőre. A vezérlőmetódusok (más néven műveletmetódusok), például a Index fenti metódus általában egy ActionResult -t (vagy egy ActionResult-ból származtatott osztályt) ad vissza, nem pedig primitív típusokat, például sztringet.

Kattintson a jobb gombbal a Nézetek\HelloWorld mappára, majd a Hozzáadás, majd az MVC 5 Nézet lap elrendezéssel (Razor) parancsra.

Az Elem nevének megadása párbeszédpanelen írja be az Index kifejezést, majd kattintson az OK gombra.

Az Elrendezéslap kiválasztása párbeszédpanelen fogadja el az alapértelmezett _Layout.cshtml fájlt, és kattintson az OK gombra.

A fenti párbeszédpanelen a Nézetek\Megosztott mappa ki van jelölve a bal oldali panelen. Ha egy másik mappában volt egy egyéni elrendezésfájl, kiválaszthatja azt. Az elrendezésfájlról az oktatóanyag későbbi részében lesz szó

Létrejön az MvcMovie\Views\HelloWorld\Index.cshtml fájl.

Adja hozzá a következő kiemelt jelölést.

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Kattintson a jobb gombbal az Index.cshtml fájlra , és válassza a Megtekintés böngészőben lehetőséget.

Kattintson a jobb gombbal az Index.cshtml fájlra, és válassza a Nézet lehetőséget a Lapfelügyelőben. További információt a Lapfelügyelő oktatóanyagában talál.

Másik lehetőségként futtassa az alkalmazást, és keresse meg a HelloWorld vezérlőt (http://localhost:xxxx/HelloWorld). A Index vezérlőben lévő metódus nem sokat működött, egyszerűen lefuttatta az utasítást return View(), amely szerint a metódusnak egy nézetsablonfájlt kell használnia a böngészőre adott válasz megjelenítéséhez. Mivel nem adta meg explicit módon a használni kívánt nézetsablonfájl nevét, ASP.NET MVC alapértelmezés szerint az Index.cshtml nézetfájlt használja a \Views\HelloWorld mappában. Az alábbi képen a "Hello from our View Template!" sztring látható, a nézetbe beépítve.

Nagyon jól néz ki. Figyelje meg azonban, hogy a böngésző címsorában az "Index – Saját ASP.NET alkalmazás" felirat látható, a lap tetején pedig az "Alkalmazás neve" felirat látható. A böngészőablak méretétől függően előfordulhat, hogy a jobb felső sarokban lévő három sávra kell kattintania a Kezdőlap, Névjegy, Névjegy, Kapcsolat, Regisztráció és Bejelentkezés hivatkozás megtekintéséhez.

Nézetek és elrendezéslapok módosítása

Először meg kell változtatnia az oldal tetején található "Alkalmazásnév" hivatkozást. Ez a szöveg minden oldalon gyakori. Valójában csak egy helyen implementálva van a projektben, annak ellenére, hogy az alkalmazás minden oldalán megjelenik. Nyissa meg a /Views/Shared mappát a Megoldáskezelőben , és nyissa meg a _Layout.cshtml fájlt. Ezt a fájlt elrendezési lapnak nevezzük, és az összes többi lap által használt megosztott mappában található.

Az elrendezési sablonok lehetővé teszik, hogy a webhely HTML-tárolóelrendezését egy helyen adja meg, majd alkalmazza a webhely több oldalára. Keresse meg a @RenderBody() vonalat. RenderBody egy helyőrző, ahol az összes létrehozott nézetspecifikus oldal megjelenik, "becsomagolva" az elrendezési lapon. Ha például a Névjegy hivatkozást választja, a Views\Home\About.cshtml nézet a RenderBody metóduson belül renderelődik.

Módosítsa a címelem tartalmát. Módosítsa az elrendezéssablon ActionLink elemét az "Alkalmazás neve" értékről "MVC Movie" értékre, a vezérlőt Home pedig a következőre Movies. A teljes elrendezésfájl alább látható:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Futtassa az alkalmazást, és figyelje meg, hogy az "MVC Movie" felirat jelenik meg. Kattintson a Névjegy hivatkozásra, és láthatja, hogy ezen az oldalon megjelenik az "MVC Movie" is. A módosítást egyszer sikerült végrehajtani az elrendezéssablonban, és a webhely összes lapja az új címet tükrözi.

Amikor először létrehoztuk a Views\HelloWorld\Index.cshtml fájlt, a következő kódot tartalmazta:

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

A fenti Razor-kód explicit módon állítja be az elrendezési oldalt. Vizsgálja meg a Views\_ViewStart.cshtml fájlt, pontosan ugyanazt a Razor jelölőnyelvet tartalmazza. A Views\_ViewStart.cshtml fájl határozza meg az összes nézet által használt közös elrendezést, ezért megjegyzéseket fűzhet hozzá, vagy eltávolíthatja a kódot a Views\HelloWorld\Index.cshtml fájlból.

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

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

A tulajdonság használatával Layout másik elrendezési nézetet állíthat be, vagy beállíthatja úgy, hogy null ne használjon elrendezésfájlt.

Most változtassuk meg az Index nézet címét.

Nyissa meg az MvcMovie\Views\HelloWorld\Index.cshtml fájlt. A módosításnak két helye van: először a böngésző címében, majd a másodlagos fejlécben (az <h2> elemben) megjelenő szöveg. Kissé eltérővé teszi őket, így láthatja, hogy melyik kódrészlet módosítja az alkalmazás melyik részét.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

A megjelenítendő HTML-cím jelzéséhez a fenti kód beállítja Title az ViewBag objektum tulajdonságát (amely az Index.cshtml nézetsablonban található). Figyelje meg, hogy az elrendezéssablon ( Views\Shared\_Layout.cshtml ) ezt az értéket használja az <title> elemben a <head> korábban módosított HTML-szakasz részeként.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Ezzel a ViewBag módszerrel egyszerűen átadhat más paramétereket a nézetsablon és az elrendezésfájl között.

Indítsa el az alkalmazást. Figyelje meg, hogy a böngésző címe, az elsődleges címsor és a másodlagos címsorok megváltoztak. (Ha nem látja a módosításokat a böngészőben, előfordulhat, hogy gyorsítótárazott tartalmat tekint meg. Nyomja le a Ctrl+F5 billentyűkombinációt a böngészőben a kiszolgáló válaszának betöltéséhez.) A böngésző címe az ViewBag.TitleIndex.cshtml nézetsablonban beállítottakkal és az elrendezésfájlban hozzáadott további "- Filmalkalmazás" beállítással jön létre.

Azt is megfigyelheti, hogy az Index.cshtml nézetsablon tartalma egyesítve lett a _Layout.cshtml nézetsablonnal, és egyetlen HTML-választ küldött a böngészőnek. Az elrendezéssablonok megkönnyítik az alkalmazás összes oldalára vonatkozó módosításokat.

A mi kis "adatunk" (ebben az esetben a "Hello from our View Template!" üzenet) azonban hardkódolt. Az MVC alkalmazásnak van egy "V" (nézet) és egy "C" (vezérlő), de még nincs "M" (modell). Rövidesen bemutatjuk, hogyan hozhat létre adatbázist, és hogyan kérdezheti le belőle a modelladatokat.

Adatok továbbítása a vezérlőből a nézetbe

Mielőtt azonban egy adatbázisba mennénk, és modellekről beszélnénk, először beszéljünk arról, hogy adatokat adunk át a vezérlőből egy nézetbe. A rendszer meghívja a vezérlőosztályokat egy bejövő URL-kérésre válaszul. A vezérlőosztály az a kód, amely a bejövő böngészők kéréseit kezeli, adatokat kér le egy adatbázisból, és végső soron eldönti, hogy milyen típusú választ küldjön vissza a böngészőnek. A nézetsablonok ezután egy vezérlőből is létrehozhatnak és formázhatnak HTML-választ a böngészőre.

A vezérlők feladata, hogy bármilyen adatot vagy objektumot adjanak meg ahhoz, hogy egy nézetsablon választ jelenítsen meg a böngészőre. Ajánlott eljárás: A nézetsablonok soha nem hajthatnak végre üzleti logikát, és nem használhatnak közvetlenül adatbázist. Ehelyett a nézetsablonoknak csak a vezérlő által megadott adatokkal kell működnie. A "problémák elkülönítésének" fenntartása segít a kód tisztaságának, tesztelhetőségének és karbantarthatóságának megőrzésében.

Jelenleg a Welcome osztályban található műveleti metódus egy name és egy numTimes paramétert vesz fel, majd az értékeket közvetlenül kiírja a böngészőre. Ahelyett, hogy a vezérlő sztringként jeleníti meg ezt a választ, módosítsa a vezérlőt nézetsablon használatára. A nézetsablon dinamikus választ hoz létre, ami azt jelenti, hogy a válasz létrehozásához megfelelő adatbiteket kell átadnia a vezérlőből a nézetnek. Ezt úgy teheti meg, hogy a vezérlő elhelyezi a nézetsablonhoz szükséges dinamikus adatokat (paramétereket) egy ViewBag olyan objektumban, amelyhez a nézetsablon hozzáférhet.

Térjen vissza a HelloWorldController.cs fájlhoz, és módosítsa a Welcome metódust úgy, hogy egy Message és NumTimes értéket adjon hozzá az ViewBag objektumhoz. ViewBag egy dinamikus objektum, ami azt jelenti, hogy bármit elhelyezhet benne; az ViewBag objektum nem rendelkezik definiált tulajdonságokkal, amíg nem tesz bele valamit. A ASP.NET MVC modellkötési rendszer automatikusan leképezi a névvel ellátott paramétereket (name és numTimes) a címsávban lévő lekérdezési sztringből a metódus paramétereire. A teljes HelloWorldController.cs fájl a következőképpen néz ki:

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

Most az ViewBag objektum olyan adatokat tartalmaz, amelyeket a rendszer automatikusan továbbít a nézetnek. Ezután szüksége lesz egy üdvözlőnézet-sablonra! A Build menüben válassza a Build Solution (vagy Ctrl+Shift+B) lehetőséget a projekt fordításának biztosításához. Kattintson a jobb gombbal a Nézetek\HelloWorld mappára, majd a Hozzáadás, majd az MVC 5 Nézet lap elrendezéssel (Razor) parancsra.

Az Elem nevének megadása párbeszédpanelen adja meg az Üdvözlő szöveget, majd kattintson az OK gombra.

Az Elrendezéslap kiválasztása párbeszédpanelen fogadja el az alapértelmezett _Layout.cshtml fájlt, és kattintson az OK gombra.

Létrejön az MvcMovie\Views\HelloWorld\Welcome.cshtml fájl.

Cserélje le a jelölőt a Welcome.cshtml fájlban. Olyan hurkot fog létrehozni, amely annyiszor mondja ki a "Hello" szót, ahányat a felhasználó kér. A teljes Welcome.cshtml fájl alább látható.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

Futtassa az alkalmazást, és keresse meg a következő URL-címet:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Most az adatok az URL-címből származnak, és a modellkötő használatával továbbítják a vezérlőnek. A vezérlő egy objektumba ViewBag csomagolja az adatokat, és átadja az objektumot a nézetnek. A nézet ezután HTML-ként jeleníti meg az adatokat a felhasználó számára.

A fenti mintában egy ViewBag objektumot használtunk arra, hogy adatokat továbbítsunk a vezérlőből egy nézetbe. Az oktatóanyag későbbi részében egy nézetmodell használatával továbbítjuk az adatokat egy vezérlőből egy nézetbe. Az adatok átadásának nézetmodell-megközelítését általában előnyben részesítik a nézetcsomag-megközelítéssel szemben. További információért lásd a blogbejegyzést: Dynamic V Erősen típusos nézetek.

Nos, ez egyfajta "M" a modellre, de nem az adatbázis típusára. Vegyük át a tanultakat, és hozzunk létre egy filmadatbázist.

ElőzőKövetkező