Соглашение директивы ASP.NET для объявления включений на стороне клиента

Рассматривали ли вы Google Loader или что-то вроде этого: Включение ASP.NET Загрузчик скриптов Ajax для ваших собственных скриптов

В основном...

Вот что я делаю в своем текущем проекте MVC:

• Использование Telerik Web Asset Manager для регистрации всех моих общих скриптов и CSS на главной странице, которые, как я знаю, будут использоваться на каждой странице (есть загрузка с открытым исходным кодом, если вы, как и я, не знали).

• Я инкапсулирую все функции JS (кроме нескольких строк) в функции, хранящиеся в соответствующих внешних файлах JS.

• Я инкапсулирую все свои расширенные функциональные возможности пользовательского интерфейса в помощники HTML. Затем они используют StyleSheetRegistrar и ScriptsRegistrars для динамической загрузки любых дополнительных CSS или JS, которые требуются для этого конкретного помощника. И полагайтесь на менеджера Telerik, чтобы он не загружал их более одного раза.

• Если я когда-либо использую встроенные стили, я указываю тег стиля вручную внутри метода Helper через объект htmlAttributes, но это редко.

• Чтобы вызвать мои функции javascript, необходимые для элемента HTML, я использую перегруженную строку ScriptRegistrar().OnDocumentReady(), чтобы указать функцию javascript для вызова этого элемента.

• Я также определил простой метод расширения для ScriptRegistrarBuilder в моем классе HtmlHelpers, который позволяет мне предоставить список параметров аргументов для передачи в мой вызов метода javascript при вызове < strong>OnDocumentReady(), без кучи конкатенации строк.

  public static void OnDocumentReady(this ScriptRegistrarBuilder builder, string format, params string[] args)
  {
      builder.OnDocumentReady(String.Format(format, args));
  }
  

• И, конечно же, я визуализирую все JS в нижней части главной страницы.

Здесь вы не избегаете всех случаев использования встроенного JS, но он делает его довольно тонким, если вы все делаете правильно. Честно говоря, я не могу придумать другого способа, который не стал бы слишком сложным.

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

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

К сожалению, еще не нашел способа обойти это.

Небольшой пример

Возможно, излишне подробно для вас ... но таким образом кто-то, кто ищет, может также найти полезное решение! :)

На главной странице:

<%
    Html.Telerik().StyleSheetRegistrar().DefaultGroup(styles => styles
       .Add("~/Content/Site.css")
       .Add("~/Content/core.css")
    );

    Html.Telerik().ScriptsRegistrar().DefaultGroup(scripts => scripts
        .Add("~/Scripts/common.js")
        .Combine(true)
        .Compress(true)
        .CacheDurationInDays(30)
    );
%>

Затем где-то чуть выше закрывающего тега body:

<%:
   Html.Telerik().ScriptsRegistrar().Render();
   Html.Telerik().StyleSheetsRegistrar().Render();
%>

В вашем HTML-помощнике:

    public static MvcHtmlString AutoCompleteComboListFor<TModel, TProperty>(this HtmlHelper<TModel> Helper, Expression<Func<TModel, TProperty>> expression,
        SelectList List, string DataSource)
    {
        MvcHtmlString dropDown = SelectExtensions.DropDownListFor<TModel, TProperty>(Helper, expression, List);

        string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
        string id = Helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName);

        //Do whatever you want

        helper.Telerik().ScriptRegistrar().DefaultGroup(scripts => scripts
            .Add("~/Scripts/extended.js")
            );
        helper.Telerik().StyleSheetRegistrar().DefaultGroup(styles => styles
            .Add("~/Content/extended.css")
            );

        helper.Telerik().ScriptRegistrar().OnDocumentReady(@"MyExtendedFunction('{0}');", id);

        return dropDown;
    }

Простой вызов этого помощника (или любого другого) приведет к аккуратному блоку в конце страницы, содержащему весь код JS, файлы и файлы CSS.

<link type="text/css" href="/Content/Site.css" rel="stylesheet"/>
<script type="text/javascript" src="/asset.axd?id=kAAAAB-LCAAAAAAABADsvQdgHEmWJSYvbcp7f0r1StfgdKEIgGATJNiQQBDswYjN5pLsHWlHIymrKoHKZVZlXWYWQMztnbz33nvvvffee--997o7nU4n99__P1xmZAFs9s5K2smeIYCqyB8_fnwfPyJ-8Uezjx597xd_tPro0Uevp3WxapuPRh-d82dL-uynf9E6r6-3d8f79N9P47vqo0c7v2Qk3-bv2nw5y2f2m91f8v1f8v3RR9OWvmzp27s_nV1mDcOlBpf06d7O7s743nj33u4BfTKl3u99ep9--ehRW6_zX_L_BAAA___9S_3qkAAAAA%3d%3d"></script>

<script type="text/javascript"> 
//<![CDATA[
jQuery(document).ready(function(){
myFunction('Foo');});
//]]>
</script>

Не существует существующего соглашения для регистрации клиентских включений с помощью директивы. Мое решение состояло в том, чтобы вместо этого создать собственный серверный элемент управления и использовать существующую функциональность TemplateParser для получения включаемых данных (что оказалось предпочтительнее, чем загрузка файла в виде потока и его разбор самостоятельно).