Asp компонент content rotator


Содержание

Asp компонент content rotator

В прошлых темах все классы компонентов представлений в качестве выходного результата использовали строку, то есть объект string. Однако такой тип для генерации результата не всегда является удобным, и как правило в качестве результата в View Component используется объект интерфейса IViewComponentResult . Имеется три встроенных класса, которые реализуют этот интерфейс:

ViewViewComponentResult : используется для генерации представления Razor с возможностью передачи модели. Для создания этого объекта может применяться метод View() класса ViewComponent

ContentViewComponentResult : применяется для отправки текстового контента. Для создания объекта используется метод Content()

HtmlContentViewComponentResult : представляет фрагмент кода HTML, который инкорпорируется в веб-станицу

ContentViewComponentResult

Для возврата содержимого в виде обычной строки используется объект ContentViewComponentResult . Для его создания применяется метод Content() , который в качестве параметра принимает строку.

В предыдущих темах метод Invoke компонента возвращал строку — объект string. По сути же возвращался тот же объект ContentViewComponentResult, так как фреймворк MVC автоматически преобразовывает строку в ContentViewComponentResult. Например:

При вызове компонента:

мы бы увидели в браузере ту же самую строку:

HTML-фрагменты

Для генерации html-фрагментов, которые вставляются в основное представление, применяется класс HtmlContentViewComponentResult . Для создания html-содержимого в конструктор этого класса передается объект HtmlString с кодом html:

В отличие от ContentViewComponentResult все html-теги будут должным образом интерпретироваться:

Просмотр компонентов в ASP.NET Core View components in ASP.NET Core

Компоненты представлений View components

Компоненты представлений похожи на частичные представления, но при этом гораздо функциональнее. View components are similar to partial views, but they’re much more powerful. Компоненты представлений не используют привязку модели и зависят только от данных, предоставляемых при их вызове. View components don’t use model binding, and only depend on the data provided when calling into it. Эта статья написана с помощью контроллеров и представлений, но компоненты представлений работают и в Razor Pages. This article was written using controllers and views, but view components also work with Razor Pages.

Компонент представлений: A view component:

  • Выполняет отрисовку фрагмента, а не всего отклика. Renders a chunk rather than a whole response.
  • Включает те же преимущества разделения функций и тестирования, которые доступны между контроллером и представлением. Includes the same separation-of-concerns and testability benefits found between a controller and view.
  • Может иметь параметры и бизнес-логику. Can have parameters and business logic.
  • Обычно вызывается со страницы макета. Is typically invoked from a layout page.

Компоненты представлений предназначены для случаев, когда имеется многоразовая логика отрисовки, которая слишком сложна для частичного представления, например: View components are intended anywhere you have reusable rendering logic that’s too complex for a partial view, such as:

  • Динамические меню навигации Dynamic navigation menus
  • Облако тегов (где выполняется запрос к базе данных) Tag cloud (where it queries the database)
  • Панель входа Login panel
  • Корзина для покупок Shopping cart
  • Недавно опубликованные статьи Recently published articles
  • Содержимое боковой панели в типичном блоге Sidebar content on a typical blog
  • Панель входа, которая должна отображаться на каждой странице и содержит ссылки для выхода или входа в зависимости от состояния входа пользователя A login panel that would be rendered on every page and show either the links to log out or log in, depending on the log in state of the user

Компонент представления состоит из двух частей: класса (обычно производного от ViewComponent) и возвращаемого результата (обычно это представление). A view component consists of two parts: the class (typically derived from ViewComponent) and the result it returns (typically a view). Как и контроллеры, компонент представления может быть объектом POCO, но большинству разработчиков потребуются преимущества методов и свойств, доступные при наследовании от ViewComponent . Like controllers, a view component can be a POCO, but most developers will want to take advantage of the methods and properties available by deriving from ViewComponent .

При оценке компонентов представлений на соответствие требованиям приложения попробуйте вместо этого использовать компоненты Razor. When considering if view components meet an app’s specifications, consider using Razor Components instead. Компоненты Razor также объединяют разметку с кодом C# для создания многоразовых единиц пользовательского интерфейса. Razor Components also combine markup with C# code to produce reusable UI units. Компоненты Razor предназначены для повышения производительности разработчика при разработке логики и структуры пользовательского интерфейса на стороне клиента. Razor Components are designed for developer productivity when providing client-side UI logic and composition. Дополнительные сведения можно найти по адресу: Создание и использование компонентов ASP.NET Core Razor. For more information, see Создание и использование компонентов ASP.NET Core Razor.

Создание компонента представления Creating a view component

Этот раздел содержит общие требования к созданию компонента представления. This section contains the high-level requirements to create a view component. Далее в этой статье мы подробно рассмотрим каждый шаг и создадим компонент представления. Later in the article, we’ll examine each step in detail and create a view component.

Класс компонентов представлений The view component class

Класс компонентов представлений можно создать одним из следующих способов: A view component class can be created by any of the following:

  • Наследование от ViewComponent Deriving from ViewComponent
  • Декорирование класса с помощью атрибута [ViewComponent] или наследование от класса с помощью атрибута [ViewComponent] Decorating a class with the [ViewComponent] attribute, or deriving from a class with the [ViewComponent] attribute
  • Создание класса, где имя заканчивается суффиксом ViewComponent Creating a class where the name ends with the suffix ViewComponent

Как и контроллеры, компоненты представлений должны быть открытыми, невложенными и неабстрактными классами. Like controllers, view components must be public, non-nested, and non-abstract classes. Имя компонента представления — это имя класса с удаленным суффиксом «ViewComponent». The view component name is the class name with the «ViewComponent» suffix removed. Его можно также можно задать явно с помощью свойства ViewComponentAttribute.Name . It can also be explicitly specified using the ViewComponentAttribute.Name property.

Класс компонентов представлений: A view component class:

Полностью поддерживает внедрение зависимостей в конструкторе. Fully supports constructor dependency injection

Не участвует в жизненном цикле контроллера, поэтому в компоненте представления невозможно использовать фильтры. Doesn’t take part in the controller lifecycle, which means you can’t use filters in a view component

Методы компонентов представлений View component methods

Компонент представления задает свою логику в методе InvokeAsync , возвращающем Task , или в синхронном методе Invoke , который возвращает IViewComponentResult . A view component defines its logic in an InvokeAsync method that returns a Task or in a synchronous Invoke method that returns an IViewComponentResult . Параметры берутся непосредственно из вызова компонента представления, а не из привязки модели. Parameters come directly from invocation of the view component, not from model binding. Компонент представления никогда не обрабатывает запрос напрямую. A view component never directly handles a request. Как правило, компонент представления инициализирует модель и передает ее в представление, вызвав метод View . Typically, a view component initializes a model and passes it to a view by calling the View method. Если кратко, методы компонентов представлений: In summary, view component methods:


  • Определяют метод InvokeAsync , который возвращает Task , или синхронный метод Invoke , возвращающий IViewComponentResult . Define an InvokeAsync method that returns a Task or a synchronous Invoke method that returns an IViewComponentResult .
  • Обычно инициализируют модель и передают ее в представление, вызвав метод ViewComponent View . Typically initializes a model and passes it to a view by calling the ViewComponent View method.
  • Получают параметры из вызывающего метода, а не HTTP. Parameters come from the calling method, not HTTP. Это связано с тем, что привязка модели отсутствует. There’s no model binding.
  • Недоступны непосредственно в качестве конечной точки HTTP. Are not reachable directly as an HTTP endpoint. Вызываются из кода (обычно в представлении). They’re invoked from your code (usually in a view). Компонент представления никогда не обрабатывает запрос. A view component never handles a request.
  • Перегружаются по сигнатуре, а не по сведениям из текущего HTTP-запроса. Are overloaded on the signature rather than any details from the current HTTP request.

Путь поиска представления View search path

Среда выполнения ищет представление по следующим путям: The runtime searches for the view in the following paths:

Путь поиска применяется к проектам с помощью контроллеров и представлений, а также Razor Pages. The search path applies to projects using controllers + views and Razor Pages.

По умолчанию для компонента представления используется имя Default, то есть файл представления обычно называется Default.cshtml. The default view name for a view component is Default, which means your view file will typically be named Default.cshtml. При создании результата компонента представления или при вызове метода View можно указать другое имя представления. You can specify a different view name when creating the view component result or when calling the View method.

Мы рекомендуем назвать файл представления Default.cshtml и использовать путь Views/Shared/Components/<Имя компонента представления>/ . We recommend you name the view file Default.cshtml and use the Views/Shared/Components// path. Компонент представления PriorityList в этом примере использует представление компонента представления Views/Shared/Components/PriorityList/Default.cshtml. The PriorityList view component used in this sample uses Views/Shared/Components/PriorityList/Default.cshtml for the view component view.

Вызов компонента представления Invoking a view component

Чтобы использовать компонент представления, вызовите следующий код внутри представления: To use the view component, call the following inside a view:

Эти параметры передаются в метод InvokeAsync . The parameters will be passed to the InvokeAsync method. Компонент представления PriorityList , разрабатываемый в рамках этой статьи, вызывается из файла представления Views/ToDo/Index.cshtml. The PriorityList view component developed in the article is invoked from the Views/ToDo/Index.cshtml view file. Следующий код вызывает метод InvokeAsync с двумя параметрами: In the following, the InvokeAsync method is called with two parameters:

Вызов компонента представления в качестве вспомогательной функции тегов Invoking a view component as a Tag Helper

Для ASP.NET Core 1.1 и более поздних версий можно вызвать компонент представления в качестве вспомогательной функции тегов: For ASP.NET Core 1.1 and higher, you can invoke a view component as a Tag Helper:

Параметры методов и классов, указанные в стиле Pascal, для вспомогательных функций тегов преобразуются в кебаб-стиль. Pascal-cased class and method parameters for Tag Helpers are translated into their kebab case. Вспомогательная функция тегов для вызова компонента представления использует элемент . The Tag Helper to invoke a view component uses the element. Компонент представления задан следующим образом: The view component is specified as follows:

Чтобы использовать компонент представления в качестве вспомогательного приложения тегов, зарегистрируйте с помощью директивы @addTagHelper сборку, содержащую этот компонент представления. To use a view component as a Tag Helper, register the assembly containing the view component using the @addTagHelper directive. Если компонент представления находится в сборке с именем MyWebApp , добавьте в файл _ViewImports.cshtml следующую директиву: If your view component is in an assembly called MyWebApp , add the following directive to the _ViewImports.cshtml file:

Зарегистрировать компонент представления в качестве вспомогательной функции тегов можно в любом файле, который ссылается на этот компонент представления. You can register a view component as a Tag Helper to any file that references the view component. Раздел Управление областью вспомогательной функции тегов содержит дополнительные сведения о том, как зарегистрировать вспомогательные функции тегов. See Managing Tag Helper Scope for more information on how to register Tag Helpers.

Метод InvokeAsync , используемый в этом учебнике: The InvokeAsync method used in this tutorial:

В разметке вспомогательной функции тегов: In Tag Helper markup:

В предыдущем примере компонент представления PriorityList становится priority-list . In the sample above, the PriorityList view component becomes priority-list . Параметры передаются в компонент представления как атрибуты в кебаб-стиле. The parameters to the view component are passed as attributes in kebab case.

Вызов компонента представления непосредственно из контроллера Invoking a view component directly from a controller

Компоненты представлений обычно вызываются из представления, но их можно вызывать непосредственно из метода контроллера. View components are typically invoked from a view, but you can invoke them directly from a controller method. Если компоненты представлений не определяют конечные точки, например контроллеры, можно легко реализовать действие контроллера, возвращающее содержимое ViewComponentResult . While view components don’t define endpoints like controllers, you can easily implement a controller action that returns the content of a ViewComponentResult .

В этом примере компонент представления вызывается непосредственно из контроллера: In this example, the view component is called directly from the controller:

Пошаговое руководство. Создание простого компонента представления Walkthrough: Creating a simple view component

Скачайте начальный код и выполните его сборку и тестирование. Download, build and test the starter code. Это простой проект с контроллером ToDo , который отображает список элементов дел. It’s a simple project with a ToDo controller that displays a list of ToDo items.

Добавление класса ViewComponent Add a ViewComponent class

Создайте папку ViewComponents и добавьте следующий класс PriorityListViewComponent : Create a ViewComponents folder and add the following PriorityListViewComponent class:

Примечания к коду: Notes on the code:

Классы компонентов представлений могут находиться в любой папке проекта. View component classes can be contained in any folder in the project.

Так как имя класса PriorityListViewComponent заканчивается суффиксом ViewComponent, среда выполнения использует строку «PriorityList» при ссылке на компонент класса из представления. Because the class name PriorityListViewComponent ends with the suffix ViewComponent, the runtime will use the string «PriorityList» when referencing the class component from a view. Я подробнее расскажу об этом чуть позже. I’ll explain that in more detail later.

Атрибут [ViewComponent] может изменить имя, используемое для ссылки на компонент представления. The [ViewComponent] attribute can change the name used to reference a view component. Например, мы могли назвать класс XYZ и применить атрибут ViewComponent : For example, we could’ve named the class XYZ and applied the ViewComponent attribute:

Приведенный выше атрибут [ViewComponent] предписывает средству выбора компонентов представлений использовать имя PriorityList при поиске представлений, связанных с данным компонентом, и строку «PriorityList» при ссылке на компонент класса из представления. The [ViewComponent] attribute above tells the view component selector to use the name PriorityList when looking for the views associated with the component, and to use the string «PriorityList» when referencing the class component from a view. Я подробнее расскажу об этом чуть позже. I’ll explain that in more detail later.

Компонент использует внедрение зависимостей для предоставления контекста данных. The component uses dependency injection to make the data context available.

InvokeAsync предоставляет метод, который возможно вызывать из представления и который может принять произвольное число аргументов. InvokeAsync exposes a method which can be called from a view, and it can take an arbitrary number of arguments.

Метод InvokeAsync возвращает набор элементов ToDo , удовлетворяющих параметрам isDone и maxPriority . The InvokeAsync method returns the set of ToDo items that satisfy the isDone and maxPriority parameters.

Создание представления Razor для компонента представления Create the view component Razor view

Создайте папку Views/Shared/Components. Create the Views/Shared/Components folder. Она должна называться Components. This folder must be named Components.

Создайте папку Views/Shared/Components/PriorityList. Create the Views/Shared/Components/PriorityList folder. Ее имя должно соответствовать имени класса представлений компонентов или имени класса без суффикса (если мы следовали соглашению и использовали суффикс ViewComponent в имени класса). This folder name must match the name of the view component class, or the name of the class minus the suffix (if we followed convention and used the ViewComponent suffix in the class name). Если вы использовали атрибут ViewComponent , имя класса должно соответствовать его обозначению. If you used the ViewComponent attribute, the class name would need to match the attribute designation.


Создайте представление Razor Views/Shared/Components/PriorityList/Default.cshtml: Create a Views/Shared/Components/PriorityList/Default.cshtml Razor view:

Представление Razor принимает список TodoItem и отображает их. The Razor view takes a list of TodoItem and displays them. Если метод InvokeAsync компонента представления не передает имя представления (как в нашем примере), по соглашению используется имя Default. If the view component InvokeAsync method doesn’t pass the name of the view (as in our sample), Default is used for the view name by convention. Далее в этом учебнике я покажу, как передать имя представления. Later in the tutorial, I’ll show you how to pass the name of the view. Чтобы переопределить стиль по умолчанию для определенного контроллера, добавьте представление в папку соответствующего контроллера (например, Views/ToDo/Components/PriorityList/Default.cshtml) . To override the default styling for a specific controller, add a view to the controller-specific view folder (for example Views/ToDo/Components/PriorityList/Default.cshtml).

Если компонент представления связан с конкретным контроллером, его можно добавить в папку этого контроллера (Views/ToDo/Components/PriorityList/Default.cshtml). If the view component is controller-specific, you can add it to the controller-specific folder (Views/ToDo/Components/PriorityList/Default.cshtml).

Добавьте div , содержащий вызов компонента списка приоритетов, в конец файла Views/ToDo/index.cshtml: Add a div containing a call to the priority list component to the bottom of the Views/ToDo/index.cshtml file:

@await Component.InvokeAsync в разметке показывает синтаксис для вызова компонентов представлений. The markup @await Component.InvokeAsync shows the syntax for calling view components. Первым аргументом является имя компонента, который требуется вызвать. The first argument is the name of the component we want to invoke or call. Последующие параметры передаются в компонент. Subsequent parameters are passed to the component. InvokeAsync может занять произвольное число аргументов. InvokeAsync can take an arbitrary number of arguments.

Проверьте работу приложения. Test the app. Следующий рисунок показывает список дел и элементы с приоритетом: The following image shows the ToDo list and the priority items:

Кроме того, компонент представления можно вызвать непосредственно из контроллера: You can also call the view component directly from the controller:

Указание имени представления Specifying a view name

Сложному представлению компонента в некоторых условиях может потребоваться указать нестандартное представление. A complex view component might need to specify a non-default view under some conditions. Ниже показано, как указать представление «PVC» из метода InvokeAsync . The following code shows how to specify the «PVC» view from the InvokeAsync method. Обновите метод InvokeAsync в классе PriorityListViewComponent . Update the InvokeAsync method in the PriorityListViewComponent class.

Скопируйте файл Views/Shared/Components/PriorityList/Default.cshtml в представление Views/Shared/Components/PriorityList/PVC.cshtml. Copy the Views/Shared/Components/PriorityList/Default.cshtml file to a view named Views/Shared/Components/PriorityList/PVC.cshtml. Добавьте заголовок, чтобы указать используемое представление PVC. Add a heading to indicate the PVC view is being used.

Измените Views/ToDo/Index.cshtml: Update Views/ToDo/Index.cshtml:

Запустите приложение и проверьте представление PVC. Run the app and verify PVC view.

Если представление PVC не отображается, убедитесь, что вы вызываете компонент представления с приоритетом 4 или выше. If the PVC view isn’t rendered, verify you are calling the view component with a priority of 4 or higher.

Проверка пути к представлению Examine the view path

Задайте для параметра приоритета значение 3 или меньше, чтобы представление с приоритетом не возвращалось. Change the priority parameter to three or less so the priority view isn’t returned.

Временно переименуйте Views/ToDo/Components/PriorityList/Default.cshtml в 1Default.cshtml. Temporarily rename the Views/ToDo/Components/PriorityList/Default.cshtml to 1Default.cshtml.

Проверьте приложение, при этом происходит следующая ошибка: Test the app, you’ll get the following error:

Скопируйте Views/ToDo/Components/PriorityList/1Default.cshtml в Views/Shared/Components/PriorityList/Default.cshtml. Copy Views/ToDo/Components/PriorityList/1Default.cshtml to Views/Shared/Components/PriorityList/Default.cshtml.

Добавьте разметку в представление компонента представления дел Shared, чтобы указать, что это представление из папки Shared. Add some markup to the Shared ToDo view component view to indicate the view is from the Shared folder.

Протестируйте представление компонента Shared. Test the Shared component view.

Как избежать жестко запрограммированных строк Avoiding hard-coded strings

Чтобы обеспечить безопасность во время компиляции, можно заменить жестко заданное имя компонента представления на имя класса. If you want compile time safety, you can replace the hard-coded view component name with the class name. Создайте компонент представления без суффикса «ViewComponent»: Create the view component without the «ViewComponent» suffix:

Добавьте инструкцию using в файл представления Razor и используйте оператор nameof : Add a using statement to your Razor view file, and use the nameof operator:

Выполнение синхронных задач Perform synchronous work

Платформа обрабатывает вызов синхронного метода Invoke , если не требуется асинхронное выполнение работы. The framework handles invoking a synchronous Invoke method if you don’t need to perform asynchronous work. Следующий метод создает синхронный компонент представления Invoke : The following method creates a synchronous Invoke view component:

В файле Razor для этого компонента представления содержится список строк, передаваемых в метод Invoke (Views/Home/Components/PriorityList/Default.cshtml): The view component’s Razor file lists the strings passed to the Invoke method (Views/Home/Components/PriorityList/Default.cshtml):

Компонент представления вызывается в файле Razor (например, Views/Home/Index.cshtml) с помощью одного из следующих подходов: The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) using one of the following approaches:

Чтобы использовать подход IViewComponentHelper, вызовите Component.InvokeAsync : To use the IViewComponentHelper approach, call Component.InvokeAsync :

Компонент представления вызывается в файле Razor (например, Views/Home/Index.cshtml) с помощью IViewComponentHelper: The view component is invoked in a Razor file (for example, Views/Home/Index.cshtml) with IViewComponentHelper.

Вызов Component.InvokeAsync : Call Component.InvokeAsync :

Чтобы использовать вспомогательное приложение тэгов зарегистрируйте с помощью директивы @addTagHelper сборку, содержащую этот компонент представления (он находится в сборке с именем MyWebApp ): To use the Tag Helper, register the assembly containing the View Component using the @addTagHelper directive (the view component is in an assembly called MyWebApp ):

Примените вспомогательное приложение тэгов из компонента представления в файле разметки Razor: Use the view component Tag Helper in the Razor markup file:

Метод PriorityList.Invoke имеет синхронную подпись, но Razor обнаруживает и вызывает метод с помощью Component.InvokeAsync в файле разметки. The method signature of PriorityList.Invoke is synchronous, but Razor finds and calls the method with Component.InvokeAsync in the markup file.

Все параметры компонентов представления обязательны All view component parameters are required

Каждый параметр в компоненте представления является обязательным атрибутом. Each parameter in a view component is a required attribute. Также см. эту проблему в GitHub. See this GitHub issue. Если какой-либо параметр отсутствует: If any parameter is omitted:

  • Сигнатура метода InvokeAsync не совпадет, поэтому метод не будет выполняться. The InvokeAsync method signature won’t match, therefore the method won’t execute.
  • Компонент ViewComponent не отобразит никакой разметки. The ViewComponent won’t render any markup.
  • Не будут выдаваться ошибки. No errors will be thrown.


ASP. Основы. Объекты и компоненты. Доступ к базам данных

Dynamic HTML представляет собой основное средство программирования клиента для Microsoft Internet Explorer 4.0 и выше, но такие программы просмотра Web, как Netscape Navigator, не поддерживают Dynamic HTML. На самом деле очень малая часть функциональности клиентской части, поддерживаемой различными программами просмотра, может рассматриваться как действительно кросс-платформенная.

Если Вы хотите разработать Интернет-узел, открытый для доступа самым различным программам просмотра, то должны перенести программирование с клиента на сервер. Такую возможность предоставляют Microsoft ASP (Active Server Pages — активные серверные страницы). По сути ASP не что иное, как сценарий на VBScript, который исполняется на сервере. Когда запрашивается страница, этот сценарий порождает HTML-текст. Это ключевая особенность ASP — клиент никогда не видит вашего кода, а только результирующий HTML, который воспринимает любая программа просмотра.

Листинг 4.1 демонстрирует простую ASP-страницу, которая создает приветствие в соответствии со временем суток. В нем текущий час определяется при помощи кода Hour(Now), где Now — функция VBScript, возвращающая текущий момент времени и дату. Если текущий час меньше 12, то приветствие задается в форме «Доброе утро!» От полудня до шести вечера сообщение имеет вид «Добрый день!», а после шести — «Добрый вечер!»

Листинг 4.1.Простой пример ASP.

Simple ASP Example

11 And Hour(Now) 17 Then

strGreeting = «Добрый вечер!»

Обратите внимание на код в листинге, окруженный специальными символами: угловыми скобками и знаками процента ( ). Такие символы означают, что это серверный код, который выполняется перед тем, как страница будет на самом деле послана программе просмотра. Если бы Вы посмотрели в Internet Explorer на результирующий HTML-текст, то увидели бы следующее (в предположении, что сейчас еще не вечер, но уже не утро):

Simple ASP Example

В этом-то и состоит суть ASP. Результат исполнения кода — обыкновенный HTML! Эту страницу можно просматривать любой программой просмотра: не только Internet Explorer, но и, например, Netscape Navigator. Иными словами, ASP предоставляет разработчику подлинную платформенную независимость

У представленного кода есть еще несколько особенностей. Обратите внимание на самую верхнюю строчку — она определяет, на каком языке написан сценарий на данной странице:

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

А теперь обратите внимание на ту строку, где и происходит генерация HTML-текста. Здесь для вывода приветствия используется переменная:

Переменная strGreeting заключена в угловые скобки со знаками процента, как и весь остальной серверный код, но, кроме того, ей предшествует знак равенства. Такая конструкция играет важную роль в ASP, указывая, что в данное место HTML-страницы нужно вставить текущее значение этой переменной.

Объекты и компоненты.На самом простом уровне создание ASP-страницы — это ни что иное, как написание серверного кода для получения ожидаемого результата. Но VBScript не является полнофункциональным языком и, как только Вы приступаете к построению более сложных страниц, его выразительных средств начинает не хватать. Так, в VBScript нет встроенных функций доступа к данным; не умеет он и открывать текстовые файлы. Собственно говоря, в VBScript отсутствуют какие-либо встроенные средства доступа к каким бы то ни было внешним источникам данных. Так как же в таком случае при помощи ASP выполняются такие сложные действия, как доступ к данным? Ответ будет таким: нужно дополнить VBScript объектами и компонентами ASP.

ASP-объекты и компоненты — это не что иное, как компоненты ActiveX, подобные обычным DLL ActiveX, с которыми Вы наверняка работали в Microsoft Visual Basic. Различие между объектами и компонентами ASP состоит в том, каким образом они появляются в программе. ASP-объекты — это элементы управления ActiveX, которые в коде на VBScript доступны всегда: их не нужно создавать явно. В число объектов ASP входят Application, Session, Request, Response и Server. А вот ASP-компоненты представляют собой DLL, существующие вне структуры ASP. Эти компоненты могут быть написаны на любом языке, а некоторые по­лезные ASP-компоненты просто поставляются в комплекте с Visual InterDev. ASP-компо­ненты нужно явно создавать в коде. ASP поддерживает компоненты Database Access, File Access, Browser Capabilities, Ad Rotator и Content Linking.

Файл GLOBAL.ASA.Одна из главных трудностей разработчика для Интернета, независимо от того, какую технологию он использует, состоит в том, как сложно создать в Интернете настоящее приложение. Взаимодействие программы просмотра и Web-сервера представляет собой по сути лишенную состояния транзакцию, в ходе которой сервер посылает клиенту Web-страницу и затем забывает о его существовании. Когда клиент запрашивает другую Web-страницу, сервер ничего не помнит о предыдущем запросе. Коренная проблема для всех Web-приложений такова: как показать, что это именно приложение?

Определить приложение в среде Microsoft Windows довольно просто. Приложение запуска­ется двойным щелчком значка и завершается, когда в меню File выбран пункт Exit. В проме­жутке между двумя этими событиями данные хранятся в переменных. Но для Интернет-при­ложений это не так. Как определить, когда приложение начинается, а когда заканчивается? Можно сказать, что приложение начало работу, если пользователь зашел на узел и просмат­ривает одну из его страниц. Но что если он переходит к другому узлу, а через пять минут возвращается? Приложение все еще активно? А если пользователь отсутствовал час или два?

Проблема определения моментов запуска и завершения приложения оказывает серьезное влияние на правильное управление переменными и последовательностью выполнения. К счастью, ASP предлагает решение. Оно состоит в том, что для определения начала и завер­шения — как всего приложения, так и отдельных пользовательских сессий — используется специальный файл под названием GLOBAL.ASA. На этот файл возложено реагирование на четыре ключевых события узла: Application_OnStart (запуск приложения), Application_OnEnd (завершение приложения), Session_OnStart (начало сессии) и Session_OnEnd (завершение сессии). В листинге 4.2 приведен типичный файл GLOBAL.ASA.

Листинг 4.2.Файл GLOBAL.ASA.

Для обозначения разделов сценария GLOBAL.ASA содержит теги

Хотя GLOBAL.ASA отмечает начало и завершение приложения при помощи событий, оста­ется неясным, что же все-таки составляет собственно приложение. Одна из рабочих форму­лировок, предложенная Microsoft, определяет Интернет-приложение как виртуальный ката­лог со всеми его файлами. Если пользователь запрашивает Web-страницу из виртуального каталога под названием Bookstore, то тем самым он запускает приложение Bookstore, и в GLOBAL.ASA возбуждаются события Application_OnStart и Session_OnStart.

Согласно этому определению с приложением одновременно могут работать несколько про­грамм просмотра. Но событие Application_OnStart происходит только один раз: когда первый пользователь запрашивает Web-страницу из виртуального каталога. Когда затем страницы из этого ката­лога запрашивают другие пользователи, возбуждается только событие Session_OnStart.

В то время как приложение может относиться к нескольким программам просмотра, обра­щающимся к одному и тому же множеству Web-страниц, сессия касается какой-то одной программы просмотра, обращающейся к тем же Web-страницам. Для конкретной программы просмотра сессия длится, пока программа продолжает запрашивать страницы виртуального каталога. Если же пользователь не запрашивает Web-страницы (из данного виртуального каталога) на протяжении 20 минут (по умолчанию), сессия завершается, и возбуждается событие Session_OnEnd. Когда в данном виртуальном каталоге завершаются все сессии, возбуждается событие Application_OnEnd.

В качестве примера рассмотрим следующий сценарий. Два пользователя намереваются посе­тить на Web-узле приложение Magazine. Пользователь 1 оказывается проворнее и быст­ренько запрашивает Web-страницу DEFAULT.ASP. Тут же возбуждаются события Application_OnStart и Session_OnStart. Буквально пятью минутами позже к приложению обращается пользователь 2. Поскольку пользователь 1 как-то проявлял себя в течение последних 20 минут, приложение Magazine активно. Следовательно, возбуждается только событие Session_OnStart, сигнализируя о начале новой сессии. Кроме того, теперь для завершения приложения необходимо, чтобы завершились обе сессии.

В течение следующих 15 минут пользователь 1 не запрашивает ни­каких страниц приложе­ния Magazine. Поскольку он не проявлял активности на протяжении 20 минут, ASP приходит к выводу, что пользователь 1 закончил свою работу с приложением, и возбуждает событие Session_OnEnd. Но приложение все еще активно, поскольку в течение последних 20 минут к нему обращался пользователь 2.

Пользователь 2 работает с приложением еще час, то и дело запрашивая новые Web-страницы. Но в конце концов он отключается, а через 20 минут после того, как он покинул узел (точнее, в последний раз запросил Web-страницу приложения), возбуждается событие Session_OnEnd. Поскольку пользователь 2 был последним пользователем данного приложения, оно завершается, и возбуждается событие Application_OnEnd.

В ASP есть несколько встроенных объектов, которые доступны разработчику. Эти объекты помогают управлять многими вещами: от переменных, до передачи форм. Работать с ними легко, они вызываются из кода напрямую без какого-то особого синтаксиса.

Объект Application.Объект Application (приложение) позволяет создавать переменные приложения (application variables) — переменные, доступные всем пользователям данного приложения. Все, кто обращается к Web-страницам данного виртуального каталога, могут совместно использовать любую переменную приложения определенную для этого каталога.

В листинге 4.3 приведен пример программы, которая использует Объект Application. В нем переменная приложения служит для отслеживания времени последнего обращения к страницам приложения.

Листинг 4.3.Объект Application.

Эта страница последний раз посещалась:

Создание переменной приложения сводится к адресации объекта Application именем новой переменной, которую вы хотите создать. Например, следующий код создает новую переменную приложения с именем Company и присваивает ей значение NewTech.


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

Поскольку такие переменные доступны нескольким пользователям одновременно, вы не сможете гарантировать, что два пользователя не попытаются одновременно присвоить одной и той же переменной разные значения. Для разрешения подобных коллизий объект Application поддерживает методы Lock и UnLock. Метод Lock блокирует весь объект Application, а не только переменную, вы хотите изменить, поэтому сразу же после изменения значения переменной разблокируйте объект:

Несмотря на то, что переменные приложения пригодны для временного хранения данных, их нельзя использовать для долговременного хранения. Все данные в переменных приложения уничтожаются, когда происходит событие Application_OnEnd. Так что, если вы хотите, чтобы они сохранились после завершения приложения, позаботьтесь о их переносе в файл или базу данных.

Объект Session.Зачастую разработчиков меньше интересуют данные, совместно используемые несколькими пользователями, зато гораздо больше — данные, связанные с конкретным пользователем. ASP поддерживает переменные для индивидуального пользователя при помощи объекта Session (сессия), который позволяет создавать переменные сессии (session variables).

Листинг 4.4 демонстрирует, как определить несколько переменных сессии в файле GLOBAL.ASA. Само по себе их определение так же просто, как и в случае переменных приложения. Все, что нужно сделать — это адресовать объект Session именем переменной, которую вы хотите создать. Основное различие между переменными этих объектов — их области видимости. Переменные сессии предназначаются для одного пользователя и живут, пока пользователь поддерживает сессию. Как только в течение 20 минут (по умолчанию) пользователь не обращается к страницам данного виртуального каталога, данные пропадают.

Листинг 4-..Создание переменных сессии.

Переменные сессии можно создавать на любой Web-странице или в файле GLOBAL.ASA, а доступны они на любой Web-странице приложения, в котором эти переменные были первоначально созданы. Получить значения переменных сессии можно, считывая их из объекта Session. Следующий фрагмент кода считывает переменные сессии, созданные в листинге 4.4, и выводит их в полях ввода:

Ранее мы определили Интернет-приложение как лишенные статуса транзакции между Web-сервером и программой просмотра. Как же тогда ASP запоминает переменные сессии для каждого пользователя приложения? Ответ будет таким: эти переменные сохраняются на сервере для каждого клиента. Программа просмотра получает от сервера уникальный идентификатор, позволяющий определить, какой набор переменных кому принадлежит. Клиент этот идентификатор (Globally Unique Identifier, GUID) сохраняет, а впоследствии посылает серверу и получает именно ему предназначенные данные. Таким образом каждый клиент может иметь свой набор данных в каждом Интернет-приложении.

Осталось сказать, что для установки или считывания впемени жизни сессии (в минутах) применяется свойство Timeout объекта Session:

Объект Request.Для передачи данные клиенту создается Web-страница, а для передачи данных в обратном направлении программа просмотра использует отправку формы (form submission). В форме содержатся текстовые поля, переключатели и т.п. Клиент размещает введенные данные в этих полях и пересылает пакет серверу. Процессом передачи формы управляют два атрибута тега

Элемент формы с типом SUBMIT — это кнопка, нажатие которой пользователем заставляет программу просмотра упаковать данные формы и отправить их. Формат пересылки данных определен строго и сервер знает, чего ожидать от клиента. Данные имеют вид пар Поле=Значение, отсылаемых серверу в формате открытого текста. Если в предыдущем примере ввести в поле Name NewTech и info@newtech.com в поле Email, то сценарию DATA.ASP будет послан следующий текст:

На сервере эти данные можно вновь разобрать по полям и использовать в любых целях. Вот тут-то и нужен объект Request. Он используется в ASP для разбора полученных от клиента данных. Для работы с объектом Request просто сообщите ему имя поля, значение которого хотите получить, и объект вернет вам это значение. Например, следующий код вернет вам значение поля Name:

Request.Form применяется, когда данные были отправлены методом POST и именно этому сценарию. Если для отправки данных используется метод GET или сценарий вызывается с передачей параметров прямо в гиперссылке

то для разбота данных применяют свойство Request.QueryString, который работает так же, как Request.Form. Следующий фрагмент кода вернет значение поля Name из гиперссылки:

Другое свойство — Request.Cookies используются для извлечения информации из кукисов (cookies), отосланных вместе с запросом строке пользовательского агента программы просмотра. А листинг 4.5 демонстрирует применение свойства ServerVariables для определения имени компьютера, с которого клиент вызвал сценарий.

Листинг 4.5.Определение компьютера пользователя.

Вы вошли с компьютера

Переменные сервера представляют широкий круг информации о клиенте и Web-сервере. Доступ к каждой конкретной переменной сводится к чтению соответствующей переменной.

Объект Response.Этот объект управляет содержимым страницы, которую ASP возвращает программе просмотра. Фактически в комбинации знак равенства представляет собой сокращенное обозначение метода Write объекта Response. Так что следующие две строки кода эквивалентны:

Поскольку объект Response используется очень часто, такое сокращение оправдано.

Полезное свойство объекта Response — Expires. Оно задает время (в минутах) за которое страница устаревает. Если установить его в нуль, то страница будет устаревать в момент загрузки и Internet Explorer не будет ее кэшировать. Кэширование сильно влияет на разработку и может привести к тому, что приложение будет функционировать неправильно. IE кэширует страницы двумя способами: на диске и в памяти. Рассмотрим такой фрагмент кода, показывающий текущее время и дату:

Когда IE запрашивают страницу с этим кодом, на сервере выполняется сценарий, и на странице появляется текущее время. Однако, если программа просмотра переходит к другой странице, а затем возвращается к этой, со временем, то время не изменится, поскольку IE не запрашивает ее повторно. В листинге 4.6 приведена исправленная версия примера, устаревающая уже в момент загрузки.

Листинг 4.6.Страница, устаревающая уже в момент загрузки.

Forcing a Page to Expire

Еще один полезный метод объекта Response — Redirect, перенаправляющий программу просмотра на указанный URL:

Объект Server.Объект Server (сервер) представляет собой в некотором роде свалку — в том смысле, что предоставляемые им функции никак не связаны между собой, за тем исключением, что все они полезны разработчику для Интернета. Пожалуй, самая важная из всех функций объекта Server — это метод CreateObject, который создает экземпляр компонента ActiveX. Причем это может быть как встроенный компонент, входящий в комплект поставки, так и тот, который написали Вы сами на любом языке. В любом случае использование компонента ActiveX на сервере требует вызова метода CreateObject.

Аргументом метода CreateObject служит ProgID (программный идентификатор) требуемого компонента ActiveX. ProgID — это содержательное имя компонента, такое как Excel.Sheet или Word.Basic. Следующая строчка показывает, как при помощи CreateObject создать экземпляр компонента с ProgID Excel.Sheet.

Set MyObject = Server.CreateObject(«Excel.Sheet»)

Другим полезным методом объекта Server является MapPath, возвращающий фактический путь, соответствующий заданному виртуальному каталогу.

Компоненты ASP — это на самом деле просто компоненты ActiveX, наподобие тех, что Вы можете сами создать на Visual Basic или Visual C++. Но эти компоненты написаны Microsoft и поставляются вместе с Visual InterDev. Они предназначены для выполнения полезных для Web-узлов задач общего характера, включая доступ к данным. Создать их на своей странице Вы можете при помощи метода CreateObject объекта Server, а как только они созданы, смело обращайтесь к их свойствам и методам для выполнения нужных Вам задач.

Компонент ActiveX Data Objects.Самым полезным изо всех компонентов ASP следует признать компонент доступа к базам данных, называемый также ActiveX Data Objects, или сокращенно ADO. Он и содержащиеся в нем объекты применяются для чтения и записи данных в источники данных ODBC при публикации в Web информации из баз данных.

Объект Connection (подсоединение) создается методом CreateObject объекта Server, и ссылка на него помещается в переменную. Когда объект создан, его можно использовать для открытия подсоединения к любому источнику данных ODBC. Следующий фрагмент кода устанавливает подсоединение к источнику данных ODBC с названием Publications:

‘ Создаем объект Connection

Set objConnection = Server.CreateObject(«ADODB.Connection»)

‘ Открываем подсоединение к источнику данных

objConnection.Open «Publications», «sa», «» %>


Здесь objConnection — переменная для объектной ссылки на экземпляр объекта Connection. Метод Open устанавливает подсоединение, принимая в качестве аргументов имя источника данных, идентификатор пользователя и пароль.

Когда подсоединение установлено, получать информацию из источника данных можно при помощи объекта Recordset (набор записей). Этот объект умеет выполнять оператор SELECT языка SQL и возвращать набор записей, удовлетворяющих этому запросу. Как и объект Connection, Recordset создается методом CreateObject. В следующем примере программа выполняет оператор SELECT над источником данных, представленным переменной objConnection:

После того, как записи получены, для передвижения по ним можно обращаться к методам MoveFirst, MoveLast, MoveNext и MovePrevious. Затем метод Write объекта Response помещает данные на Web-страницу, которая и посылается программе просмотра. В листинге 4.7 приведен полный пример ASP-страницы, которая строит список пользователей, со­держащихся в источнике данных Data.

Листинг 4.7.Построение списка при помощи ADO.

Одна из основных задач в управляемом данными Web-приложении — управление информацией в объекте Recordset. Очень часто простой запрос возвращает гораздо больше данных, чем имеет смысл показывать. Давайте, например, посмотрим, что происходит, когда Вы обращаетесь к какой-либо поисковой системе в Интернете. Поисковая машина, получив ключевое слово, возвращает ссылки на узлы, где это ключевое слово встречается. Но зачастую обнаруживаются тысячи узлов, содержащих данное ключевое слово. Совершенно очевидно, что показать все эти узлы на одной Web-странице совершенно невозможно.

Выход состоит в разбиении на страницы (paging). Этот механизм реализован во всех поисковых системах для передачи за один раз некоей порции результатов запроса, скажем, из 10 записей. Теперь пользователь может эффективно работать с полученной информацией. Поддерживает разбиение на страницы и ADO — посредством нескольких свойств объекта Recordset: PageSize, PageCount и AbsolutePage.

При получении набора данных можно указать, что записи следует разбить на страницы. Количество строк набора данных, составляющих страницу, задается значением свойства PageSize. Затем можно определить общее количество страниц в наборе данных посредством свойства PageCount. А доступ к заданной странице обеспечивает свойство AbsolutePage.

В листинге 4.8 приведен полный пример, в котором пользователь может просматривать 10 записей за раз. Переменная сессии CurrentPage отслеживает текущую страницу. Пользователь может перейти к предыдущей порции данных или к следующему набору из 10 записей, выбрав одну из двух гипертекстовых ссылок на странице.

Листинг 4.8.Разбиение набора данных на страницы средствами ADO.

Оригинальный ротатор контента

Данный урок расскажет Вам о том, как сделать ротатор контента с помощью jQuery.

Мы уже неоднократно делали уроки про ротаторы, но каждый из них уникален по своему. И поэтому, я стараюсь рассказать Вам про каждый из них.

Для начала давайте взглянем на структуру HTML:

Как Вы видите каждая вкладка в ротаторе помечена комментариями и Вы легко можете ее найти.

Также нам понадобиться подключить стили оформления (как обычно между тегами ):

И, как всегда, не забываем про фреймворк jQuery и другие функции, необходимые для правильной работы (также между тегами ):

Стоит обратить внимание, что все картинки прописаны в CSS. И если Вы будете что-либо менять — всегда помните про пути к картинкам.

По этому уроку все! Вопросы и комментарии приветствуются ниже! Всем большое спасибо за внимание.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.raymondselda.com
Перевел: Максим Шкурупий
Урок создан: 9 Мая 2009
Просмотров: 62756
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

content rotatorRSS

2 replies

Last post Sep 27, 2009 07:49 AM by Haosman

Shortcuts

content rotator


Jul 27, 2009 10:12 AM | Almystersv | LINK

I am using a skm content rotator and am using the keyword attribute to determine what content to pull from the xml file. This works fine when the page loads and a record is displayed and the keyword for that record is passed to the xml, however when I click on another record (from a listbox listing all the records) on the page to pull up those details the content rotator keeps the same keyword, it is not until I select yet another record that the content rotator updates to the record before. Its as if it is a click behind.

I hope you can understand my issue and help me in correcting this.

Неочевидные особенности применения Rotativa для генерации PDF в ASP.NET MVC приложении

Многие разработчики сталкиваются с задачей создания PDF отчетов для веб приложений, вполне естественный запрос. Я бы хотел представить вашему вниманию свой опыт работы с такой задачей при использовании библиотеки Rotativa для генерации отчетов. Это одна из самых, на мой взгляд, удобных библиотек для такой цели в своем сегменте, но при использовании ее я столкнулся с несколькими не очевидными моментами, о которых и хочу поговорить.

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

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

Постановка задачи

Веб приложение на ASP.NET MVC, .NET версии 4.6. Прочие особенности значения не имеют в данном контексте, за исключением деплоймента. Предполагается, что развертывание будет происходить на Azure. Это важно, так как некоторые другие библиотеки (например HiQPdf) не переносят установки в определенных конфигурациях Azure, это документировано.

Мне необходимо по одной ссылке открывать некий статичный HTML отчет, а по второй ссылке — PDF версию того же отчета. Сам отчет суть просто набор некоторых таблиц, полей и графиков для демонстрации пользователю. Обе версии предполагают наличие меню с навигацией по разделам отчета, наличие таблиц, некоторой графики (цвета, размер текста, бордеры).

Применение библиотеки Rotativa

Rotativa применяется максимально легко, насколько это вообще возможно на мой взгляд.

  1. У вас уже есть готовый HTML отчет в виде шаблона и контроллера ASP.NET MVC, типа такого:

Устанавливаете nuget пакет Rotativa

Добавляете новый контроллер для PDF отчета

По сути с этого момента у вас есть PDF, возвращаемый как файл, содержащий все данный из исходного HTML отчета.

Я не описывал тут роутинг, но подразумевается, что вы настроили роуты для правильного вызова обоих контроллеров

Интересно, что сама данная библиотека по сути является оберткой над известной консольной утилитой wkhtmltopdf. Скорость работы на высоте, можно ставить на Azure — будет работать. Но есть особенности, о которых и поговорим.

Page Number

Логично предположить, что заказчик будет распечатывать PDF и захочет видеть номер страницы. Тут все предельно просто, спасибо создателям Rotativa.

Согласно документации Rotativa, через параметр CustomSwitches можно указать аргументы, которые будут переданы в саму утилиту wkhtmltopdf . Ну и советы в сети щедры на примеры. Следующий вызов добавляет номер в нижнюю часть каждой страницы:

Это прекрасно работает. Сам номер страницы передается с помощью параметра [page] , такого рода параметры будут подменены на конкретные значения.

Кроме [page] есть и другие:

  • [page] Replaced by the number of the pages currently being printed
  • [frompage] Replaced by the number of the first page to be printed
  • [topage] Replaced by the number of the last page to be printed
  • [webpage] Replaced by the URL of the page being printed
  • [section] Replaced by the name of the current section
  • [subsection] Replaced by the name of the current subsection
  • [date] Replaced by the current date in system local format
  • [isodate] Replaced by the current date in ISO 8601 extended format
  • [time] Replaced by the current time in system local format
  • [title] Replaced by the title of the of the current page object
  • [doctitle] Replaced by the title of the output document
  • [sitepage] Replaced by the number of the page in the current site being converted
  • [sitepages] Replaced by the number of pages in the current site being converted

Table of content

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

wkhtmltopdf manual содержит полный список всех параметров, среди которых есть —toc . Видя данный параметр, утилита по сути собирает все тэги

по документу и генерирует таблицу содержания на их основе. Соответственно необходимо предусмотреть правильное использование этих заголовочных тэгов у себя в HTML шаблоне.

Но в реальности добавление —toc не приводит ни к каким последствиям. Будто параметра и не было. При этом другие параметры работают. Благодаря посту на каком-то форуме я обнаружил, что данный параметр нужно передавать без дефисов: toc . И действительно, в этом случае содержание добавляется как самая первая страница. При нажатии на строку в содержании происходит переход на нужную страницу документа, номера страниц верные.

Не до конца понятно пока как настраивать стили, но я пока этим не занимался.

JavaScript Execution

Следующий момент, с которым я столкнулся, необходимость добавить в отчет графики. Моя HTML страница содержит JS код, добавляющий графики с помощью библиотеки dc.js . Вот пример:

При этом в HTML у меня есть соответсвующий элемент:

Для работоспособности этого кода необходимо импортировать соответствующие библиотеки: dc.js , d3.js , crossfilter.js . Вызов функции initChart создаст график и вставит полученный
svg в указанный элемент в дереве.

Но PDF не содержит и следа графиков. Как впрочем и любого друго следа выполнения JavaScript кода перед рендерингом PDF. Проверить это довольно легко — стоит лишь добавить элементарный код создания простого


Опытным путем выяснилось, что местоположения JS кода для wkhtmltopdf играет существенную роль. Расположенный в конце или скажем в конце JS код выполнен не будет. Такое ощущение, что утилита его просто не замечает, или не ожидает его там встретить.

А вот код, расположенный внутри выполняется. Таким образом я пришел к схеме, когда JavaScript код располагается после объявления стилей внутри тэга , и вызывается обычной конструкцией:

В таком случае код будет выполнен ожидаемым образом.

JavaScript Limitations

Но графиков в выходном PDF все равно не было. Тут я начал догадываться, что будучи не полноценным браузером, движок рендеринга и исполнения pdf скорее всего не совершенен и не понимает последних правил. Опять же опытным путем я выяснил, что стрелочные функции не воспринимаются. Причем если интерпретатор находит что-то для него неизвестное, то он просто перестает работать.

Замена стрелочных функций вида x => x.value на более классические function(x) < return x.value; >помогла и весь код был выполнен, результирующий график попал в PDF файл.

Chart Width

Опытным путем выяснилось, что обязательно необходимо четко указать ширину родительского элемента графика. Для этого я указал стиль dc-chart . Он содержит ширину графика в пикселях. В противном случае график на PDF окажется очень маленьким, несмотря на то, что в HTML версии он займет всю ширину. Указание ширины в процентах сработает только для HTML.

Inline JavaScript / CSS

Напоследок я бы хотел отметить, что многие библиотеки конвертации HTML в PDF принимают некий baseUrl как параметр. Это URL, на основе которого конвертер будет достраивать относительные пути для получения импортированных CSS стилей, JavaScirpt файлов или шрифтов. Я не могу точно утверждать как это работает в Rotativa, но я пришел к другому подходу.

Для ускорения первичной загрузки отчета и устранения самого источник проблем встраивания файлов скриптов или стилей при конвертации, я встраиваю нужный JS и CSS непосредственно в тело HTML шаблона.

Для этого необходимо создать соответствующие бандлы:

Добавить вызов конфигурации этих бандлов в Global.asax.cs

И добавить соответствующий метод для встраивания кода в страницу. Его нужно разместить в том же namespace, что и Global.asax.cs , чтобы метод можно было вызвать из HTML шаблона:

Ну и финальный штрих — вызов из шаблона:

В результате весь нужный CSS и JavaScript окажется непосредственно в HTML, хотя при разработке можно работать с отдельными файлами.

Скорее всего, многие сразу же подумают о неэффективности такого подхода с точки зрения кэширования запросов браузером. Но я преследовал две конкретные цели:

  • чтобы PDF конвертеру не приходилось делать запросы куда-то за стилями или кодом, а пользователю ждать этого, соответственно;
  • чтобы первая загрузка PDF и HTML отчета занимала минимальное время, без необходимости ожидания нескольких дополнительных запрос. В условиях моего проекта это важно;

Page Breaks

Структурирование отчета на разделы может сопровождаться требованиями начать новый раздел с новой страницы. В таком случае можно успешно использовать простой CSS подход:

wkhtmltopdf утилиты успешно считывает данные классы и понимает, что необходимо начать новую страницу. Первый класс — page-break-before — подсказывает утилите всегда начинать этим элементом новую страницу. Второй класс — no-page-break-inside — стоит применять к тем элементам, которые желательно сохранить максимально целыми на странице. Например, у вас есть подряд идущие блоки структурированной информации, или скажем таблицы. Если два блока умещаются на страницу — они так и расположатся. Если третий уже не влезает в страницу — он будет не следующей. Если он больше страницы — тут уже неизбежен его перенос. Работает все это адекватно и удобно.

Flex Behavior in wkhtmltopdf

Ну и последняя замеченная мной особенность связана с использованием flexbox стилей разметки. Мы все уже привыкли к ним и почти вся разметки сделана флексами. Однако wkhtmltopdf в этом плане чуть отстал. Горизонтальные опции флекса не работают (по крайней мере в моем случае этого добиться не получилось. Я видел в сети упоминания, что стоит дублировать флекс стили следующими:

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

Asp компонент content rotator

Компонента Content Rotator позволяет создать объект, выводящий на страницу меняющиеся с каждой новой перезагрузкой текстовые фрагменты. Экземпляр объекта создаётся командой .

Прежде чем использовать объект, необходимо создать некий текстовый файл-конфигуратор по определённому формату. Для каждого текстового фрагмента в файле-конфигураторе создаётся следующий текст, начинающийся с двух символов «процент» ( %% ):

где Weight — необязательный параметр, целое число в интервале от 0 до 65,535, означающее относительную частоту появления того или иного текстового фрагмента, Comment — комментарий, ContentString — собственно текстовый фрагмент. В приведённом на предыдущей странице примере используется следующий файл.

После того, как файл-конфигуратор создан и объект открыт, можно использовать его методы и свойства.

Методы

ChooseContent Возвращает случайным образом выбранный текстовый фрагмент из файла-конфигуратора:

ChooseContent(content-schedule-path)

Здесь content-schedule-path — виртуальный путь к файлу-конфигуратору GetAllContent Возвращает полный список фрагментов, разделённых тегом :

GetAllContent(content-schedule-path)

Оригинальный ротатор контента


Данный урок расскажет Вам о том, как сделать ротатор контента с помощью jQuery.

Мы уже неоднократно делали уроки про ротаторы, но каждый из них уникален по своему. И поэтому, я стараюсь рассказать Вам про каждый из них.

Для начала давайте взглянем на структуру HTML:

Как Вы видите каждая вкладка в ротаторе помечена комментариями и Вы легко можете ее найти.

Также нам понадобиться подключить стили оформления (как обычно между тегами ):

И, как всегда, не забываем про фреймворк jQuery и другие функции, необходимые для правильной работы (также между тегами ):

Стоит обратить внимание, что все картинки прописаны в CSS. И если Вы будете что-либо менять — всегда помните про пути к картинкам.

По этому уроку все! Вопросы и комментарии приветствуются ниже! Всем большое спасибо за внимание.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.raymondselda.com
Перевел: Максим Шкурупий
Урок создан: 9 Мая 2009
Просмотров: 62757
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

помоготите найти Content Rotator (controt.dll)

31.03.2008, 16:21

Библиотека xnet.dll добавить Content-Length
В общем не совсем понятно как добавить этот параметр. Пробую добавить в хидер — выдается ошибка.

Помоготите пожалуста с проверкой моей модели БД
Пожалуйста, помогите с моделью БД и 3НФ, уже больше дня не могу понять, что с ней не так, но.

Модуль Flash Rotator
Всем привет! Имеется модуль слайдера для джумлы Flash Rotator. Подскажите как на одну страницу.

Content-Language и Content-Type для оптимизации
Есть сайт на котором норм кол-во страниц но яндекс почему-то проиндексировал лишь 5 из них на всех.

ASP Content Rotator

You can create a ContentRotator object using the ASP Content Rotator component that displays a different HTML content string each time a user enters or refreshes a page.
A text file, called the Content Schedule File, includes the information about the content strings.

A D V E R T I S E M E N T

ASP Content Rotator Component

You can display any type of content that HTML can represent: text, images, colors, or hyperlinks which stores in the content strings .

Syntax

The following example displays a different content each time a user views the Web page. Create a text file named «textclass.txt» in your default Web Site folder, in a subfolder called text.

%% #1
This is a great day!!

Enjoy

Notice the #number at the beginning of each content string. This number is an optional parameter that indicates the relative weight of the HTML content string. In this example, the Content Rotator will display the first content string one-tenth of the time, the second string two-tenths of the time, the third string three-tenths of the time, and the fourth string four-tenths of the time.

Илон Маск рекомендует:  Таблицы в HTML
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL