Включить файл JavaScript в частичный просмотр

Мне интересно, что лучше всего для включения файлов javascript в частичные виды. После рендеринга это закончится как тег js include в середине моей страницы html. С моей точки зрения, это не очень хороший способ сделать это. Они принадлежат к тегу заголовка и поэтому не должны препятствовать браузеру отображать html за один раз.

Пример: Я использую плагин jquery picturegallery внутри частичного просмотра "PictureGallery", так как это частичное представление будет использоваться на нескольких страницах. Этот плагин нужно загружать только при использовании этого представления и Мне не нужно знать, какие плагины используют каждый частичный вид...

Спасибо за ваши ответы.

Ответ 1

Кажется очень похожим на этот вопрос: Связывание библиотек JavaScript в элементах управления пользователями

Я отвечу на свой ответ, что этот вопрос здесь.

Я бы определенно посоветовал не помещать их в частичные части именно по той причине, о которой вы говорите. Существует высокая вероятность того, что один вид может вывести две частичные части, которые имеют ссылки на один и тот же файл js. Вы также получили удар по загрузке js перед загрузкой остальной части html.

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

Вот пример главной страницы - это довольно понятно.

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
    ... BLAH ...
    <asp:ContentPlaceHolder ID="AdditionalHead" runat="server" />
    ... BLAH ...
    <%= Html.CSSBlock("/styles/site.css") %>
    <%= Html.CSSBlock("/styles/ie6.css", 6) %>
    <%= Html.CSSBlock("/styles/ie7.css", 7) %>
    <asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" />
</head>
<body>
    ... BLAH ...
    <%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %>
    <%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %>
    <asp:ContentPlaceHolder ID="AdditionalJS" runat="server" />
</body>

Html.CSSBlock и Html.JSBlock - это, очевидно, мои собственные расширения, но опять же, они сами объясняют, что они делают.

Тогда, скажем, в представлении SignUp.aspx, я бы имел

<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server">
    <%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %>
</asp:Content>

HTHs, Charles

Ps. Вот последующий вопрос, который я задал о миниировании и конкатенации js файлов: Конкатенация и минимизация JS на лету ИЛИ во время сборки - ASP.NET MVC

РЕДАКТИРОВАТЬ: В соответствии с запросом моего другого ответа, моя реализация .JSBlock(a, b) в соответствии с запросом

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName)
{
    return html.JSBlock(fileName, string.Empty);
}

public static MvcHtmlString JSBlock(this HtmlHelper html, string fileName, string releaseFileName)
{
    if (string.IsNullOrEmpty(fileName))
        throw new ArgumentNullException("fileName");

    string jsTag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>",
                                 html.MEDebugReleaseString(fileName, releaseFileName));

    return MvcHtmlString.Create(jsTag);
}

И тогда, когда происходит волшебство...

    public static MvcHtmlString MEDebugReleaseString(this HtmlHelper html, string debugString, string releaseString)
    {
        string toReturn = debugString;
#if DEBUG
#else
        if (!string.IsNullOrEmpty(releaseString))
            toReturn = releaseString;
#endif
        return MvcHtmlString.Create(toReturn);
    }

Ответ 2

Причина, по которой вы помещаете script в нижней части страницы, - это обеспечить загрузку dom, прежде чем пытаться манипулировать. Это также может быть достигнуто в чем-то вроде $(document).ready(callback); jQuery.

Я разделяю представление о том, чтобы не помещать внедренный JavaScript в html. Вместо этого я использую помощник Html для создания пустого div для использования в качестве команды сервера. Вспомогательный sig - Html.ServerData(имя строки, данные объекта);

Я использую этот метод ServerData для инструкций от сервера к клиенту. Тег div сохраняет его в чистоте, и атрибут "data-" действителен html5.

Для инструкции loadScript я могу сделать что-то подобное в моем ascx или aspx:

<%= Html.ServerData("loadScript", new { url: "pathTo.js" }) %>

Или добавьте другого помощника, чтобы сделать это, что выглядит немного чище:

<%= Html.LoadScript("~/path/to.js") %>

Выход html будет выглядеть следующим образом:

<div name="loadScript" data-server="encoded json string">

Затем у меня есть метод jQuery, который может найти любой тег данных сервера: $ (ContainingElement).serverData( "loadScript" );//возвращает массив jQuery как декодированных объектов json.

Клиент может выглядеть примерно так:

var script = $(containingelement").serverData("loadScript");
$.getScript(script.url, function () {
    // script has been loaded - can do stuff with it now
});

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

Если кто-то заинтересован в полной версии этого (от MVC до расширения jQuery), я был бы рад продемонстрировать эту технику более подробно. В противном случае - надеется, что это даст кому-то новый способ приблизиться к этой сложной проблеме.

Ответ 3

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

Ниже приведен мой класс HtmlExtensions, который позволяет вам сделать это на главной странице:

<%=Html.RenderJScripts() %>

Мой класс HtmlExtensions:

public static class HtmlExtensions
{
    private const string JSCRIPT_VIEWDATA = "__js";

    #region Javascript Inclusions

    public static void JScript(this HtmlHelper html, string scriptLocation)
    {
        html.JScript(scriptLocation, string.Empty);
    }

    public static void JScript(this HtmlHelper html, string scriptLocationDebug, string scriptLocationRelease)
    {
        if (string.IsNullOrEmpty(scriptLocationDebug))
            throw new ArgumentNullException("fileName");

        string jsTag = "<script type=\"text/javascript\" src=\"{0}\"></script>";

#if DEBUG
        jsTag = string.Format(jsTag, scriptLocationDebug);
#else
        jsTag = string.Format(jsTag, !string.IsNullOrEmpty(scriptLocationRelease) ? scriptLocationRelease : scriptLocationDebug);
#endif

        registerJScript(html, jsTag);
    }

    public static MvcHtmlString RenderJScripts(this HtmlHelper html)
    {
        List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
        string result = string.Empty; ;
        if(jscripts != null)
        {
            result = string.Join("\r\n", jscripts);
        }
        return MvcHtmlString.Create(result);
    }

    private static void registerJScript(HtmlHelper html, string jsTag)
    {
        List<string> jscripts = html.ViewContext.TempData[JSCRIPT_VIEWDATA] as List<string>;
        if(jscripts == null) jscripts = new List<string>();

        if(!jscripts.Contains(jsTag))
            jscripts.Add(jsTag);

        html.ViewContext.TempData[JSCRIPT_VIEWDATA] = jscripts;
    }

    #endregion

}

Что происходит?
Класс выше расширяет HtmlHelper с помощью методов добавления ссылок javascript в коллекцию, которая хранится в коллекции HtmlHelper.ViewContext.TempData. В конце главной страницы я помещаю <%=Html.RenderJScripts() %>, который будет зацикливать коллекцию jscripts внутри HtmlHelper.ViewContext.TempData и отобразить их на выходе.

Однако существует недостаток. Вы должны убедиться, что вы не визуализируете скрипты, прежде чем добавлять их. Если вы хотите сделать это для ссылок css, например, это не сработает, потому что вы должны поместить их в тег <head> на своей странице, а htmlhelper отобразит результат, прежде чем вы добавите ссылку.

Ответ 4

Это похоже на аналогичный (хотя и не полностью) вопрос. Неправильно ли возвращать частичные представления, содержащие javascript?

Ответ 5

Мое предпочтение будет заключаться в создании страницы plugin.master, которая наследуется от вашего основного сайта Site.master. Идея состоит в том, что вы вставляете эти плагины в plugin.master и делаете 8 или около того страниц, которые будут использовать этот частичный вид для наследования из plugin.master.

Ответ 6

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

Браузеры обычно загружают различные элементы страницы параллельно, однако, в то время как браузер загружает файл Javascript, он не будет загружать никакие другие элементы страницы параллельно до тех пор, пока Javascript не будет загружен. Это означает, что ваши изображения и то, что им не придется ждать, поэтому обычно лучше переместить скрипты внизу, но если ваш script мал, я бы не стал беспокоиться об этом.

Ответ 7

hejdig.

Играя с Aspnetmvc3, я решил, что на данный момент я просто включил свой файл javascript в частичный

< script src= "@Url.Content(" ~/Scripts/User/List.js ")" type = "text/javascript" > </ script >

Этот js файл затем специфичен для моего файла /user/List.schtml.

/О

Ответ 8

Дизайнеры MVC столкнулись с множеством проблем, чтобы помешать нам использовать образы кода, но создав файл с именем <viewname> .aspx.cs и изменив атрибут inherits на странице aspx соответственно, он все еще их можно получить.

Я бы сказал, что лучшее место для включения include будет в обработчике Page_Load в коде (с помощью page.ClientScript.RegisterClientScriptInclude).