Dodaj widok do aplikacji ASP.NET Core MVCAdd a view to an ASP.NET Core MVC app

Przez Rick AndersonBy Rick Anderson

W tej sekcji zmodyfikujesz HelloWorldController klasy Razor widok plików klarownie hermetyzacji proces generowania odpowiedzi HTML do klienta.In this section you modify the HelloWorldController class to use Razor view files to cleanly encapsulate the process of generating HTML responses to a client.

Utworzysz widok pliku szablonu przy użyciu aparatu Razor.You create a view template file using Razor. Szablony widoku razor mają .cshtml rozszerzenie pliku.Razor-based view templates have a .cshtml file extension. Zapewniają prosty sposób tworzenia danych wyjściowych HTML przy użyciu C#.They provide an elegant way to create HTML output with C#.

Obecnie Index metoda zwraca ciąg zawierający komunikat, który jest ustalony w klasie kontrolera.Currently the Index method returns a string with a message that's hard-coded in the controller class. W HelloWorldController klasy, Zastąp Index metoda następującym kodem:In the HelloWorldController class, replace the Index method with the following code:

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

Powyższy kod wywołuje kontrolera View metody.The preceding code calls the controller's View method. Szablonu widoku jest używane do generowania odpowiedzi HTML.It uses a view template to generate an HTML response. Metody kontrolera (znany także jako metod akcji), takie jak Index ogólnie zwracany przez metodę powyżej IActionResult (lub klasą pochodną ActionResult), nie jest typem, takich jak string.Controller methods (also known as action methods), such as the Index method above, generally return an IActionResult (or a class derived from ActionResult), not a type like string.

Dodawanie widokuAdd a view

  • Kliknij prawym przyciskiem myszy widoków folder, a następnie Dodaj > Nowy Folder i nadaj folderowi HelloWorld.Right click on the Views folder, and then Add > New Folder and name the folder HelloWorld.

  • Kliknij prawym przyciskiem myszy widoków/HelloWorld folder, a następnie Dodaj > Nowy element.Right click on the Views/HelloWorld folder, and then Add > New Item.

  • W Dodaj nowy element - MvcMovie okna dialogowegoIn the Add New Item - MvcMovie dialog

    • W polu wyszukiwania w prawym górnym rogu, wprowadź widokuIn the search box in the upper-right, enter view

    • Wybierz widoku RazorSelect Razor View

    • Zachowaj nazwa polu wartość Index.cshtml.Keep the Name box value, Index.cshtml.

    • Wybierz DodajSelect Add

Dodaj okno dialogowe Nowy element

Zastąp zawartość Views/HelloWorld/Index.cshtml plik widoku Razor następującym kodem:Replace the contents of the Views/HelloWorld/Index.cshtml Razor view file with the following:

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

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

Przejdź do adresu https://localhost:xxxx/HelloWorld.Navigate to https://localhost:xxxx/HelloWorld. Index Method in Class metoda HelloWorldController nie znacznie; został uruchomiony instrukcji return View();, które określone metody należy używać pliku szablonu widoku do renderowania odpowiedzi do przeglądarki.The Index method in the HelloWorldController didn't do much; it ran the statement return View();, which specified that the method should use a view template file to render a response to the browser. Ponieważ nie określono nazwę pliku szablonu w widoku, MVC domyślnie przy użyciu domyślnego pliku widoku.Because a view template file name wasn't specified, MVC defaulted to using the default view file. Widok domyślny plik ma taką samą nazwę jak metody (Index), więc w /Views/HelloWorld/Index.cshtml jest używany.The default view file has the same name as the method (Index), so in the /Views/HelloWorld/Index.cshtml is used. Na poniższym obrazie przedstawiono ciąg "Hello z naszych Wyświetl szablon"!The image below shows the string "Hello from our View Template!" zakodowane w widoku.hard-coded in the view.

Okno przeglądarki

Zmień widoki i układ stronyChange views and layout pages

Wybierz linki menu (MvcMovie, Home, i zachowania).Select the menu links (MvcMovie, Home, and Privacy). Każda strona zawiera ten sam układ menu.Each page shows the same menu layout. Układ menu jest zaimplementowana w Views/Shared/_Layout.cshtml pliku.The menu layout is implemented in the Views/Shared/_Layout.cshtml file. Otwórz Views/Shared/_Layout.cshtml pliku.Open the Views/Shared/_Layout.cshtml file.

Układ Szablony umożliwiają określ układ kontenera HTML Twojej witryny w jednym miejscu, a następnie zastosować je na wielu stronach w witrynie.Layout templates allow you to specify the HTML container layout of your site in one place and then apply it across multiple pages in your site. Znajdź @RenderBody() wiersza.Find the @RenderBody() line. RenderBody jest symbolem zastępczym, gdzie wszystkie widoku specyficzne dla strony, możesz utworzyć pokaz, opakowane w stronę układu.RenderBody is a placeholder where all the view-specific pages you create show up, wrapped in the layout page. Na przykład w przypadku wybrania zachowania linku Views/Home/Privacy.cshtml renderowania widoku w RenderBody metody.For example, if you select the Privacy link, the Views/Home/Privacy.cshtml view is rendered inside the RenderBody method.

  • W elementach tytułu i stopki zmienić MvcMovie do Movie App.In the title and footer elements, change MvcMovie to Movie App.
  • Zmień element kotwicy <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> do <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.Change the anchor element <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MvcMovie</a> to <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>.

Następujący kod przedstawia podświetlony zmiany:The following markup shows the highlighted changes:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Movie App</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"
              crossorigin="anonymous"
              integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="/>
    </environment>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-controller="Movies" asp-action="Index">Movie App</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <partial name="_CookieConsentPartial" />
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2019 - Movie App - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha256-E/V4cWE4qvAeO5MOhjtGtqDzPndRO1LBk8lJ/PR7CA4=">
        </script>
    </environment>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

W poprzednim znaczników asp-area atrybut Pomocnik tagu kotwicy został pominięty, ponieważ ta aplikacja nie używa obszarów.In the preceding markup, the asp-area anchor Tag Helper attribute was omitted because this app is not using Areas.

Uwaga: Movies Kontrolera nie została zaimplementowana.Note: The Movies controller has not been implemented. W tym momencie Movie App link nie działa.At this point, the Movie App link is not functional.

Zapisać zmiany i wybierz zachowania łącza.Save your changes and select the Privacy link. Zwróć uwagę, jak Wyświetla tytuł, na karcie przeglądarki zasady zachowania poufności informacji — aplikacja filmu zamiast zasady zachowania poufności informacji - filmu Mvc:Notice how the title on the browser tab displays Privacy Policy - Movie App instead of Privacy Policy - Mvc Movie:

Karta Prywatność

Wybierz Home link i zwróć uwagę, tekst tytułu i zakotwiczenia także wyświetlać aplikacja filmu.Select the Home link and notice that the title and anchor text also display Movie App. Byliśmy w stanie wprowadzić zmianę, jeden raz w szablonie układ, i ma wszystkich stron w witrynie odzwierciedlają nowego tekstu linku i nowy tytuł.We were able to make the change once in the layout template and have all pages on the site reflect the new link text and new title.

Sprawdź Views/_ViewStart.cshtml pliku:Examine the Views/_ViewStart.cshtml file:

@{
    Layout = "_Layout";
}

Views/_ViewStart.cshtml wiąże plik Views/Shared/_Layout.cshtml pliku do każdego widoku.The Views/_ViewStart.cshtml file brings in the Views/Shared/_Layout.cshtml file to each view. Layout Właściwość można ustawić inny układ widoku lub ustaw go na null więc plik układu nie będą używane.The Layout property can be used to set a different layout view, or set it to null so no layout file will be used.

Zmienianie tytułu i <h2> elementu Views/HelloWorld/Index.cshtml Wyświetl plik:Change the title and <h2> element of the Views/HelloWorld/Index.cshtml view file:

@{
    ViewData["Title"] = "Movie List";
}

<h2>My Movie List</h2>

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

Tytuł i <h2> element są nieco inne w przypadku, aby było widać, które fragmentem kodu zmienia wyświetlania.The title and <h2> element are slightly different so you can see which bit of code changes the display.

ViewData["Title"] = "Movie List"; w kodzie powyżej zestawy Title właściwość ViewData słownik "Listę programów filmu".ViewData["Title"] = "Movie List"; in the code above sets the Title property of the ViewData dictionary to "Movie List". Title Właściwość jest używana w <title> elementu HTML na stronę układu:The Title property is used in the <title> HTML element in the layout page:

<title>@ViewData["Title"] - Movie App</title>

Zapisać zmiany i przejdź do https://localhost:xxxx/HelloWorld.Save the change and navigate to https://localhost:xxxx/HelloWorld. Zauważ, że tytuł przeglądarki, podstawowego nagłówka i dodatkowych nagłówków zostały zmienione.Notice that the browser title, the primary heading, and the secondary headings have changed. (Jeśli nie widzisz zmian w przeglądarce, prawdopodobnie przeglądasz zawartość z pamięci podręcznej.(If you don't see changes in the browser, you might be viewing cached content. Naciśnij klawisze Ctrl + F5 w przeglądarce, aby wymusić odpowiedzi z serwera do załadowania.) Tytuł przeglądarki jest tworzony z ViewData["Title"] jest ustawiany Index.cshtml wyświetlić szablonu i dodatkowych "-Movie App" dodane w pliku układu.Press Ctrl+F5 in your browser to force the response from the server to be loaded.) The browser title is created with ViewData["Title"] we set in the Index.cshtml view template and the additional "- Movie App" added in the layout file.

Należy również zauważyć, jak zawartości Index.cshtml szablon widoku została scalona z Views/Shared/_Layout.cshtml Wyświetl szablon i pojedynczą odpowiedź HTML był wysyłany do przeglądarki.Also notice how the content in the Index.cshtml view template was merged with the Views/Shared/_Layout.cshtml view template and a single HTML response was sent to the browser. Układ Szablony ułatwiają naprawdę wprowadzić zmiany, które są stosowane dla wszystkich stron w aplikacji.Layout templates make it really easy to make changes that apply across all of the pages in your application. Aby dowiedzieć się więcej, zobacz układ.To learn more see Layout.

Widok listy filmu

Nasze trochę "dane" (w tym przypadku "Hello z naszych Wyświetl szablon!"Our little bit of "data" (in this case the "Hello from our View Template!" komunikat) jest ustalony, mimo że.message) is hard-coded, though. Aplikacja MVC ma "V" (view) i masz "C" (kontroler), ale nie "M" (model) jeszcze.The MVC application has a "V" (view) and you've got a "C" (controller), but no "M" (model) yet.

Przekazywanie danych z kontrolera do widokuPassing Data from the Controller to the View

Akcji kontrolera są wywoływane w odpowiedzi na przychodzące żądanie adresu URL.Controller actions are invoked in response to an incoming URL request. Klasa kontrolera jest, gdzie są zapisywane kod obsługujący żądania przychodzące przeglądarki.A controller class is where the code is written that handles the incoming browser requests. Kontroler pobiera dane ze źródła danych i decyduje o rodzaju odpowiedzi do odesłania do przeglądarki.The controller retrieves data from a data source and decides what type of response to send back to the browser. Wyświetlanie szablonów może służyć za pomocą kontrolera do generowania i formatowanie odpowiedzi HTML do przeglądarki.View templates can be used from a controller to generate and format an HTML response to the browser.

Kontrolery są odpowiedzialne za świadczenie danych wymagane dla szablonu widoku do renderowania odpowiedzi.Controllers are responsible for providing the data required in order for a view template to render a response. Najlepszym rozwiązaniem jest: Wyświetl szablony powinny nie wykonania logiki biznesowej lub bezpośredniej interakcji z bazą danych.A best practice: View templates should not perform business logic or interact with a database directly. Przeciwnie Wyświetl szablon powinny działać tylko w przypadku danych, który znajduje się do niego przez kontroler.Rather, a view template should work only with the data that's provided to it by the controller. Obsługa tego "separacji" pomaga kod czystego, zakresie testować i obsługiwać.Maintaining this "separation of concerns" helps keep the code clean, testable, and maintainable.

Obecnie Welcome method in Class metoda HelloWorldController klasy przyjmuje name i ID parametru, a następnie dane wyjściowe wartości bezpośrednio do przeglądarki.Currently, the Welcome method in the HelloWorldController class takes a name and a ID parameter and then outputs the values directly to the browser. Zamiast kontrolera renderowania tej odpowiedzi jako ciąg, Zmień kontroler zamiast tego użyć szablonu widoku.Rather than have the controller render this response as a string, change the controller to use a view template instead. Wyświetl szablon generuje odpowiedzi dynamicznej, co oznacza, że odpowiednich bitów danych muszą być przekazywane z kontrolera do widoku w celu wygenerowania odpowiedzi.The view template generates a dynamic response, which means that appropriate bits of data must be passed from the controller to the view in order to generate the response. W tym celu o kontrolera, umieść dane dynamiczne (parametry) wymagającym szablon widoku w ViewData słownik, który szablon widoku może uzyskać dostęp.Do this by having the controller put the dynamic data (parameters) that the view template needs in a ViewData dictionary that the view template can then access.

W HelloWorldController.cs, zmień Welcome metody w celu dodania Message i NumTimes wartość ViewData słownika.In HelloWorldController.cs, change the Welcome method to add a Message and NumTimes value to the ViewData dictionary. ViewData Słownik jest obiekt dynamiczny, co oznacza, można użyć dowolnego typu; ViewData obiekt nie ma zdefiniowanej właściwości do momentu coś znajdującym się w nim umieścić.The ViewData dictionary is a dynamic object, which means any type can be used; the ViewData object has no defined properties until you put something inside it. System powiązań modelu MVC automatycznie mapuje nazwanych parametrów (name i numTimes) z ciągu zapytania w pasku adresu do parametrów w metodzie.The MVC model binding system automatically maps the named parameters (name and numTimes) from the query string in the address bar to parameters in your method. Pełne HelloWorldController.cs pliku wygląda następująco:The complete HelloWorldController.cs file looks like this:

using Microsoft.AspNetCore.Mvc;
using System.Text.Encodings.Web;

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

        public IActionResult Welcome(string name, int numTimes = 1)
        {
            ViewData["Message"] = "Hello " + name;
            ViewData["NumTimes"] = numTimes;

            return View();
        }
    }
}

ViewData Obiekt słownika zawiera dane, które zostaną przekazane do widoku.The ViewData dictionary object contains data that will be passed to the view.

Tworzenie szablonu-Zapraszamy wyświetlanie o nazwie Views/HelloWorld/Welcome.cshtml.Create a Welcome view template named Views/HelloWorld/Welcome.cshtml.

Utworzysz pętlę w Welcome.cshtml Wyświetl szablon, który wyświetla "Hello" NumTimes.You'll create a loop in the Welcome.cshtml view template that displays "Hello" NumTimes. Zastąp zawartość Views/HelloWorld/Welcome.cshtml następującym kodem:Replace the contents of Views/HelloWorld/Welcome.cshtml with the following:

@{
    ViewData["Title"] = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < (int)ViewData["NumTimes"]; i++)
    {
        <li>@ViewData["Message"]</li>
    }
</ul>

Zapisz zmiany i przejdź do następującego adresu URL:Save your changes and browse to the following URL:

https://localhost:xxxx/HelloWorld/Welcome?name=Rick&numtimes=4

Dane są pobierane z adresu URL i przekazywane do kontrolera, za pomocą integratora modelu MVC .Data is taken from the URL and passed to the controller using the MVC model binder . Kontroler pakiety danych do ViewData słownik i przebiegi, które obiekt widoku.The controller packages the data into a ViewData dictionary and passes that object to the view. Widok następnie renderuje dane jako kod HTML do przeglądarki.The view then renders the data as HTML to the browser.

Widok zachowania powitalnej etykiety i frazy Hello Rick przedstawiono cztery razy

W przykładzie powyżej ViewData słownika zostało użyte do przekazywania danych z kontrolera do widoku.In the sample above, the ViewData dictionary was used to pass data from the controller to a view. W dalszej części samouczka model widoku jest używany do przekazywania danych za pomocą kontrolera do widoku.Later in the tutorial, a view model is used to pass data from a controller to a view. Widok modelu sposobem przekazywania danych jest zwykle znacznie preferowany nad ViewData podejście słownika.The view model approach to passing data is generally much preferred over the ViewData dictionary approach. Zobacz kiedy używać elementów ViewBag, ViewData i TempData Aby uzyskać więcej informacji.See When to use ViewBag, ViewData, or TempData for more information.

W następnym samouczku utworzeniu bazy danych filmów.In the next tutorial, a database of movies is created.