Пользовательский интерфейс и навигация

Статья
07/13/2023

Скачать пример проекта Wingtip Toys (C#) или скачать электронную книгу (PDF)

В этой серии учебников вы узнаете об основах создания приложения ASP.NET Web Forms с помощью ASP.NET 4.5 и Microsoft Visual Studio Express 2013 для Интернета. В этой серии руководств доступен проект Visual Studio 2013 с исходным кодом C#.

В этом руководстве вы измените пользовательский интерфейс веб-приложения по умолчанию для поддержки функций переднего приложения магазина Wingtip Toys. Кроме того, вы добавите простую навигацию с привязкой к данным. Это руководство создано на основе предыдущего руководства "Создание уровня доступа к данным" и входит в серию учебников Wingtip Toys.

Из этого руководства вы узнаете, как выполнять такие задачи:

Изменение пользовательского интерфейса для поддержки функций переднего приложения магазина Wingtip Toys.
Настройка элемента HTML5 для включения навигации по страницам.
Создание управляемого данными элемента управления для перехода к данным конкретного продукта.
Отображение данных из базы данных, созданной с помощью Entity Framework Code First.

ASP.NET Web Forms позволяют создавать динамическое содержимое для веб-приложения. Каждая веб-страница ASP.NET создается так же, как статическая веб-страница HTML (страница, не содержащая серверную обработку), но ASP.NET веб-страница содержит дополнительные элементы, которые ASP.NET распознает и обрабатывает для создания HTML при запуске страницы.

При использовании статической HTML-страницы (.htm или .html файла) сервер выполняет Web запрос, считывая файл и отправляя его в браузер как есть. В отличие от этого, когда кто-то запрашивает веб-страницу ASP.NET (ASPX-файл ), страница запускается как программа на веб-сервере. Во время работы страницы она может выполнять любые задачи, необходимые веб-сайту, включая вычисление значений, чтение или запись сведений о базе данных, а также вызов других программ. В качестве выходных данных страница динамически создает разметку (например, элементы в HTML) и отправляет эти динамические выходные данные в браузер.

Изменение пользовательского интерфейса

Вы продолжите работу с этой серией руководств, изменив страницу Default.aspx . Вы измените пользовательский интерфейс, который уже создан шаблоном по умолчанию, используемым для создания приложения. Тип изменений, которые вы будете вносить, являются типичными при создании любого веб-формы приложения. Это можно сделать, изменив заголовок, заменив некоторое содержимое и удалив ненужный контент по умолчанию.

Откройте страницу Default.aspx или перейдите на нее.
Если страница отображается в режиме конструктора , перейдите в исходное представление.
В верхней части страницы директивы @Page измените Title атрибут на "Welcome", как показано ниже желтым цветом.
```
<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>
```

Кроме того, на странице Default.aspx замените все содержимое по умолчанию, содержащееся в <asp:Content> теге , чтобы разметка отображалась, как показано ниже.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Сохраните страницу Default.aspx , выбрав Сохранить Default.aspx в меню Файл .

Итоговая страница Default.aspx будет выглядеть следующим образом:

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

В этом примере вы задали Title атрибут директивы @Page . При отображении HTML-кода в браузере код <%: Page.Title %> сервера разрешается в содержимое, содержащееся в атрибуте Title .

Пример страницы содержит основные элементы, составляющие веб-страницу ASP.NET. Страница содержит статический текст, который может иметься на HTML-странице, а также элементы, относящиеся к ASP.NET. Содержимое страницы Default.aspx будет интегрировано с содержимым страницы master, что будет описано далее в этом руководстве.

@Page Директива

ASP.NET Web Forms обычно содержат директивы, позволяющие указать свойства страницы и сведения о конфигурации страницы. Директивы используются ASP.NET в качестве инструкций по обработке страницы, но не отображаются в составе разметки, отправляемой в браузер.

Наиболее часто используемой директивой является директива @Page , которая позволяет указать множество параметров конфигурации для страницы, включая следующие:

Язык программирования сервера для кода на странице, например C#.
Является ли страница страницей с серверным кодом непосредственно на странице, которая называется страницей с одним файлом, или это страница с кодом в отдельном файле класса, который называется страницей кода программной части.
Указывает, имеет ли страница связанную master страницу и, следовательно, должна ли она рассматриваться как страница содержимого.
Параметры отладки и трассировки.

Если директива @Page не включена в страницу или директива не содержит определенный параметр, параметр будет унаследован из файла конфигурации Web.config или из файла конфигурации Machine.config . Файл Machine.config предоставляет дополнительные параметры конфигурации для всех приложений, работающих на компьютере.

Примечание

В Machine.config также содержатся сведения обо всех возможных параметрах конфигурации.

Элементы управления веб-сервера

В большинстве ASP.NET Web Forms приложений вы добавляете элементы управления, позволяющие пользователю взаимодействовать со страницей, например кнопки, текстовые поля, списки и т. д. Эти элементы управления веб-сервера похожи на кнопки HTML и элементы ввода. Однако они обрабатываются на сервере, что позволяет использовать код сервера для задания их свойств. Эти элементы управления также вызывают события, которые можно обрабатывать в серверном коде.

Серверные элементы управления используют специальный синтаксис, который ASP.NET распознает при запуске страницы. Имя тега для серверных элементов управления ASP.NET начинается с asp: префикса. Это позволяет ASP.NET распознавать и обрабатывать эти серверные элементы управления. Префикс может отличаться, если элемент управления не является частью платформа .NET Framework. Помимо asp: префикса, ASP.NET серверные элементы управления также включают runat="server" атрибуты и , ID которые можно использовать для ссылки на элемент управления в серверном коде.

При запуске страницы ASP.NET определяет серверные элементы управления и выполняет код, связанный с этими элементами управления. При отображении в браузере многие элементы управления отображают некоторые HTML-коды или другие разметки на странице.

Серверный код

Большинство ASP.NET Web Forms приложений содержат код, который выполняется на сервере при обработке страницы. Как упоминалось выше, серверный код можно использовать для выполнения различных задач, таких как добавление данных в элемент управления ListView. ASP.NET поддерживает множество языков для запуска на сервере, включая C#, Visual Basic, J# и другие.

ASP.NET поддерживает две модели написания серверного кода для веб-страницы. В модели с одним файлом код страницы находится в элементе скрипта, где открывающий тег включает runat="server" атрибут . Кроме того, можно создать код для страницы в отдельном файле класса, который называется моделью кода программной части. В этом случае страница ASP.NET Web Forms обычно не содержит серверного кода. Вместо этого директива @Page содержит сведения, которые связывают страницу ASPX со связанным с ней файлом кода программной части.

Атрибут CodeBehind , содержащийся в директиве @Page , указывает имя отдельного файла класса, а Inherits атрибут — имя класса в файле кода программной части, соответствующего странице.

Обновление главной страницы

В среде веб-форм ASP.NET главные страницы позволяют создавать устойчивый макет страниц приложения. Одна главная страница определяет внешний вид и стандартное поведение всех страниц (или группы страниц) приложения. Затем можно создать отдельные страницы содержимого, содержащие содержимое, которое вы хотите отобразить, как описано выше. При поступлении запросов на страницы контента от пользователей ASP.NET объединяет их с главной страницей, чтобы получить на выходе макет главной страницы с содержимым страницы контента.

Новый сайт должен иметь один логотип для отображения на каждой странице. Чтобы добавить этот логотип, можно изменить HTML-код на странице master.

В Обозревателе решенийнайдите и откройте страницу Site.Master .
Если страница находится в режиме конструктора , перейдите в исходное представление.

Обновите страницу master, изменив или добавив разметку, выделенную желтым цветом:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Wingtip Toys</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <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>
                    <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Wingtip Toys</p>
            </footer>
        </div>
    </form>
</body>
</html>

В этом HTML-коде будет отображаться изображение с именемlogo.jpg из папки Images веб-приложения, которую вы добавите позже. Когда страница, использующая страницу master, отображается в браузере, будет отображаться логотип. Если пользователь щелкнет логотип, он вернется на страницу Default.aspx . Тег <a> привязки HTML служит оболочкой для серверного элемента управления image и позволяет включить изображение в качестве части ссылки. Атрибут href для тега привязки указывает корневой каталог "~/" веб-сайта в качестве расположения ссылки. По умолчанию страница Default.aspx отображается, когда пользователь переходит в корень веб-сайта. Серверный элемент управления Image<asp:Image> включает дополнительные свойства, такие как BorderStyle, которые отображаются в браузере в формате HTML.

Эталонные страницы

Страница master — это ASP.NET-файл с расширением .master (например, Site.Master) с предопределенным макетом, который может включать статический текст, ЭЛЕМЕНТЫ HTML и серверные элементы управления. Страница master определяется специальной @Master директивой, которая заменяет директиву@Page, используемую для обычных ASPX-страниц.

В дополнение к директиве @Master страница master также содержит все элементы HTML верхнего уровня для страницы, такие как html, headи form. Например, на странице master, добавленной ранее, вы используете HTML-код table для макета, img элемент для логотипа компании, статический текст и серверные элементы управления для обработки общего членства на сайте. В master странице можно использовать любые элементы HTML и ASP.NET.

Помимо статического текста и элементов управления, которые будут отображаться на всех страницах, master страница также включает один или несколько элементов управления ContentPlaceHolder. Эти элементы управления-заполнители определяют регионы, в которых будет отображаться заменяемое содержимое. В свою очередь, заменяемое содержимое определяется на страницах содержимого, таких как Default.aspx, с помощью серверного элемента управления Содержимое .

Добавление файлов изображений

Изображение логотипа, указанное выше, вместе со всеми изображениями продуктов, должно быть добавлено в веб-приложение, чтобы их можно было увидеть при отображении проекта в браузере.

Скачайте с сайта примеров MSDN:

начало работы с веб-формы ASP.NET 4.5 и Visual Studio 2013 — Wingtip Toys (C#)

Скачивание включает ресурсы в папке WingtipToys-Assets , которые используются для создания примера приложения.

Если вы еще не сделали этого, скачайте сжатые примеры файлов, используя приведенную выше ссылку на сайте примеров MSDN.
После скачивания откройте файл .zip и скопируйте его содержимое в локальную папку на компьютере.
Найдите и откройте папку WingtipToys-Assets .
Путем перетаскивания скопируйте папку Catalog из локальной папки в корень проекта веб-приложения в Обозреватель решений Visual Studio.
Затем создайте папку с именем Images, щелкнув правой кнопкой мыши проект WingtipToys в Обозреватель решений и выбрав Добавить ->Создать папку.
Скопируйте файл logo.jpg из папки WingtipToys-Assets в проводник в папку Images проекта веб-приложения в Обозреватель решений Visual Studio.
Выберите параметр Показать все файлы в верхней части Обозреватель решений, чтобы обновить список файлов, если новые файлы не отображаются.

Обозреватель решений теперь отображаются обновленные файлы проекта.

Добавление страниц

Перед добавлением навигации в веб-приложение необходимо сначала добавить две новые страницы, на которые вы будете переходить. Далее в этой серии учебников вы увидите продукты и сведения о продукте на этих новых страницах.

В Обозреватель решений щелкните правой кнопкой мыши WingtipToys, выберите добавить, а затем — Новый элемент.
Откроется диалоговое окно Добавление нового элемента.
Выберите группу Visual C# - Веб-шаблоны> слева. Затем выберите Веб-форма с главной страницей в среднем списке и присвойте ей имя ProductList.aspx.
Выберите Site.Master, чтобы присоединить страницу master к созданной aspx-странице.
Добавьте дополнительную страницу с именем ProductDetails.aspx , выполнив те же действия.

Обновление начальной загрузки

Шаблоны проектов Visual Studio 2013 используют bootstrap, макет и платформу тем, созданную Twitter. Bootstrap использует CSS3 для обеспечения адаптивного дизайна, что означает, что макеты могут динамически адаптироваться к различным размерам окна браузера. Вы также можете использовать функцию тем начальной загрузки, чтобы легко изменить внешний вид приложения. По умолчанию шаблон веб-приложения ASP.NET в Visual Studio 2013 включает bootstrap в виде пакета NuGet.

В этом руководстве вы измените внешний вид приложения Wingtip Toys, заменив CSS-файлы начальной загрузки.

В Обозреватель решений откройте папку Содержимое.
Щелкните правой кнопкой мыши файл bootstrap.css и переименуйте его в bootstrap-original.css.
Переименуйте файл bootstrap.min.css в bootstrap-original.min.css.
В Обозреватель решений щелкните правой кнопкой мыши папку Содержимое и выберите Открыть папку в проводник.
Отобразится проводник. Скачанные CSS-файлы начальной загрузки будут сохранены в этом расположении.
В браузере перейдите по адресу https://bootswatch.com/3/.
Прокрутите окно браузера, пока не увидите тему Cerulean.
Скачайте файл bootstrap.css и файл bootstrap.min.css в папку Содержимое . Используйте путь к папке содержимого, которая отображается в открывшемся ранее окне проводник.
В Visual Studio в верхней части Обозреватель решений выберите параметр Показать все файлы, чтобы отобразить новые файлы в папке Содержимое.

Вы увидите два новых CSS-файла в папке Содержимое , но обратите внимание, что значок рядом с именем каждого файла неактивен. Это означает, что файл еще не добавлен в проект.
Щелкните правой кнопкой мыши файлы bootstrap.css и bootstrap.min.css и выберите Включить в проект.
При запуске приложения Wingtip Toys далее в этом руководстве будет отображаться новый пользовательский интерфейс.

Примечание

Шаблон веб-приложения ASP.NET использует файл Bundle.config в корне проекта для хранения пути к CSS-файлам начальной загрузки.

Навигацию по умолчанию для каждой страницы в приложении можно изменить, изменив неупорядоченный элемент списка навигации, который находится на странице Site.Master .

В Обозреватель решений найдите и откройте страницу Site.Master.

Добавьте дополнительную ссылку навигации, выделенную желтым цветом, в неупорядоченный список, показанный ниже:

<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    <li><a runat="server" href="~/ProductList">Products</a></li>
</ul>

Как видно из приведенного выше HTML-кода, вы изменили каждый элемент <li> строки, содержащий тег <a> привязки с атрибутом ссылки href . Каждый из них href указывает на страницу в веб-приложении. В браузере, когда пользователь щелкает одну из этих ссылок (например , Продукты), он переходит на страницу, содержащуюся в href (например , ProductList.aspx). Вы запустите приложение в конце этого руководства.

Примечание

Символ тильды (~) используется для указания того, что href путь начинается в корне проекта.

Далее вы добавите элемент управления для отображения всех категорий из базы данных. Каждая категория будет выступать в качестве ссылки на страницу ProductList.aspx . Когда пользователь щелкает ссылку категории в браузере, он перейдет на страницу продуктов и увидит только продукты, связанные с выбранной категорией.

Вы будете использовать элемент управления ListView для отображения всех категорий, содержащихся в базе данных. Чтобы добавить элемент управления ListView на страницу master, выполните следующие действия.

На странице Site.Master добавьте следующий выделенный <div> элемент после<div> элемента, содержащего id="TitleContent" элемент , добавленный ранее:

<div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div id="CategoryMenu" style="text-align: center">       
            <asp:ListView ID="categoryList"  
                ItemType="WingtipToys.Models.Category" 
                runat="server"
                SelectMethod="GetCategories" >
                <ItemTemplate>
                    <b style="font-size: large; font-style: normal">
                        <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>">
                        <%#: Item.CategoryName %>
                        </a>
                    </b>
                </ItemTemplate>
                <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
            </asp:ListView>
        </div>

Этот код будет отображать все категории из базы данных. Элемент управления ListView отображает имя каждой категории в виде текста ссылки и содержит ссылку на страницу ProductList.aspx со значением строки запроса, содержащим ID категорию. Если задать ItemType свойство в элементе управления ListView , выражение Item привязки данных становится доступным в ItemTemplate узле, и элемент управления становится строго типизированным. Можно выбрать сведения об объекте Item с помощью IntelliSense, например указать CategoryName. Этот код содержится внутри контейнера <%#: %> , который помечает выражение привязки данных. Путем добавления (:) в конце <%# префикса результатом выражения привязки данных является html-кодирование. Если результат закодирован в ФОРМАТЕ HTML, приложение лучше защищено от атак путем внедрения межсайтовых сценариев (XSS) и атак путем внедрения кода HTML.

Примечание

Совет

При добавлении кода путем ввода во время разработки вы можете быть уверены, что допустимый элемент объекта найден, так как строго типизированные элементы управления данными отображают доступные элементы на основе IntelliSense. IntelliSense предлагает контекстно-подходящие варианты кода при вводе кода, такие как свойства, методы и объекты.

На следующем шаге вы реализуете GetCategories метод для получения данных.

Связывание элемента управления данными с базой данных

Перед отображением данных в элементе управления данными необходимо связать элемент управления данными с базой данных. Чтобы создать ссылку, можно изменить код программной части файла Site.Master.cs .

В Обозреватель решений щелкните правой кнопкой мыши страницу Site.Master и выберите пункт Просмотреть код. Файл Site.Master.cs откроется в редакторе.
В начале файла Site.Master.cs добавьте два дополнительных пространства имен, чтобы все включенные пространства имен отображались следующим образом:
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq;
using WingtipToys.Models;
```

Добавьте выделенный GetCategories метод после обработчика Page_Load событий следующим образом:

protected void Page_Load(object sender, EventArgs e)
{

}

public IQueryable<Category> GetCategories()
{
  var _db = new WingtipToys.Models.ProductContext();
  IQueryable<Category> query = _db.Categories;
  return query;
}

Приведенный выше код выполняется при загрузке в браузере любой страницы, которая использует страницу master. Элемент ListView управления (с именем categoryList), который вы добавили ранее в этом руководстве, использует привязку модели для выбора данных. В разметке ListView элемента управления для свойства элемента управления SelectMethod задается метод , показанный GetCategories выше. Элемент ListView управления вызывает метод в соответствующее GetCategories время жизненного цикла страницы и автоматически привязывает возвращаемые данные. Дополнительные сведения о привязке данных см. в следующем руководстве.

Запуск приложения и создание базы данных

Ранее в этой серии руководств вы создали класс инициализатора (с именем "ProductDatabaseInitializer") и указали этот класс в файле global.asax.cs . Entity Framework создаст базу данных при первом запуске приложения, так как Application_Start метод, содержащийся в файле global.asax.cs , вызовет класс инициализатора. Класс инициализатора будет использовать классы модели (Category и Product), добавленные ранее в этой серии руководств, для создания базы данных.

В Обозреватель решений щелкните правой кнопкой мыши страницу Default.aspx и выберите Пункт начальной страницы.
В Visual Studio нажмите клавишу F5.
Настройка всех компонентов во время первого запуска займет немного времени.

При запуске приложения приложение будет скомпилировано, а в папке App_Data будет создана база данных с именем wingtiptoys.mdf. В браузере появится меню навигации по категориям. Это меню было создано путем извлечения категорий из базы данных. В следующем руководстве вы реализуете навигацию.
Закройте браузер, чтобы остановить работающее приложение.

Просмотр базы данных

Откройте файл Web.config и просмотрите раздел строки подключения. Вы увидите AttachDbFilename , что значение в строке подключения указывает DataDirectory на для проекта веб-приложения. Значение |DataDirectory| является зарезервированным значением, представляющим папку App_Data в проекте. В этой папке находится база данных, созданная из классов сущностей.

<connectionStrings>
    <add name="DefaultConnection" 
         connectionString="Data Source=(LocalDb)\MSSQLLocalDB;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
         providerName="System.Data.SqlClient" />
    <add name="WingtipToys" 
         connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
         providerName="System.Data.SqlClient " />
  </connectionStrings>

Примечание

Если папка App_Data не отображается или папка пуста, щелкните значок Обновить, а затем значок Показать все файлы в верхней части окна Обозреватель решений. Для отображения всех доступных значков может потребоваться расширение ширины окон Обозреватель решений.

Теперь вы можете проверить данные, содержащиеся в файле базы данных wingtiptoys.mdf, с помощью окна Обозреватель сервера.

Разверните папку App_Data . Если папка App_Data не отображается, см. примечание выше.
Если файл базы данных wingtiptoys.mdf не отображается, выберите значок Обновить, а затем значок Показать все файлы в верхней части окна Обозреватель решений.
Щелкните правой кнопкой мыши файл базы данных wingtiptoys.mdf и выберите Открыть.
Отобразится Обозреватель сервера.
Разверните папку Таблицы.
Щелкните правой кнопкой мыши таблицу Productsи выберите Показать данные таблицы.
Отобразится таблица Products .
Это представление позволяет просматривать и изменять данные в таблице Products вручную.
Закройте окно таблицы Products .
В Обозреватель сервера снова щелкните правой кнопкой мыши таблицу Products и выберите Открыть определение таблицы.
Отобразится макет данных для таблицы Products .
На вкладке T-SQL вы увидите инструкцию SQL DDL, которая использовалась для создания таблицы. Вы также можете использовать пользовательский интерфейс на вкладке Конструктор для изменения схемы.
В Обозреватель сервера щелкните правой кнопкой мыши базу данных WingtipToys и выберите Закрыть подключение.
Отсоединив базу данных от Visual Studio, схему базы данных можно будет изменить позже в этой серии руководств.
Вернитесь к Обозреватель решений, выбрав вкладку Обозреватель решений в нижней части окна Обозреватель сервера.

Итоги

В этом руководстве серии вы добавили некоторые основные элементы пользовательского интерфейса, графики, страницы и навигацию. Кроме того, вы запустили веб-приложение, которое создало базу данных из классов данных, добавленных в предыдущем руководстве. Вы также просмотрели содержимое таблицы Products базы данных, просмотрев ее напрямую. В следующем руководстве вы увидите элементы данных и сведения из базы данных.

Дополнительные ресурсы

Введение в программирование веб-страницы ASP.NET
Обзор элементов управления веб-сервера ASP.NET
Руководство по CSS

Назад Вперед

Пользовательский интерфейс и навигация

Из этого руководства вы узнаете, как выполнять такие задачи:

Изменение пользовательского интерфейса

@Page Директива

Элементы управления веб-сервера

Серверный код

Обновление главной страницы

Эталонные страницы

Добавление файлов изображений

Скачайте с сайта примеров MSDN:

Добавление страниц

Обновление начальной загрузки

Изменение навигации по умолчанию

Добавление элемента управления данными для отображения данных навигации

Связывание элемента управления данными с базой данных

Запуск приложения и создание базы данных

Просмотр базы данных

Итоги

Дополнительные ресурсы

Обратная связь

Обратная связь

Дополнительные ресурсы