Javascript in mvc view
Answered by:
Question
User-542735381 posted
Hi I am learning MVC tutorial http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-methods-and-edit-view I tried to add some javascript in a view. I put a breakpoint on the script, but it never goes into, and the view doesn’t display the content the javascript is suposed to show. I copied the view code and the _Layout.cshtml below. The script starts as @section CtrlJavascript < . Thank you.
View code: @model IEnumerable @ < ViewBag.Title = "SearchIndex"; >@section CtrlJavascript < >.boxleft SearchIndex
@Html.ActionLink("Create New", "Create") @using (Html.BeginForm("SearchIndex", "Movies", FormMethod.Get)) <
Genre: @Html.DropDownList("movieGenre1", "All") @*Title @Html.TextBox("SearchString", "Harry Potter", new < @class = "boxleft" >)*@ @* @Html.Label("Book", new < style=";left:200px;width:50px;top:225px" >) @Html.Label("Title", new < style=";left:260px;width:50px;top:225px" >) @Html.TextBox("SearchString", "Harry Potter", new < style=";left:450px;width:100px;top:220px" >) *@
>
| @Html.DisplayNameFor(model => model.Title) | @Html.DisplayNameFor(model => model.ReleaseDate) | @Html.DisplayNameFor(model => model.Genre) | @Html.DisplayNameFor(model => model.Price) | |
|---|---|---|---|---|
| @Html.DisplayFor(modelItem => item.Title) | @Html.DisplayFor(modelItem => item.ReleaseDate) | @Html.DisplayFor(modelItem => item.Genre) | @Html.DisplayFor(modelItem => item.Price) | @Html.ActionLink("Edit", "Edit", new < >) | @Html.ActionLink("Details", "Details", new < >) | @Html.ActionLink("Delete", "Delete", new < >) |
Answers
function writeLine(ctrlTop, ctrlArray) < for (var i = 0, len = ctrlArray.length; i < len; i++) < var c = ctrlArray[i]; if (c.type == 'label') < document.write(''); > > > All replies
@RenderSection("scripts", required: false) like below. in your master page. User-542735381 posted
Hi Thank you for your help. I copied your code to my _layout.cshtml under view\shared folder. I changed the @RenderSection ( «scripts» , required : false ) to @RenderSection ( «CtrlJavascript» , required : false ) When doing debug, it show an error: $ is not defined.
User-2097295820 posted
Hi peter, I would like you to know that the problem you having is about how you arrange your javascript files. From your code I detected that Mvc is trying to run your javascript file before calling the jquery file which would not fly. so you need to rearrange. Firstly you must know that if you are using jquery. the jquery library must be called first before any of your
now what you are going to do is in your _Layout.cs file At the bottom of your _Layout file place your own javascript below this
@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) Follow my syntax below. It should work. If it doesnt then there is an error in your own jquery script. let me no how it goes. And also try using console tool of google chrome to see the error message you are given.
@if (IsSectionDefined(«CtrlJavascript»))
User-542735381 posted
Hi, Thank you for help. I added jquery reference into the _layout.cshtml before $ ( document ). ready ( function ()<>); I leave the javascript still in @section CtrlJavascript
@model IEnumerable @ < ViewBag.Title = "SearchIndex"; > @section CtrlJavascript< @**@ >.boxleft SearchIndex
@Html.ActionLink("Create New", "Create") @using (Html.BeginForm("SearchIndex", "Movies", FormMethod.Get)) <
Genre: @Html.DropDownList("movieGenre1", "All") @*Title @Html.TextBox("SearchString", "Harry Potter", new < @class = "boxleft" >)*@ @* @Html.Label("Book", new < style=";left:200px;width:50px;top:225px" >) @Html.Label("Title", new < style=";left:260px;width:50px;top:225px" >) @Html.TextBox("SearchString", "Harry Potter", new < style=";left:450px;width:100px;top:220px" >) *@
>
| @Html.DisplayNameFor(model => model.Title) | @Html.DisplayNameFor(model => model.ReleaseDate) | @Html.DisplayNameFor(model => model.Genre) | @Html.DisplayNameFor(model => model.Price) | |
|---|---|---|---|---|
| @Html.DisplayFor(modelItem => item.Title) | @Html.DisplayFor(modelItem => item.ReleaseDate) | @Html.DisplayFor(modelItem => item.Genre) | @Html.DisplayFor(modelItem => item.Price) | @Html.ActionLink("Edit", "Edit", new < >) | @Html.ActionLink("Details", "Details", new < >) | @Html.ActionLink("Delete", "Delete", new < >) |
JavaScript и AJAX
Современные веб-приложения практически невозможно представить без языка клиентской части — JavaScript. Даже при использовании таких серверных языков и технологий, как PHP, ASP.NET, трудно обойтись без JavaScript. Однако чистый JavaScript в реальности используется все меньше. Ему на смену приходят специальные библиотеки, в частности, jQuery. Применительно к ASP.NET MVC при создании веб-приложений библиотеки jQuery играют очень большую роль.
Подключение файлов JavaScript/jQuery
По умолчанию проект ASP.NET MVC 5 уже содержит необходимый базовый набор скриптов, в том числе библиотеки jQuery:
Большинство скриптов по умолчанию имеют свои двойники с суффиксом 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 :
Этот метод принимает в качестве параметра строку — полный путь к скрипту.
Также для подключения скриптов мы можем использовать хелпер Url.Content :
Если файлы javascript будут использоваться большинством представлений приложения, то удобнее всего добавить их сразу на мастер-страницу.
@Styles.Render("~/Content/css") @Scripts.Render("~/scripts/jquery-1.10.2.min.js") @Scripts.Render("~/scripts/validate.min.js") @RenderBody() @RenderSection("scripts", required: false) Если же скрипты используются не на всех, а на отдельных предствлениях, то удобно определить в мастер-странице специальную секцию для скрипов, как в примере выше. А затем в представлении подключать скрипты в этой секции: