Одностраничное приложение: шаблон KnockoutJSSingle Page Application: KnockoutJS template

по Майк Уоссонby Mike Wasson

Шаблон "маскирование MVC" является частью ASP.NET and Web Tools 2012,2The Knockout MVC Template is part of ASP.NET and Web Tools 2012.2

Загрузка ASP.NET and Web Tools 2012,2Download ASP.NET and Web Tools 2012.2

Обновление ASP.NET and Web Tools 2012,2 содержит шаблон одностраничного приложения (SPA) для ASP.NET MVC 4.The ASP.NET and Web Tools 2012.2 update includes a Single-Page Application (SPA) template for ASP.NET MVC 4. Этот шаблон предназначен для быстрого создания интерактивных веб-приложений на стороне клиента.This template is designed to get you started quickly building interactive client-side web apps.

"Одностраничное приложение" (SPA) — это общий термин для веб-приложения, которое загружает одну HTML-страницу и обновляет страницу динамически, вместо того, чтобы загружать новые страницы."Single-page application" (SPA) is the general term for a web application that loads a single HTML page and then updates the page dynamically, instead of loading new pages. После начальной загрузки страницы Протокол SPA обращается к серверу через запросы AJAX.After the initial page load, the SPA talks with the server through AJAX requests.

AJAX не является ничего новым, но на сегодняшний день существуют платформы JavaScript, упрощающие создание и обслуживание большого сложного приложения SPA.AJAX is nothing new, but today there are JavaScript frameworks that make it easier to build and maintain a large sophisticated SPA application. Кроме того, HTML 5 и CSS3 упрощают создание многофункциональных интерфейсов пользователя.Also, HTML 5 and CSS3 are making it easier to create rich UIs.

Чтобы приступить к работе, шаблон SPA создает пример приложения "список задач".To get you started, the SPA template creates a sample "To-do list" application. В этом учебнике мы рассмотрим этот шаблон в интерактивном обзоре.In this tutorial, we'll take a guided tour of the template. Сначала рассмотрим само приложение списка задач, а затем изучите технологические компоненты, которые делают его работоспособным.First we'll look at the To-do list application itself, then examine the technology pieces that make it work.

Создание нового проекта шаблона SPACreate a New SPA Template Project

ТребованияRequirements:

  • Visual Studio 2012 или Visual Studio Express 2012 для WebVisual Studio 2012 or Visual Studio Express 2012 for Web
  • Обновление ASP.NET Web Tools 2012,2.ASP.NET Web Tools 2012.2 update. Это обновление можно установить здесь.You can install the update here.

Запустите Visual Studio и выберите создать проект на начальной странице.Start Visual Studio and select New Project from the Start page. Либо в меню файл выберите создать , а затем — проект.Or, from the File menu, select New and then Project.

В области шаблоны выберите Установленные шаблоны и разверните узел C# визуального элемента.In the Templates pane, select Installed Templates and expand the Visual C# node. В разделе C#визуальный элемент выберите веб.Under Visual C#, select Web. В списке шаблонов проектов выберите ASP.NET MVC 4 веб-приложение.In the list of project templates, select ASP.NET MVC 4 Web Application. Задайте для проекта имя и щелкните ОК.Name the project and click OK.

В мастере создания проектов выберите одностраничное приложение.In the New Project wizard, select Single Page Application.

Нажмите клавишу F5, чтобы создать и запустить приложение.Press F5 to build and run the application. При первом запуске приложения отображается экран входа в систему.When the application first runs, it displays a login screen.

Щелкните "зарегистрироваться" ссылку и создайте нового пользователя.Click the "Sign up" link and create a new user.

После входа в приложение создается список задач по умолчанию с двумя элементами.After you log in, the application creates a default Todo list with two items. Можно щелкнуть "добавить список дел", чтобы добавить новый список.You can click "Add Todo list" to add a new list.

Переименуйте список, добавьте элементы в список и снимите флажок.Rename the list, add items to the list, and check them off. Можно также удалить элементы или весь список.You can also delete items or delete an entire list. Изменения автоматически сохраняются в базе данных на сервере (на этом этапе на самом деле это LocalDB, так как приложение выполняется локально).The changes are automatically persisted to a database on the server (actually LocalDB at this point, because you are running the application locally).

Архитектура шаблона SPAArchitecture of the SPA Template

На этой диаграмме показаны основные стандартные блоки для приложения.This diagram shows the main building blocks for the application.

На стороне сервера ASP.NET MVC обслуживает HTML, а также выполняет проверку подлинности на основе форм.On the server side, ASP.NET MVC serves the HTML and also handles forms-based authentication.

Веб-API ASP.NET обрабатывает все запросы, связанные с Тодолистс и ToDoItems, включая получение, создание, обновление и удаление.ASP.NET Web API handles all requests that relate to the ToDoLists and ToDoItems, including getting, creating, updating and deleting. Клиент обменивается данными с веб-API в формате JSON.The client exchanges data with Web API in JSON format.

Entity Framework (EF) — это уровень O/RM.Entity Framework (EF) is the O/RM layer. Он предназначен для объектно-ориентированного мира ASP.NET и базовой базы данных.It mediates between the object-oriented world of ASP.NET and the underlying database. База данных использует LocalDB, но ее можно изменить в файле Web. config.The database uses LocalDB but you can change this in the Web.config file. Обычно LocalDB используется для локальной разработки, а затем развертывается в базе данных SQL на сервере с использованием преобразования EF Code-First.Typically you would use LocalDB for local development and then deploy to a SQL database on the server, using EF code-first migration.

На стороне клиента библиотека выколачивание. js обрабатывает обновления страницы из запросов AJAX.On the client side, the Knockout.js library handles page updates from AJAX requests. Функция маскирования использует привязку данных для синхронизации страницы с последними данными.Knockout uses data binding to synchronize the page with the latest data. Таким образом, вам не нужно писать код, который проходит через данные JSON и обновляет модель DOM.That way, you don't have to write any of the code that walks through the JSON data and updates the DOM. Вместо этого в HTML-коде помещаются декларативные атрибуты, которые указывают на выколачивание, как представлять данные.Instead, you put declarative attributes in the HTML that tell Knockout how to present the data.

Большое преимущество этой архитектуры заключается в том, что он отделяет уровень представления от логики приложения.A big advantage of this architecture is that it separates the presentation layer from the application logic. Можно создать часть веб-API, не зная ничего о том, как будет выглядеть веб-страница.You can create the Web API portion without knowing anything about how your web page will look. На стороне клиента создается "представление модели" для представления этих данных, а модель представления использует маскирование для привязки к HTML.On the client side, you create a "view model" to represent that data, and the view model uses Knockout to bind to the HTML. Это позволяет легко изменять код HTML, не изменяя модель представления.That lets you easily change the HTML without changing the view model. (Чуть позже мы рассмотрим выколачивание.)(We'll look at Knockout a bit later.)

МоделиModels

В проекте Visual Studio папка Models содержит модели, используемые на стороне сервера.In the Visual Studio project, the Models folder contains the models that are used on the server side. (Существуют также модели на стороне клиента. Мы будем приступить к ним.)(There are also models on the client side; we'll get to those.)

TodoItem, TodoListTodoItem, TodoList

Это модели баз данных для Entity Framework Code First.These are the database models for Entity Framework Code First. Обратите внимание, что эти модели имеют свойства, указывающие на друг друга.Notice that these models have properties that point to each other. ToDoList содержит коллекцию ToDoItems, и каждая ToDoItem имеет ссылку на ее родительский ToDoList.ToDoList contains a collection of ToDoItems, and each ToDoItem has a reference back to its parent ToDoList. Эти свойства называются свойствами навигации, и они представляют связь «один ко многим» со списком задач и его элементами.These properties are called navigation properties, and they represent the one-to-many relation a to-do list and its to-do items.

Класс ToDoItem также использует атрибут [фореигнкэй] , чтобы указать, что ToDoListId является внешним ключом в ToDoList таблице.The ToDoItem class also uses the [ForeignKey] attribute to specify that ToDoListId is a foreign key into the ToDoList table. Это указывает EF добавить в базу данных ограничение внешнего ключа.This tells EF to add a foreign-key constraint to the database.

[ForeignKey("TodoList")]
public int TodoListId { get; set; }
public virtual TodoList TodoList { get; set; }

Тодоитемдто, ТодолистдтоTodoItemDto, TodoListDto

Эти классы определяют данные, которые будут отправлены клиенту.These classes define the data that will be sent to the client. "DTO" означает "объект передачи данных"."DTO" stands for "data transfer object." DTO определяет, как сущности будут сериализованы в JSON.The DTO defines how the entities will be serialized into JSON. Как правило, существует несколько причин использовать DTO:In general, there are several reasons to use DTOs:

  • Для управления сериализуемыми свойствами.To control which properties are serialized. DTO может содержать подмножество свойств из модели предметной области.The DTO can contain a subset of the properties from the domain model. Это можно сделать в целях безопасности (чтобы скрыть конфиденциальные данные) или просто уменьшить объем отправляемых данных.You might do this for security reasons (to hide sensitive data) or simply to reduce the amount of data that you send.
  • Для изменения формы данных — например, для выравнивания более сложной структуры данных.To change the shape of the data – e.g. to flatten a more complex data structure.
  • Для сохранения любой бизнес-логики из DTO (разделение проблем).To keep any business logic out of the DTO (separation of concerns).
  • Если модели предметной области не могут быть сериализованы по какой бы то ни было причине.If your domain models cannot be serialized for some reason. Например, циклические ссылки могут вызвать проблемы при сериализации объекта. Существуют способы решения этой проблемы в веб-API (см. раздел Обработка циклических ссылок на объекты). но использование DTO просто позволяет полностью избежать проблемы.For example, circular references can cause problems when you serialize an object There are ways to handle this problem in Web API (see Handling Circular Object References); but using a DTO simply avoids the problem altogether.

В шаблоне SPA DTO содержит те же данные, что и модели предметной области.In the SPA template, the DTOs contains the same data as the domain models. Однако они все еще полезны, так как они позволяют избежать циклических ссылок из свойств навигации и демонстрируют общую модель DTO.However, they are still useful because they avoid circular references from the navigation properties, and they demonstrate the general DTO pattern.

AccountModels.csAccountModels.cs

Этот файл содержит модели для членства в сайтах.This file contains models for site membership. Класс UserProfile определяет схему для профилей пользователей в базе данных членства.The UserProfile class defines the schema for user profiles in the membership DB. (В данном случае единственными сведениями являются идентификатор пользователя и имя пользователя.) Другие классы модели в этом файле используются для создания форм регистрации пользователей и входа в систему.(In this case, the only information is the user ID and the user name.) The other model classes in this file are used to create the user registration and login forms.

Entity FrameworkEntity Framework

Шаблон SPA использует EF Code First.The SPA template uses EF Code First. В Code First разработки сначала определяются модели в коде, а затем EF использует модель для создания базы данных.In Code First development, you define the models first in code, and then EF uses the model to create the database. EF также можно использовать с существующей базой данных (Database First).You can also use EF with an existing database (Database First).

Класс TodoItemContext в папке Models является производным от DbContext.The TodoItemContext class in the Models folder derives from DbContext. Этот класс обеспечивает "привязывание" между моделями и EF.This class provides the "glue" between the models and EF. TodoItemContext содержит коллекцию ToDoItem и коллекцию TodoList.The TodoItemContext holds a ToDoItem collection and a TodoList collection. Чтобы запросить базу данных, просто напишите запрос LINQ к этим коллекциям.To query the database, you simply write a LINQ query against these collections. Например, вот как можно выбрать все списки задач для пользователя «Мария»:For example, here is how you can select all of the to-do lists for user "Alice":

TodoItemContext db = new TodoItemContext();
IEnumerable<TodoList> lists = 
    from td in db.TodoLists where td.UserId == "Alice" select td;

Можно также добавлять новые элементы в коллекцию, обновлять элементы или удалять элементы из коллекции и сохранять изменения в базе данных.You can also add new items to the collection, update items, or delete items from the collection, and persist the changes to the database.

Контроллеры веб-API ASP.NETASP.NET Web API Controllers

В веб-API ASP.NET контроллеры — это объекты, обрабатывающие HTTP-запросы.In ASP.NET Web API, controllers are objects that handle HTTP requests. Как уже упоминалось, шаблон SPA использует веб-API для включения операций CRUD на экземплярах ToDoList и ToDoItem.As mentioned, the SPA template uses Web API to enable CRUD operations on ToDoList and ToDoItem instances. Контроллеры находятся в папке Controllers решения.The controllers are located in the Controllers folder of the solution.

  • TodoController: обрабатывает HTTP-запросы для элементов задачTodoController: Handles HTTP requests for to-do items
  • TodoListController: обрабатывает HTTP-запросы для списков задач.TodoListController: Handles HTTP requests for to-do lists.

Эти имена являются значащими, так как веб-API сопоставляет путь URI с именем контроллера.These names are significant, because Web API matches the URI path to the controller name. (Чтобы узнать, как веб-API направляет запросы HTTP к контроллерам, см. раздел Маршрутизация в веб-API ASP.NET.)(To learn how Web API routes HTTP requests to controllers, see Routing in ASP.NET Web API.)

Рассмотрим класс ToDoListController.Let's look at the ToDoListController class. Он содержит один элемент данных:It contains a single data member:

private TodoItemContext db = new TodoItemContext();

TodoItemContext используется для связи с EF, как описано выше.The TodoItemContext is used to communicate with EF, as described earlier. Методы в контроллере реализуют операции CRUD.The methods on the controller implement the CRUD operations. Веб-API сопоставляет запросы HTTP от клиента с методами контроллера следующим образом:Web API maps HTTP requests from the client to controller methods, as follows:

HTTP-запросHTTP Request Метод контроллераController Method DescriptionDescription
GET/api/todoGET /api/todo GetTodoLists Возвращает коллекцию списков задач.Gets a collection of to-do lists.
ПОЛУЧИТЬидентификатор /АПИ/Тодо/GET /api/todo/id GetTodoList Получает список задач по ИДЕНТИФИКАТОРу.Gets a to-do list by ID
Размещениеидентификатора /АПИ/Тодо/PUT /api/todo/id PutTodoList Обновляет список задач.Updates a to-do list.
POST/api/todoPOST /api/todo PostTodoList Создает новый список задач.Creates a new to-do list.
УДАЛИТЬидентификатор /АПИ/Тодо/DELETE /api/todo/id DeleteTodoList Удаляет список TODO.Deletes a TODO list.

Обратите внимание, что идентификаторы URI для некоторых операций содержат заполнители для значения идентификатора.Notice that the URIs for some operations contain placeholders for the ID value. Например, чтобы удалить список в с ИДЕНТИФИКАТОРом 42, URI /api/todo/42.For example, to delete a to-list with an ID of 42, the URI is /api/todo/42.

Дополнительные сведения об использовании веб-API для операций CRUD см. в разделе Создание веб-API, поддерживающего операции CRUD.To learn more about using Web API for CRUD operations, see Creating a Web API that Supports CRUD Operations. Код для этого контроллера довольно прост.The code for this controller is fairly straightforward. Вот несколько интересных моментов:Here are some interesting points:

  • Метод GetTodoLists использует запрос LINQ для фильтрации результатов по ИДЕНТИФИКАТОРу вошедшего в систему пользователя.The GetTodoLists method uses a LINQ query to filter the results by the ID of the logged-in user. Таким образом, пользователь видит только данные, принадлежащие ему.That way, a user only sees the data that belongs to him or her. Кроме того, обратите внимание, что инструкция SELECT используется для преобразования экземпляров ToDoList в экземпляры TodoListDto.Also, notice that a Select statement is used to convert the ToDoList instances into TodoListDto instances.
  • Методы размещения и POST перед изменением базы данных проверяют состояние модели.The PUT and POST methods check the model state before modifying the database. Если ModelState. IsValid имеет значение false, эти методы возвращают HTTP 400, недопустимый запрос.If ModelState.IsValid is false, these methods return HTTP 400, Bad Request. Дополнительные сведения см. в статье Проверка модели в веб-API при проверке модели.Read more about model validation in Web API at Model Validation.
  • Класс Controller также снабжен атрибутом [авторизовать] .The controller class is also decorated with the [Authorize] attribute. Этот атрибут проверяет, прошел ли HTTP-запрос проверку подлинности.This attribute checks whether the HTTP request is authenticated. Если запрос не прошел проверку подлинности, клиент получает HTTP 401 и не авторизован.If the request is not authenticated, the client receives HTTP 401, Unauthorized. Дополнительные сведения см. в статье Проверка подлинности при проверке подлинности и авторизация веб-API ASP.NET.Read more about authentication at Authentication and Authorization in ASP.NET Web API.

Класс TodoController очень похож на TodoListController.The TodoController class is very similar to TodoListController. Самым большим отличием является то, что он не определяет методы GET, так как клиент получает элементы списка задач вместе с каждым из них.The biggest difference is that it does not define any GET methods, because the client will get the to-do items along with each to-do list.

Контроллеры и представления MVCMVC Controllers and Views

Контроллеры MVC также находятся в папке Controllers решения.The MVC controllers are also located in the Controllers folder of the solution. HomeController отображает основной HTML-код для приложения.HomeController renders the main HTML for the application. Представление для контроллера Home определяется в Views/Home/Index. cshtml.The view for the Home controller is defined in Views/Home/Index.cshtml. Представление "Домашняя страница" отображает другое содержимое в зависимости от того, вошел ли пользователь в систему:The Home view renders different content depending on whether the user is logged in:

@if (@User.Identity.IsAuthenticated)
{
    // ....
}

Когда пользователи вошли в систему, они видят основной пользовательский интерфейс.When users are logged in, they see the main UI. В противном случае они увидят панель входа.Otherwise, they see the login panel. Обратите внимание, что эта условная отрисовка происходит на стороне сервера.Note that this conditional rendering happens on the server side. Никогда не пытайтесь скрыть конфиденциальное содержимое на стороне—клиента. все, что вы отправляете в ОТВЕТе HTTP, видно пользователю, который наблюдает за необработанными HTTP-сообщениями.Never try to hide sensitive content on the client side—anything that you send in an HTTP response is visible to someone who is watching the raw HTTP messages.

Клиентский сценарий JavaScript и выколачивание. jsClient-Side JavaScript and Knockout.js

Теперь давайте перейдем с серверной стороны приложения на клиент.Now let's turn from the server side of the application to the client. Шаблон SPA использует сочетание jQuery и выколачивание. js для создания плавного интерактивного пользовательского интерфейса.The SPA template uses a combination of jQuery and Knockout.js to create a smooth, interactive UI. Маскирование. js — это библиотека JavaScript, которая упрощает привязку HTML к данным.Knockout.js is a JavaScript library that makes it easy to bind HTML to data. В маскировании. js используется шаблон с именем Model-View-ViewModel.Knockout.js uses a pattern called "Model-View-ViewModel."

  • Модель представляет собой данные домена (списки задач и элементы ToDo).The model is the domain data (ToDo lists and ToDo items).
  • Представление — это HTML-документ.The view is the HTML document.
  • Модель представления — это объект JavaScript, который содержит данные модели.The view-model is a JavaScript object that holds the model data. Модель представления — это абстракция кода пользовательского интерфейса.The view-model is a code abstraction of the UI. Он не имеет сведений о представлении HTML.It has no knowledge of the HTML representation. Вместо этого он представляет абстрактные функции представления, например "список элементов ToDo".Instead, it represents abstract features of the view, such as "a list of ToDo items".

Представление привязано к данным в модели представления.The view is data-bound to the view-model. Обновления модели представления автоматически отражаются в представлении.Updates to the view-model are automatically reflected in the view. Привязки также работают и в другом направлении.Bindings work the other direction as well. События в модели DOM (например, щелчки) привязаны к данным в моделях представления, которые вызывают вызовы AJAX.Events in the DOM (such as clicks) are data-bound to functions on the view model, which trigger AJAX calls.

Шаблон SPA организует клиентский сценарий JavaScript на три уровня:The SPA template organizes the client-side JavaScript into three layers:

  • TODO. DataContext. js: отправляет запросы AJAX.todo.datacontext.js: Sends AJAX requests.
  • TODO. Model. js: определяет модели.todo.model.js: Defines the models.
  • TODO. ViewModel. js: определяет модель представления.todo.viewmodel.js: Defines the view model.

Эти файлы сценариев находятся в папке Scripts/App решения.These script files are located in the Scripts/app folder of the solution.

TODO. DataContext обрабатывает все вызовы AJAX к контроллерам веб-API.todo.datacontext handles all AJAX calls to the Web API controllers. (Вызовы AJAX для входа определяются в других местах в ажакслогин. js.)(The AJAX calls for logging in are defined elsewhere, in ajaxlogin.js.)

TODO. Model. js определяет модели на стороне клиента (браузер) для списков задач.todo.model.js defines the client-side (browser) models for the to-do lists. Существует два класса модели: todoItem и todoList.There are two model classes: todoItem and todoList.

Многие свойства в классах модели имеют тип "Ko. Наблюдаемый".Many of the properties in the model classes are of type "ko.observable". Observable — это то, как маскирование делает свою волшебную работу.Observables are how Knockout does its magic. Из документации по маскированию: наблюдаемый объект является объектом JavaScript, который может уведомлять подписчиков об изменениях.From the Knockout documentation: An observable is a "JavaScript object that can notify subscribers about changes." При изменении значения наблюдаемых изменений выколачивание обновляет все элементы HTML, привязанные к этим observable.When the value of an observable changes, Knockout updates any HTML elements that are bound to those observables. Например, todoItem имеет observable для свойств Title и Done:For example, todoItem has observables for the title and isDone properties:

self.title = ko.observable(data.title);
self.isDone = ko.observable(data.isDone);

Вы также можете подписываться на наблюдаемый код.You can also subscribe to an observable in code. Например, класс todoItem подписывается на изменения в свойствах «Done» и «Title»:For example, the todoItem class subscribes to changes in the "isDone" and "title" properties:

saveChanges = function () {
    return datacontext.saveChangedTodoItem(self);
};

// Auto-save when these properties change
self.isDone.subscribe(saveChanges);
self.title.subscribe(saveChanges);

Просмотр моделиView Model

Модель представления определена в TODO. ViewModel. js.The view model is defined in todo.viewmodel.js. Модель представления — это центральная точка, в которой приложение привязывает элементы HTML-страницы к данным домена.The view model is the central point where the application binds the HTML page elements to the domain data. В шаблоне SPA модель представления содержит наблюдаемый массив Тодолистс.In the SPA template, the view model contains an observable array of todoLists. Следующий код в модели представления указывает маскирование для применения привязок:The following code in the view model tells Knockout to apply the bindings:

ko.applyBindings(window.todoApp.todoListViewModel);

HTML и привязка данныхHTML and Data Binding

Основной HTML-код для страницы определяется в Views/Home/Index. cshtml.The main HTML for the page is defined in Views/Home/Index.cshtml. Так как мы используем привязку данных, HTML — это только шаблон, для которого фактически отображается.Because we are using data-binding, the HTML is only a template for what actually gets rendered. Маскирование использует декларативные привязки.Knockout uses declarative bindings. Элементы страницы привязываются к данным путем добавления атрибута привязки данных к элементу.You bind page elements to data by adding a "data-bind" attribute to the element. Вот очень простой пример, взятый из документации по маскированию:Here is a very simple example, taken from the Knockout documentation:

<p>There are <span data-bind="text: myItems().count"></span> items<p>

В этом примере выколачивание обновляет содержимое элемента <span> значением myItems.count().In this example, Knockout updates the contents of the <span> element with the value of myItems.count(). При изменении этого значения выколачивание обновляет документ.Whenever this value changes, Knockout updates the document.

Маскирование предоставляет ряд различных типов привязки.Knockout provides a number of different binding types. Ниже приведены некоторые привязки, используемые в шаблоне SPA:Here are some of the bindings used in the SPA template:

  • foreach: позволяет выполнить итерацию цикла и применить ту же разметку к каждому элементу в списке.foreach: Lets you iterate through a loop and apply the same markup to each item in the list. Используется для отрисовки списков задач и элементов задач.This is used to render the to-do lists and to-do items. В рамках foreachпривязки применяются к элементам списка.Within the foreach, the bindings are applied to the elements of the list.
  • видимый: используется для переключения видимости.visible: Used to toggle visibility. Скрыть разметку, если коллекция пуста, или сделать сообщение об ошибке видимым.Hide markup when a collection is empty, or make the error message visible.
  • значение: используется для заполнения значений формы.value: Used to populate form values.
  • Click: привязка события Click к функции в модели представления.click: Binds a click event to a function on the view model.

Защита от защиты от CSRFAnti-CSRF Protection

Подделка межсайтовых запросов (CSRF) — это атака, при которой вредоносный сайт отправляет запрос на уязвимый сайт, на котором пользователь в данный момент вошел в систему.Cross-Site Request Forgery (CSRF) is an attack where a malicious site sends a request to a vulnerable site where the user is currently logged in. Чтобы помочь предотвратить атаки CSRF, ASP.NET MVC использует маркеры защиты от подделки, также называемые маркерами проверки запросов.To help prevent CSRF attacks, ASP.NET MVC uses anti-forgery tokens, also called request verification tokens. Идея состоит в том, что сервер помещает токен, созданный случайным образом, в веб-страницу.The idea is that the server puts a randomly generated token into a web page. Когда клиент отправляет данные на сервер, он должен включить это значение в сообщение запроса.When the client submits data to the server, it must include this value in the request message.

Маркеры защиты от подделки работают, так как вредоносная страница не может читать маркеры пользователя из-за политик того же происхождения.Anti-forgery tokens work because the malicious page cannot read the user's tokens, due to same-origin policies. (Политики того же происхождения запрещают другим документам, размещенным на двух разных сайтах, получать доступ к содержимому друг друга.)(Same-origin policies prevent documents hosted on two different sites from accessing each other's content.)

ASP.NET MVC предоставляет встроенную поддержку маркеров защиты от подделки через класс с защитой подделки и атрибут [ValidateAntiForgeryToken] .ASP.NET MVC provides built-in support for anti-forgery tokens, through the AntiForgery class and the [ValidateAntiForgeryToken] attribute. В настоящее время эта функция не встроена в веб-API.Currently, this functionality is not built into Web API. Однако шаблон SPA включает пользовательскую реализацию для веб-API.However, the SPA template includes a custom implementation for Web API. Этот код определен в классе ValidateHttpAntiForgeryTokenAttribute, который находится в папке Filters решения.This code is defined in the ValidateHttpAntiForgeryTokenAttribute class, which is located in the Filters folder of the solution. Дополнительные сведения о функции Anti-CSRF в веб-API см. в разделе предотвращение атак с подделкой межсайтовых запросов (CSRF).To learn more about anti-CSRF in Web API, see Preventing Cross-Site Request Forgery (CSRF) Attacks.

ЗаключениеConclusion

Шаблон SPA предназначен для быстрого создания современных интерактивных веб-приложений.The SPA template is designed to get you started quickly writing modern, interactive web applications. Она использует библиотеку выколачивание. js для разделения представления (разметки HTML) от данных и логики приложения.It uses the Knockout.js library to separate presentation (HTML markup) from the data and application logic. Но маскирование не является единственной библиотекой JavaScript, которую можно использовать для создания SPA.But Knockout is not the only JavaScript library you can use to create a SPA. Если вы хотите изучить другие варианты, ознакомьтесь с шаблонами Spa, созданными сообществом.If you want to explore some other options, take a look at the community-created SPA templates.