2

У меня есть много HTML-помощник в файле Helpers.cshtml, но некоторые из помощников (html) нуждаются в некотором jquery-действии, поэтому как я могу вызвать jquery внутри helpers.cshtml, это возможно?HTML-помощники в ASP.NET MVC 3 с действием Javascsript

Я знаю, что мы можем сохранить файл js в заголовке или на определенной странице, но я не хочу этого делать, я хочу использовать jquery или javascript только на странице, на которой загружен конкретный помощник.

У кого-нибудь есть идея? Мой сценарий: у меня есть элемент управления списком, который правильно загружается из помощника, но мне нужно применить специальную тему к списку.

Немного больше ясности

//in index.cshtml 
@Helpers.testListBox("mylist" "1,2,3,4,5,6,7") 


//in Helpers.cshtml 
@helper testListBox(string listName, string listData){ 

    //...... HTML code ......... 

    //Javascript here? 

} 
+0

Хотя я не поклонник этого, я видел, как люди справляются с этим с помощью [менеджера сценариев] (http://pietschsoft.com/post/2009/08/13/Simple-ScriptManager-for-ASPNET- MVC.aspx). Однако ненавязчивый Javascript - гораздо более чистый подход. –

ответ

5

С веб-формы, структура может автоматически включать Javascript (один раз), когда некоторые серверные элементы управления были использованы на странице; ASP.Net MVC не имеет такого средства. Похоже, это то, чего вам не хватает.

Способ сделать это на клиенте. Посмотрите на RequireJS по телефону http://requirejs.org/. Это клиентская библиотека для управления зависимостями Javascript. Это делает то, что делали Web Forms, но лучше, и это делает больше. Ваш мастер макет будет иметь сценарий тег, как это:

<script src="/Scripts/require.js" type="text/javascript" data-main="/Scripts/main"></script> 

Это может быть тег только скрипт вы включаете на каждой странице. Все остальное может быть динамически загружено только по требованию RequireJS. Это правда, что вы загружаете это на каждую страницу, но оно меньше, чем jQuery, и оно зарабатывает свое место, потому что оно так много для вас.

Используя ваш пример, скажем, у вас есть эта разметка:

@Helpers.testListBox("mylist" "1,2,3,4,5,6,7") 

и делает HTML и требует JQuery сценариев. Вы бы вынести это:

// HTML for list box here 

<script type="text/javascript> 
require(['jquery'], function($) { 
    // Do your jQuery coding here: 
    $("myList").doSomething().whatever(); 
}); 
</script> 

require функция будет загружать JQuery, если это не уже загружен, а затем выполнить свой код. Это правда, что ваш фрагмент jQuery повторяется один раз для использования HTML-помощника, но это не очень важно; этот код должен быть коротким.

RequireJS эффективно управляет зависимостями; вы можете иметь модуль A и модуль B, который зависит от A и модуля C, который зависит от B. Когда ваш клиентский код запрашивает модуль C, A и B будут загружены вместе с C и в правильном порядке и только один раз каждый. Кроме того, за исключением начальной загрузки require.js, скрипты загружаются асинхронно, поэтому рендеринг вашей страницы не задерживается загрузкой скрипта.

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

Это намного лучше, чем то, что сделал каркас веб-форм, и полностью клиентская сторона, которая, на мой взгляд, является тем, где она принадлежит.

+0

Эй, Карл, ты очень хороший, это то, чего я ожидал, отличный ответ, спасибо. Позвольте мне попробовать эту идею! – manny

0

Вы можете поместить <script> тег в хелперов тела.

+0

Пожалуйста, покажите, как ... – gdoron

+1

@gdoron: Точно так же вы используете любой другой тег. – SLaks

+1

Я не уверен, что это лучший метод для вызова