Raw HTML

With Sandvox you can add Raw HTML objects to a page, and Raw HTML pages (containing no Sandvox-generated content) to a site. For some Raw HTML object ideas, have a look at the «Raw HTML object examples» article.

The ability to use custom HTML code is an advanced ability of Sandvox. If you want to edit raw HTML, we assume that you already have a working knowledge of HTML or wish to obtain one; this page is by no means intended as an HTML tutorial, nor can Karelia provide specific troubleshooting advice related to an individual user’s HTML code.

If you want to learn more about HTML before attempting to edit raw HTML in your Sandvox site, we encourage you to visit the following third party sites that specifically address HTML issues:

Before publishing, please be sure to validate any Raw HTML objects.

Code Guidelines

For advice on the correct HTML to use, please see «HTML code guidelines and tips.»

Raw HTML object

Raw HTML Objects allow you to manage HTML on part of your page.

To insert a Raw HTML object:

To later edit a Raw HTML object:

We advise you to use the «Validate» toolbar item to ensure your HTML adheres to web standards.

Sandvox will do its best to display your HTML in the Web View exactly as it will appear once published. There are some limitations though:

External Resources

If you have «Load data from the Internet» disabled in the Preferences, and your HTML references resources that must be loaded from the internet, loading them will fail within Sandvox. Such resources should appear correctly once published, or you could temporarily turn the preference back on to test.

Invalid HTML

Before displaying the HTML, Sandvox tries to make sure it isn’t invalid in such a way that could compromise other editing features. If a problem is detected, Sandvox will instead display this placeholder:

This is generally the result of a missing, mismatched, or extra close tag. For example, this is missing

And this has an extra

To fix, it’s advisable to correct your HTML as the error may cause some web browsers to render the page incorrectly. Sandvox’s HTML editor has built-in validation support which can provide detailed information on the problems.

To validate custom HTML:

The placeholder only takes effect while editing in Sandvox; the code you enter will always be included exactly as you typed it when the site is published.

Tidy HTML

The purpose is to clean up the HTML in the object and make it nicely indented and formatted.
This is not appropriate to use when there is PHP or other scripts mixed in with the HTML code since «tidying» the HTML may remove the scripting, leaving only the valid HTML behind.

Raw HTML page

This is a page in which the *entire* contents of the page is managed by you and does not contain any Sandvox-generated content.

To edit the code of Raw HTML page:

The changes are updated in the Web View when you click the «Update Preview» button or close the HTML editing window.

Related Articles

Keywords: raw, html, import, insert, counter, counters, count, page counter, hit, hits, access, accessed, view, viewed, views, visitor, visitors, code, source, coding, hyper, text, hypertext, markup, mark, up, mark-up, language, edit, page, pages, object, objects, web widget, widgets

Источник

WordPress.org

Русский

Raw HTML

Описание

Lets you disable automatic formatting like smart quotes and automatic paragraph creation, and use raw HTML/JS/CSS code in your posts without WordPress messing it up.

Возможности

With this plugin, you can wrap any part of your post in [raw]…[/raw] tags to prevent WordPress from converting newlines to HTML paragraphs, replacing apostrophes with typographic quotes and so on. This is very useful if you need to add a CSS block or JavaScript to your post.

RawHTML will also add new checkboxes to the «Edit Post» screen that let you disable certain WP filters on a per-post basis. This way you can:

The free version only supports editing posts in the Text tab (called «HTML» in older WordPress versions). Get the Pro version if you want to be able to switch between Text and the Visual editor without WordPress messing up your content.

Compatibility

This plugin doesn’t fully support the Gutenberg editor. As of WordPress 5.0, some Raw HTML features will only work if you use the Classic Editor plugin.

Usage

In this case, the tags will prevent WordPress from inserting paragraph breaks between «This», «is» and «a «test»», as well as ensure that the double quotes arround «test» are not converted to typographic (curly) quotes.

To avoid problems, only edit posts that contain your custom code in Text/HTML mode. If you’d like to be able to also use the Visual editor, get the Pro version. It will make the code betwen [raw] tags appear as a read-only placeholder when viewed in Visual mode, ensuring WordPress doesn’t change it.

Combining shortcodes

By default, shortcodes that are inside [raw] tags will not work. They will just show up as plain text. To enable shortcodes, add the shortcodes=1 attribute to the tag:

Preserving [raw] code in excerpts

By default, the plugin will automatically remove any code that’s inside [raw]. [/raw] tags from post excerpts. You can prevent that by adding the following line to wp-config.php :

This will ensure that the plugin doesn’t strip [raw] blocks from automatically generated excerpts.

Notes

Some features of Raw HTML will only work for users who have the «unfiltered_html» capability. In a normal WordPress install that includes the Editor and Administrator roles. In a Multisite install, only the Super Admin has this capability by default.

Установка

To install the plugin follow these steps :

Часто задаваемые вопросы

What’s the difference between the free version and the Pro version?

If you’re using the free version, switching from Text/HTML to the Visual editor can still mess up your code. The Pro version fixes this.

The way it works is that it replaces [raw]. [/raw] code with read-only placeholders when viewed via the Visual editor, and restores the original code when you switch to HTML or when the post is displayed your readers. This allows you to switch between HTML and Visual modes without worrying your content will get mangled by WP.

How can I set some of the «Disable xyz» tweaks to be «On» by default?

Open to the post editor and click the «Screen Options» button in the top-right part of the page. A settings panel will appear. Locate the «Raw HTML defaults» section and tick the appropriate checkboxes. Any changes you make to these settings will only affect new and edited posts.

Источник

Using Raw HTML to Write and Edit
Your Web Pages to Supplement an
Editor or without Using an Editor

Prerequisite:

Purpose:

To obtain what is necessary to start writing Web pages

Adobe PageMill is the recommended software for our Web pages. Sometimes your Web page may not look the way you want it to. If you can not correct the problem in PageMill the Document Source may help. The source is shown in HTML (HyperText Markup Language).

The following HTML tags are meant to supplement Adobe PageMill and not replace it. It is not a complete list and is not meant to be one. The purpose of including a list is to help the participants edit their Web pages. Therefore, a partial list of authoring tags are included to assist you.

RAW HTML TABLE OF CONTENTS

General Page Structure

To see a picture of the structure of an HTML document:

Inside this, there are two sections:

Your HTML tags and page content should appear in the BODY section of your document; that is, only in the green section between the and tags.

You can put title and other non-content information inside the (yellow) HEAD section of the document.

You should not write anything outside those sections; that is, you should not write anything in the red areas of the document.

change the placement:

first item in a bullet list

keep text together:

change color of the font:

will give a grayish text.

change the background color:

insert a line break:

RAW HTML LINKS

To link your Web page to other Web sites, e-mail addresses, and other online pages, you will use the tag. You will also need the URL name for the link.

Linking to Other Documents

The chief power of HTML comes from its ability to link regions of text (and also images) to another document. A «local» link is a link to a document on your own computer as opposed to a link to document on another computer across the network. The browser highlights these regions (usually with color and/or underlines) to indicate that they are hypertext links (often shortened to hyperlinks or simply links).

Here is a sample hypertext reference:

This entry makes the word «Maine» the hyperlink to the document MaineStats.html, which is in the same directory as the first document.

NOTE: Make sure you have the URL case sensitive and complete. If there is even the slightest error the link may not work.

To create an e-mail link:

RAW HTML LINKS TO THE INTERNET

You will follow the same procedure for linking pages to the Internet.

RAW HTML ANCHORS (LINKS WITHIN A PAGE)

Click on the link and the reader should see the designated text now on the top of the page instead of having to scroll down your Web page.

RAW HTML WITH GRAPHICS

Inline Image

An inline image is an image that appears on your page. You do not have to click on a link to get the image. Images take longer to load than text so you should think carefully about the size and number of images you choose for your pages. HTML source code for an image looks like the following:

What goes between the quotes is the URL for the image file.

More HTML for Images

These additional commands make the graphics on your pages look much nicer. Here are two examples: Here is an example of using the ALIGN=»RIGHT» modifier to display an image. You notice the text is wrapped around the image that appears on the right-hand side. You can put the command any place in the text that you want, even in the middle of a sentence. Just experiment and see how it looks. You can add breaks in the text or new paragraphs as well (e.g.,
or

A helpful command to use when you are using right- and left-aligned images is
. It forces a break in the text so that subsequent text does not continue to wrap around a large image. Look at the difference in how the text wraps around the images with and without the command.

Without the Command

If I have a new heading, I cannot get the new heading to start after the picture of the ball where I want it.

Failed New Heading

If I use the
heading to start where I want it, under the picture of the ball on the left.

Successful New Heading

Using the Images:

Good Web pages should be easy to read while being attractive to see. Place your images, buttons, bars, etc. to draw the reader’s eye. Remember that not everyone will be using the same hardware and software to view as you used to create your project Web pages. If possible, look at your Web pages with various computers, monitors, and Internet connections. Look at different Web pages on the Internet to obtain different ideas for your Web pages.

Internet Resources on HTML

You can read about more commands to control displaying images by referring to The Bare Bones Guide to HTML site and clicking on the HTML sections on graphics.

This was just a list of the basic tags. If this caused you to think about other possibilities, here are some Web sites that extend the basics:

Try doing your own search for more on HTML basics and send your results according to your facilitator’s instructions, if assigned to do so.

Источник

ASP.NET MVC Урок 8. View, Razor, страница ошибки

Цель урока. Научиться делать вывод данных в html, использование Razor. Helperы. PageableData. Динамические формы. RedirectToLogin, RedirectToNotFoundPage. Страница ошибки. RssActionResult.

Основа

Итак, рассмотрим как устроена часть View.
В контроллере все action-методы возвращают тип ActionResult. И для вывода результата мы используем:
return View(modelData);

Razor

При создании View есть выбор между двумя движками: ASPX и Razor. Первый мы не будем использовать в дальнейшем, поэтому поговорим о Razor.

ASPX был громозким движком с тегами для выполнения кода и для вывода данных.

Внутри < >находятся теги – это маркер того, что это шаблон. Для простого выполнения кода внутри шаблона используем структуру @< code >, для корректного вывода данных внутри атрибутов или текстом конструкция — @(string result):

Чтобы вывести не теговый текст, нужно использовать псевдотеги :

Для вывода html-текста – или должна возвращаться MvcHtmlString, или использовать конструкцию Html.Raw(html-string-value), иначе текст будет выведен с экранированием тегов.

PageableData

По умолчанию количество выводимых значений на странице – 20, но мы можем изменить этот параметр в конструкторе. Передаем IQueryable и вычисляем кол-во страниц CountPage. Используя PageNo, выбираем страницу:

В контроллере используем:

Во View используем данный класс:

Запускаем, проверяем (http://localhost/User)

Для продолжения, сгенерируем больше данных (просто ctrl-c, ctrl-v в таблице в Server Explorer)

Перейдем к созданию Helper’а пагинатора, который даст нам возможность пролистывать этот список.

Helper (PagerHelper)

Так как мы используем bootstrap, то и на базе него будем делать пагинатор. В коде он выглядит так:

Добавляем пагинатор во View:

Обратите внимание на конструкцию
x => Url.Action(«Index», new )
Это делегат, который возвращает ссылку на страницу. А Url.Action() – формирует ссылку на страницу /User/Index с параметром page = x.
Вот что получилось (уменьшил количество вывода на странице до 5, чтобы образовалось больше страниц):

SearchEngine

Следующим шагом к просмотру данных будет создание поиска. Поиск будет простой, по совпадению подстроки в одном из полей данных. Входной параметр – searchString.

В первой строке очищаем строку запроса. Создаем regex для поиска. В данном случае, мы ищем только в поле Email у пользователей.

Источник

Справочник по синтаксису Razor для ASP.NET Core

Отрисовка HTML

Синтаксис Razor

Razor поддерживает C# и использует @ символ для перехода от HTML к C#. Razor Вычисляет выражения C# и отображает их в выходных данных HTML.

Если @ за символом следует Razor зарезервированное ключевое слово, он перемещается в Razor разметку, относящуюся к конкретному. В противном случае он переходит в обычный HTML.

Чтобы экранировать @ символ в Razor разметке, используйте второй @ символ:

Код будет отображен в HTML с одним символом @ :

HTML-атрибуты и содержимое, включающие адреса электронной почты, не расценивают символ @ как символ перехода. Адреса электронной почты в следующем примере не затрагиваются путем Razor синтаксического анализа:

SVG (Scalable Vector Graphics — масштабируемый векторный рисунок)

Неявные Razor выражения

Неявные Razor выражения начинаются с @ следующего кода C#:

Неявные выражения не могут содержать универсальные шаблоны C#, так как символы в угловых скобках ( <> ) интерпретируются как тег HTML. Следующий код является недопустимым:

Приведенный выше код вызывает ошибку компилятора примерно следующего вида:

Вызовы универсальных методов должны быть заключены в явное Razor выражение или Razor блок кода.

Явные Razor выражения

Явные Razor выражения состоят из @ символа с сбалансированной круглой скобкой. Для визуализации времени на прошлой неделе Razor используется следующая разметка:

Любое содержимое в скобках @() вычисляется и отображается в выходных данных.

Неявные выражения, описанные в предыдущем разделе, обычно не содержат пробелов. В следующем коде из значения текущего времени неделя не вычитается:

Код отображает следующий HTML:

Явные выражения позволяют объединять результат своего выполнения с дополнительным текстом:

Без явного выражения

обрабатывается как адрес электронной почты, и на выходе отображается

. Если же текст написан как явное выражение, то вы получите

Кодирование выражений

Приведенный выше код отображает следующий HTML:

HTML-код отображается в браузере как обычный текст:

Выходные данные HtmlHelper.Raw не кодируются, но отображаются в виде разметки HTML.

Использование HtmlHelper.Raw с непроверенными входными данными пользователя представляет угрозу безопасности. Эти входные данные могут содержать вредоносный код JavaScript или другие эксплойты. Очистка вводимых пользователем данных является сложной задачей. Старайтесь не использовать HtmlHelper.Raw с такими данными.

Код отображает следующий HTML:

Razor блоки кода

Код отображает следующий HTML:

В блоках кода объявите локальные функции с помощью разметки для использования в качестве методов создания шаблонов:

Код отображает следующий HTML:

Неявные переходы

Языком по умолчанию в блоке кода является C#, но Razor страница может перейти обратно в HTML:

Явный переход с разделителями

Чтобы определить подраздел блока кода, который должен визуализировать HTML, заключите символы для отрисовки с помощью Razor

Используйте этот способ для отрисовки HTML, не заключенного в HTML-теги. Без HTML или Razor тега Razor возникает ошибка времени выполнения.

хорошо подходит для контроля пробелов при отрисовке содержимого:

Явный перенос строки

Для отрисовки оставшейся части строки в виде HTML внутри блока кода используйте синтаксис @: :

Без @: кода в коде Razor создается ошибка времени выполнения.

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

Управляющие структуры

Управляющие структуры являются расширением блоков кода. Все аспекты блоков кода (переход на разметку, встроенный код C#) также относятся к следующим структурам.

Условные выражения @if, else if, else, and @switch

@if контролирует, когда нужно запускать код:

Для else и else if символ @ не требуется:

В следующей разметке показано использование оператора switch:

Циклов @for, @foreach, @while, and @do while

Операторы выполнения цикла позволяют выполнять отрисовку шаблонного HTML. Отрисовка списка людей:

Поддерживаются следующие операторы выполнения цикла:

Составной оператор @using

В C# оператор using позволяет обеспечить использование какого-то объекта. В Razor для создания вспомогательных функций HTML, содержащих дополнительное содержимое, используется тот же механизм. В следующем коде вспомогательные функции HTML используют оператор @using для создания тега :

@try, catch, finally

Обработка исключений выполняется так же, как в C#:

Razor имеет возможность защищать критические разделы с помощью инструкций Lock:

Комментарии

Razor поддерживает комментарии C# и HTML:

Код отображает следующий HTML:

Razor перед отрисовкой веб-страницы комментарии удаляются с сервера. Razor использует @* *@ для разделения комментариев. Следующий код закомментирован, поэтому сервер не отрисовывает разметку:

Директивы

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

Код создает класс, аналогичный следующему:

@attribute

Директива @attribute добавляет данный атрибут к классу созданной страницы или представления. В следующем примере добавляется атрибут [Authorize] :

@code Блок позволяет Razor компоненту добавлять в компонент элементы C# (поля, свойства и методы):

@functions

Директива @functions позволяет добавлять элементы C# (поля, свойства и методы) в создаваемый класс:

В Razor компонентахиспользуйте @code @functions для добавления членов C#.

Код создает следующую разметку HTML:

Следующий код является созданным Razor классом C#:

Методы @functions служат в качестве методов создания шаблонов при наличии разметки:

Код отображает следующий HTML:

@implements

Директива @implements реализует интерфейс для созданного класса.

В следующем примере реализуется System.IDisposable, чтобы можно было вызывать метод Dispose:

@inherits

Директива @inherits позволяет полностью управлять классом, которому наследует представление:

Следующий код является пользовательским Razor типом страницы:

В представлении отображается CustomText :

Код отображает следующий HTML:

@model и @inherits могут использоваться в одном представлении. @inherits может находиться в _ViewImports.cshtml файле, импортированном представлением:

Следующий код показывает пример строго типизированного представления:

Если передать в модель «rick@contoso.com», представление создает следующую разметку HTML:

@inject

@inject Директива позволяет Razor странице внедрить службу из контейнера службы в представление. Дополнительные сведения: Внедрение зависимостей в представления.

@layout

@layout Директива задает макет для маршрутизируемых Razor компонентов, имеющих @page директиву. Компоненты макета используются, чтобы избежать дублирования и несогласованности кода. Дополнительные сведения см. в разделе Макеты Blazor в ASP.NET Core.

@model

Директива @model определяет тип модели, передаваемой в представление или страницу:

в ASP.NET Core приложении MVC или Razor pages, созданном с использованием отдельных учетных записей пользователей, Views/Account/Login.cshtml содержит следующее объявление модели:

Созданный класс наследует от RazorPage :

Razor предоставляет Model свойство для доступа к модели, передаваемой в представление:

@namespace

Для Razor примера страниц, показанного в следующей таблице:

Предыдущие связи применяются к файлам импорта, которые используются в представлениях и Razor компонентах MVC.

Если EvenMorePages Папка в предыдущем примере содержит файл импорта с файлом @namespace Another.Planet (или Pages/MorePages/EvenMorePages/Page.cshtml файлом @namespace Another.Planet ), результат показан в следующей таблице.

Директива @page имеет различные эффекты в зависимости от типа файла, в котором она используется. Директива:

@preservewhitespace

@section

@using

Директива @using добавляет директиву C# using в созданное представление:

В Razor компонентах @using также управляет тем, какие компоненты находятся в области.

Атрибуты директивы

Razor атрибуты директивы представлены неявными выражениями с зарезервированными ключевыми словами после @ символа. Атрибут директивы обычно изменяет способ синтаксического анализа элемента или предоставляет различные функциональные возможности.

@attributes

@attributes позволяет компоненту обрабатывать необъявленные атрибуты. Дополнительные сведения см. в разделе Компоненты Razor ASP.NET Core.

@bind:culture

Используйте @bind:culture атрибут с @bind атрибутом, чтобы предоставить System.Globalization.CultureInfo для синтаксического анализа и форматирования значения. Дополнительные сведения см. в разделе Глобализация и локализация в ASP.NET Core Blazor.

Razor предоставляет функции обработки событий для компонентов. Дополнительные сведения см. в разделе Обработка событий Blazor в ASP.NET Core.

@on:preventDefault

Запрещает выполнение действия по умолчанию для события.

@on:stopPropagation

Останавливает распространение события.

Атрибут директивы @key заставляет алгоритм сравнения компонентов гарантировать сохранение элементов или компонентов на основе значения ключа. Дополнительные сведения см. в разделе Компоненты Razor ASP.NET Core.

Ссылки на компоненты ( @ref ) предоставляют способ ссылаться на экземпляр компонента, чтобы можно было выполнять команды для этого экземпляра. Дополнительные сведения см. в разделе Компоненты Razor ASP.NET Core.

@typeparam

Директива @typeparam объявляет параметр универсального типа для созданного класса компонента:

Поддерживаются универсальные типы с ограничениями типов where :

Дополнительные сведения см. в следующих статьях:

@typeparam

Директива @typeparam объявляет параметр универсального типа для созданного класса компонента:

Дополнительные сведения см. в следующих статьях:

Шаблонные Razor делегаты

Razor шаблоны позволяют определить фрагмент пользовательского интерфейса в следующем формате:

Отображенные выходные данные:

Встроенный шаблон также можно указать Razor в качестве аргумента для метода. В следующем примере Repeat метод получает Razor шаблон. Метод использует этот шаблон для создания HTML-содержимого с повторениями элементов из списка:

С использованием списка домашних животных из предыдущего примера метод Repeat вызывается следующим образом:

Отображенные выходные данные:

Вспомогательные функции тегов

Существует три директивы, которые относятся к вспомогательным функциям тегов.

Razor зарезервированные ключевые слова

Razor словами

Razor Ключевые слова экранированы с помощью @(Razor Keyword) (например, @(functions) ).

RazorКлючевые слова C#

RazorКлючевые слова C# должны быть двойным образом экранированы с помощью @(@C# Razor Keyword) (например, @(@case) ). Первый заключается в @ Escape- Razor анализе. а второй @ — для обхода C#.

Зарезервированные ключевые слова не используются Razor

Проверка Razor класса C#, созданного для представления

Razor Пакет SDK обрабатывает компиляцию Razor файлов. При сборке проекта Razor пакет SDK создает obj/ / /Razor каталог в корневом каталоге проекта. Структура каталогов в Razor каталоге отражает структуру каталогов проекта.

рассмотрим следующую структуру каталогов в Razor проекте ASP.NET Core страниц:

При построении проекта в конфигурации отладки выдается следующий obj Каталог:

Поиск данных в представлениях и учет регистра

RazorОбработчик представлений выполняет поиск представлений с учетом регистра. Однако фактический поиск зависит от используемой файловой системы.

Разработчикам рекомендуется использовать для файлов и каталогов тот же регистр, что и для:

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

Источник