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

Статья
07/13/2023

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

В этой серии учебников вы узнаете, как создавать приложение ASP.NET веб-формы с помощью 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 веб-формы позволяет создавать динамическое содержимое для веб-приложения. Каждая ASP.NET веб-страница создается таким образом, как статическая веб-страница HTML (страница, которая не включает обработку на основе сервера), но веб-страница ASP.NET включает дополнительные элементы, которые ASP.NET распознает и обрабатывает для создания HTML при запуске страницы.

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

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

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

Откройте или переключитесь на страницу Default.aspx .
Если страница отображается в режиме конструктора, переключитесь на исходное представление.
В верхней части страницы в @Page директиве измените Title атрибут на "Приветствие", как показано в желтом цвете ниже.
```
<%@ 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 , будет интегрировано с содержимым главной страницы, которое будет описано далее в этом руководстве.

@Page Директива

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

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

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

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

Примечание.

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

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

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

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

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

Код сервера

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

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

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

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

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

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

В Обозревателе решенийнайдите и откройте страницу Site.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 из папки "Изображения " веб-приложения, которую вы добавите позже. Когда страница, использующая главную страницу, отображается в браузере, будет отображаться логотип. Если пользователь щелкает логотип, пользователь вернется на страницу Default.aspx . Тег <a> привязки HTML упаковывает элемент управления сервером изображений и позволяет включить изображение в состав ссылки. Атрибут href тега привязки указывает корневой "~/" веб-сайта в качестве расположения ссылки. По умолчанию страница Default.aspx отображается при переходе пользователя к корню веб-сайта. Элемент управления "Сервер изображений" <asp:Image> включает в себя свойства добавления, например BorderStyle, которые отображаются как HTML при отображении в браузере.

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

Эталонная страница — это файл ASP.NET с расширением .master (например, Site.Master) с предопределенным макетом, который может включать статический текст, элементы HTML и серверные элементы управления. Эталонная страница определяется специальной @Master директивой, заменяющей директиву, @Page используемую для обычных .aspx страниц.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В Обозреватель решений откройте папку Content.
Щелкните правой кнопкой мыши файл 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 на главную страницу, выполните указанные ниже действия.

На странице 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;
}

Приведенный выше код выполняется при загрузке любой страницы, которая использует главную страницу в браузере. Элемент 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.
Для настройки всего во время первого запуска потребуется немного времени.

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

Проверка базы данных

Откройте файл 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 .
На вкладке T-SQL вы увидите инструкцию SQL DDL, которая использовалась для создания таблицы. Вы также можете использовать пользовательский интерфейс на вкладке "Конструктор " для изменения схемы.
В обозревателе серверов щелкните правой кнопкой мыши базу данных WingtipToys и выберите "Закрыть подключение".
Отсоединив базу данных от Visual Studio, схему базы данных можно изменить позже в этом руководстве.
Вернитесь к Обозреватель решений by, выбрав вкладку Обозреватель решений в нижней части окна обозревателя серверов.

Итоги

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

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

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

Назад Далее

Поделиться через

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

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

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

@Page Директива

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

Код сервера

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

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

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

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

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

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

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

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

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

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

Проверка базы данных

Итоги

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

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

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