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

Рик Андерсон

Скачивание завершенного проекта

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

Об учебнике

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

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

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

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

Навыки, которые вы узнаете

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

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

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

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

Обзор

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

  • ASP.NET MVC создает HTML-страницы для клиента.
  • ASP.NET веб-API предоставляет операции 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 S P dot net M V C 4. Выделен шаблон приложения Интернета.

Шаблон "Интернет-приложение" создает приложение 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;
}

Далее

  • Last updated on