JavaScript и AJAX

Использование JavaScript

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Современные веб-приложения практически невозможно представить без языка клиентской части - JavaScript. Даже при использовании таких серверных языков и технологий, как PHP, ASP.NET, трудно обойтись без JavaScript. Однако чистый JavaScript в реальности используется все меньше. Ему на смену приходят специальные библиотеки, в частности, jQuery. Применительно к ASP.NET MVC при создании веб-приложений библиотеки jQuery играют очень большую роль.

Подключение файлов JavaScript/jQuery

По умолчанию проект ASP.NET MVC 5 уже содержит необходимый базовый набор скриптов, в том числе библиотеки jQuery:

Библиотеки javascript в ASP.NET MVC 5

Большинство скриптов по умолчанию имеют свои двойники с суффиксом min, например, jquery-1.10.2.js и jquery-1.10.2.min.js. Оба скрипта представляют одну и ту же функциональность. Но вторая версия представляет минимизированную версию (поэтому и идет с суффиксом min). Подобные минимизированные скрипты гораздо меньше по объему (в среднем на 60%), поэтому в реальным приложениях предпочтительнее использовать именно минимизированные скрипты, так как пользователь тратит меньше времени и трафика на их загрузку. В то же время их не очень удобно читать. Поэтому для большего удобства разработчиков полные и минимизированные скрипты базовых библиотек идут вместе.

Вкратце посмотрим, зачем нужны большинство скриптов, идущих по умолчанию в проекте MVC 5 с типом аутентификации Individual User Accounts:

  • jquery-1.10.2.js - базовая библиотека jQuery, на которую опираются большинство других скриптов. В данном случае используется версия 1.10.2. Однако библиотека постоянно обновляется, поэтому можно использовать более новые версии, которые можно добавить вручную или через NuGet.

  • modernizr-2.6.2.js - библиотека, позволяющая определить, поддерживает ли браузер те или иные возможности HTML5 и CSS3

  • bootstrap.js - библиотека, позволяющая создавать адаптивные веб-приложения с использованием css-фреймворка bootstrap

  • respond.js - позволяет использовать правила media queries CSS3 в старых браузерах, которые напрямую не поддерживают данную возможность

  • jquery.validate.js - представляет функционал для валидации на стороне клиента

  • jquery.validate.unobtrusive.js - предоставляет поддержку ненавязчивой валидации модели

  • jquery-1.10.2.intellisense.js и jquery.validate-vsdoc.js - используются для поддержки документации и IntelliSense по соответствующим библиотекам в Visual Studio

В некоторых типах проектов ряд распространенных скриптов может отсутствовать, например, если делать проект MVC 5 с типом аутентификации No Athentication, то в нем будет отсутствовать скрипты валидации. В этом случае мы можем найти недостающий скрипт в NuGet и добавить его в проект:

Чтобы подключить файл javascript используется метод Render класса System.Web.Optimization.Scripts:

@Scripts.Render("~/scripts/jquery.validate.min.js")

Этот метод принимает в качестве параметра строку - полный путь к скрипту.

Также для подключения скриптов мы можем использовать хелпер Url.Content:

<script src="@Url.Content("~/scripts/jquery.validate.min.js")" type="text/javascript"></script>

Если файлы javascript будут использоваться большинством представлений приложения, то удобнее всего добавить их сразу на мастер-страницу.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
	@Scripts.Render("~/scripts/jquery-1.10.2.min.js")
    @Scripts.Render("~/scripts/validate.min.js")
</head>
<body>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>
</html>

Если же скрипты используются не на всех, а на отдельных предствлениях, то удобно определить в мастер-странице специальную секцию для скрипов, как в примере выше. А затем в представлении подключать скрипты в этой секции:

@{
    ViewBag.Title = "Index";
}
<!--Далее основное содержание представления-->

<!--секция скриптов-->
@section Scripts {
    @Scripts.Render("~/scripts/validate.min.js")
}
Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850