Предыдущие версии MVC позволяли нам писать HtmlHelpers , которые тогда хорошо поработали и сейчас тоже. Но в MVC 6 команда ASP.NET представила TagHelpers.
Синтаксический Mardown в .NET является способ проще , чем можно себе представить, благодаря StackOverflow в MardownSharp и Карлис Gangis — х CommonMark.NET . Я использую CommonMark.NET, поскольку он обеспечивает гораздо более быстрый анализ, чем другие библиотеки. Платформа блогов, которую я использую, — это собственный движок блогов, который я написал в MVC4. Содержание сообщения сохраняется в HTML, что делает мой сырой HTML слишком запутанным по сравнению с простым синтаксисом Markdown. Я не собираюсь менять его так, как сейчас, но для других простых приложений, которые очень похожи, таких как приложения для создания заметок или ведения блогов, я хотел бы сохранить контент в уценке.
Я начну с простой реализации этого пользовательского TagHelper, а затем мы рассмотрим другие способы его улучшения. Вот как легко создать свой собственный TagHelper.
Создайте новый файл класса MarkdownTagHelper.cs . Внутри файла переименуйте имя класса в соответствии с именем файла, или вы можете изменить имя на то, что вам нравится. В моем случае я сохраняю имя класса таким же, как имя файла.
Обратите внимание на название кастомного TagHelper. По замыслу компилятор удалит слово TagHelper из имени класса, а остальная часть имени станет вашим пользовательским именем TagHelper.
Следующим шагом является наследование нашего класса от класса TagHelper . Каждый пользовательский TagHelper будет наследоваться от этого класса, как и класс UserControl при создании пользовательского элемента управления. TagHelper предоставляет нам два виртуальных метода, Process и ProcessAsync, которые мы переопределим для реализации нашей собственной логики для нашей специальной разметки TagHelper. Первым параметром является TagHelperContext , который содержит информацию о текущем теге. Второй параметр — TagHelperOutput , который представляет выходные данные, генерируемые TagHelper. Поскольку нам нужно проанализировать Markdown на наших страницах просмотра бритвы, нам нужно обратиться к библиотеке CommonMark.Net. Используйте приведенную ниже команду Nuget, чтобы добавить ее в текущий проект.
Install-Package CommonMark.Net
Вот как будет выглядеть код:
Итак, теперь у нас есть наш собственный TagHelper, который позволит нам анализировать Markdown, но чтобы использовать его в наших представлениях, нам нужно включить этот TagHelper в файле _ViewImports.cshtml . Чтобы включить ваш пользовательский TagHelper:
@addTagHelper "*, WebApplication1"
Ваш пользовательский помощник по тегам станет фиолетовым на странице просмотра. Это похоже на строку над ним, где @addTagHelper импортирует все TagHelpers из заданного пространства имен. Если вы не заинтересованы в выборе всех TagHelpers в указанном пространстве имен, используйте @removeTagHelper, чтобы отключить TagHelpers, который вам не нужен. Для этого я хочу, чтобы все созданные мной помощники тегов были частью приложения и, следовательно, символом «*».
По вашему мнению, где вы хотите использовать это, просто введите <markdown> и внутри этого тега у вас должна быть ваша уценка. Чтобы проверить это, вы можете просмотреть любой необработанный файл в Github и скопировать текст. Я использую README.md из CommonMark.NET, и он отображается отлично.
Внимание: при копировании и вставке кода уценки из любого места в поле зрения убедитесь, что у вас нет пробелов в начале строки. Это применимо только тогда, когда вы работаете со встроенной уценкой. Вот скриншот со сравнением.
Нажмите F5 и увидите помощника тега уценки в действии. Ниже вывод, который я получаю.
Это самый простой из всех. Теперь давайте добавим некоторый префикс в наш пользовательский TagHelper. Чтобы добавить собственный префикс тега в TagHelper, нам просто нужно снова посетить файл _ViewImports.cshtml и добавить новую строку, например, так:
@tagHelperPrefix "blog-"
После добавления вышеуказанной строки в файл перейдите на страницу просмотра, где вы использовали свой собственный TagHelper, и вы можете заметить, что тег <markdown> больше не фиолетовый. Это потому, что теперь нам нужно добавить собственный префикс тега, который мы только что определили в файле _ViewImports.cshtml . Измените его с <markdown> на <blog-markdown>, и он снова станет фиолетовым.
По замыслу TagHelper примет <markdown> в качестве тега для обработки. Но это может быть легко проигнорировано с помощью атрибута TargetElement в верхней части класса, который позволяет использовать другое имя, а не <markdown> . Это не означает, что вы не можете использовать <markdown> , но вместо этого вы также можете использовать пользовательский TagHelper с именем, указанным в этом атрибуте.
Теперь давайте добавим некоторые атрибуты в мой Markdown TagHelper. Давайте попробуем добавить атрибут url, который поможет пользователям отображать уценку в представлении с удаленного сайта, такого как Github. Чтобы добавить атрибут, просто добавьте новое открытое свойство типа string и назовите его url . Когда вы создаете открытое свойство в классе TagHelper, оно автоматически предполагает, что это атрибут. Чтобы использовать это свойство, мое мнение теперь:
<blog-markdown url="https://raw.githubusercontent.com/Knagis/CommonMark.NET/master/README.md">
</blog-markdown>
Значение атрибута url читается TagHelper, который, в свою очередь, читает всю строку Markdown из Github и отображает HTML-код на странице. Давайте снова сосредоточимся на атрибуте TargetElement. Рассмотрим сценарий, в котором вы не хотите, чтобы ваш пользовательский TagHelper отображал или работал, если атрибуты не переданы или отсутствуют. Это где атрибут TargetElement входит в картину. Если я не хочу, чтобы мой TagHelper работал, если отсутствует параметр url , тогда я могу просто написать:
[TargetElement("markdown", Attributes = "url")]
Обратите внимание на параметр Attributes . Параметр Attributes позволяет вам задать имя всех атрибутов, которые должны обрабатываться вашим TagHelper, иначе TagHelper не будет работать. Например, если я просто использую TagHelper < markdown >, но не передаю атрибут url, TagHelper не будет выполняться, и вы увидите необработанный код уценки. Мое требование — чтобы этот TagHelper работал с использованием атрибута url или без него . Я могу закомментировать или удалить атрибут TargetElement или просто удалить параметр Attributes, чтобы начать работу.
Вот полный MarkdownTagHelper.cs:
using Microsoft.AspNet.Razor.Runtime.TagHelpers;
using System;
using System.Net.Http;
using System.Threading.Tasks;
namespace WebApplication1.TagHelpers
{
//[TargetElement("markdown", Attributes = "url")]
public class MarkdownTagHelper : TagHelper
{
//Attribute for our custom markdown
public string Url { get; set; }
private string parse_content = string.Empty;
//Stolen from: http://stackoverflow.com/questions/7578857/how-to-check-whether-a-string-is-a-valid-http-url
private bool isValidURL(string URL)
{
Uri uriResult;
return Uri.TryCreate(URL, UriKind.Absolute, out uriResult)
&& (uriResult.Scheme.ToLowerInvariant() == "http" || uriResult.Scheme.ToLowerInvariant() == "https");
}
public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
if (context.AllAttributes["url"] != null)
{
string url = context.AllAttributes["url"].Value.ToString();
string webContent = string.Empty;
if (url.Trim().Length > 0)
{
if (isValidURL(url))
{
using (HttpClient client = new HttpClient())
{
webContent = await client.GetStringAsync(new Uri(url));
parse_content = CommonMark.CommonMarkConverter.Convert(webContent);
output.Content.SetContent(parse_content);
}
}
}
}
else
{
//Gets the content inside the markdown element
var content = await context.GetChildContentAsync();
//Read the content as a string and parse it.
parse_content = CommonMark.CommonMarkConverter.Convert(content.GetContent());
//Render the parsed markdown inside the tags.
output.Content.SetContent(parse_content);
}
}
}
}
Я обнаружил, что полная функция TagHelper в MVC 6 намного удобнее и мощнее. Надеюсь, тебе тоже понравится.