Часть 1. Обзор и создание проекта

  • Статья

Рик Андерсон

Скачать завершенный проект

Entity Framework — это платформа объектно-реляционного сопоставления. Он сопоставляет объекты предметной области в коде с сущностями в реляционной базе данных. По большей части вам не нужно беспокоиться об уровне базы данных, так как Entity Framework позаботится об этом за вас. Код управляет объектами, и изменения сохраняются в базе данных.

Сведения о руководстве

В этом руководстве вы создадите простое приложение магазина. Приложение имеет две main части. Обычные пользователи могут просматривать продукты и создавать заказы:

Снимок экрана: обычное пользовательское представление простого приложения магазина.

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

Снимок экрана: простое представление администратора приложения магазина.

Чему вы научитесь

В этом учебнике вы узнаете:

  • Как использовать Entity Framework с веб-API ASP.NET.
  • Использование knockout.js для создания динамического пользовательского интерфейса клиента.
  • Как использовать проверку подлинности с помощью форм с веб-API для проверки подлинности пользователей.

Хотя это руководство является автономным, вы можете сначала ознакомиться со следующими руководствами:

Также полезны некоторые знания о ASP.NET MVC .

Общие сведения

На высоком уровне ниже приведена архитектура приложения.

  • ASP.NET MVC создает HTML-страницы для клиента.
  • веб-API ASP.NET предоставляет операции CRUD с данными (продукты и заказы).
  • Entity Framework преобразует модели C#, используемые веб-API, в сущности базы данных.

Схема веб-приложения с использованием Entity Framework.

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

Схема, показывающая уровень базы данных, подключенный к объектной модели с помощью Entity Framework. Объектная модель подключается к формату провода с помощью веб-API.

Создание проекта Visual Studio

Проект учебника можно создать с помощью Visual Web Developer Express или полной версии Visual Studio.

На начальной странице щелкните Создать проект.

В области Шаблоны выберите Установленные шаблоны и разверните узел Visual C# . В разделе Visual C# выберите Интернет. В списке шаблонов проектов выберите ASP.NET веб-приложение MVC 4. Присвойте проекту имя ProductStore и нажмите кнопку ОК.

Снимок экрана: экран создания проекта Visual Studio. Выделено веб-приложение S P dot net M V C 4.

В диалоговом окне Создать проект ASP.NET MVC 4 выберите Интернет-приложение и нажмите кнопку ОК.

Снимок экрана проекта Visual Studio new A P dot net M V C 4 в Visual Studio. Выделен шаблон интернет-приложения.

Шаблон "Интернет-приложение" создает приложение MVC ASP.NET, поддерживающее проверку подлинности на основе форм. Если вы запускаете приложение сейчас, оно уже имеет некоторые функции:

  • Новые пользователи могут зарегистрироваться, щелкнув ссылку "Зарегистрировать" в правом верхнем углу.
  • Зарегистрированные пользователи могут войти в систему, щелкнув ссылку "Вход".

Сведения о членстве сохраняются в базе данных, которая создается автоматически. Дополнительные сведения о проверке подлинности с помощью форм в ASP.NET MVC см. в разделе Пошаговое руководство. Использование проверки подлинности с помощью форм в ASP.NET MVC.

Обновление CSS-файла

Этот шаг является косметическим, но он сделает страницы отрисовки, как на предыдущих снимках экрана.

В Обозреватель решений разверните папку Содержимое и откройте файл с именем Site.css. Добавьте следующие стили CSS:

.content {
    clear: both;
    width: 90%;
}

li {
    list-style-type: none;
}
        
#products li {
    width: 300px;
    background-color: #aaf;
    font-size: 1.5em;
    font-weight: bold;
    color: #ff0;
    margin: 0 0 5px 0;
    padding: 0 5px 0 5px;
}
        
.price  {
    float: right;
    color: #c00;
    font-size: 0.75em;
}
        
.details thead td {
    background-color: #CCCCCC;
    color: #333333;
}

.details td {
padding: 6px;
}
        
.details td.qty {
text-align: center;
}       
        
#cart a {
color: Blue;
font-size: .75em;
} 
        
#update-products li { 
    padding: 5px; 
    color: #666;
    border-style: dashed;
    border-width: 2px;
    border-color: #666;
}

#update-products li .item {
width: 120px;
display: inline-block;
text-align: right;
}

Вперед