Erstellen Sie benutzerdefinierte HTML-Hilfsprogramm in ASP.Net Core

Question

Ich möchte meinen benutzerdefinierten HTML-Helper wie in MVC erstellen, aber ich finde nicht, wie auf die richtige Weise zu machen.

Ich habe gefunden, wie benutzerdefinierte Tag-Helfer, aber keine HTML-Helfer erstellen.

Danke für Ihre Zeit!

Answer 1

Für mich ich dachte meine HTML-Helfer arbeiten nicht waren, bis ich, dass die Extension-Methode entdeckt jetzt nicht HtmlHelper auf IHtmlHelper ist.

Also für .net Kern:

public static IHtmlContent CheckboxListFor<TModel>(this IHtmlHelper<TModel> html, 
      Expression<Func<TModel, List<CheckboxListItem>>> expression) ... 

Statt für .net:

public static HtmlString CheckboxListFor<TModel>(this HtmlHelper<TModel> html, 
      Expression<Func<TModel, List<CheckboxListItem>>> expression) ... 

EDIT: Ich habe auch den Rückgabetyp für .net Kern aktualisiert zu sein IHtmlContent so etwas wie HtmlContentBuilder verwenden ist eine bessere Möglichkeit, HTML-Inhalt zu komponieren und zurückgeben, die zurückgibt IHtmlContent

Answer 2

Dies wurde von Danny van der Kraan in seiner blog post here gut erklärt. Die Antwort unten ist ein Auszug aus diesem Beitrag:

ASP.NET Core 1.0 [MVC 6] kommt mit einer neuen spannenden Funktion namens TagHelpers. In ASP.Net Core 1.0 gibt es kein Konzept von HTML Helper wie in MVC.

Was sind TagHelpers?

TagHelpers kann als die Evolution von HTML-Helfern gesehen werden, die mit der Einführung des ersten MVC-Frameworks eingeführt wurden. Um einen Kontext zu schaffen, müssen Sie sich vorstellen, dass Sie mit dem klassischen ASP die Generierung von HTML nur über benutzerdefinierte Subroutinen automatisieren können. Danach kam ASP.NET mit Serversteuerelementen, mit Ansichtsstatus als größtes Plus, um das Aussehen von Desktop-Anwendungen zu simulieren und den Übergang für Desktop-Entwickler zu erleichtern. Aber wir wissen alle, was passiert, wenn wir versuchen, Quadrate in runde Löcher zu stecken. Wir mussten uns der Tatsache stellen, dass Web-Entwicklung nichts mit Desktop-Entwicklung zu tun hat. Um mit der richtigen Webentwicklung Schritt zu halten, wurde das ASP.NET MVC Framework mit HTML-Helfern gestartet, um die HTML-Ausgabe zu automatisieren. Aber HTML-Helfer sind nie wirklich geliert, besonders nicht mit Front-End-Entwicklern und Designern. Eines der Hauptprobleme war, dass man bei der Arbeit an Ansichten viel von den spitzen Klammern (HTML, CSS) zu C# (Razor syntax) wechselte, was das Erlebnis unnötig unangenehm machte. [MVC 6] möchte dieses und einige kleinere Probleme durch Einführung von TagHelpers beheben. Beispiel HTML-Helfer:

@Html.ActionLink(”Home”, ”Index”, ”Home”) 

Mit dem Anker TagHelper würde dies wie folgt aussehen:

<a asp-action="Index" asp-controller="Home">Home</a> 

PS:Bitte beachten Sie, dass asp ist nur eine Konvention, aber dazu später mehr.

Die im Browser gerenderten Ausgabe ist das gleiche für beide:

<a href="/">Home</a> 

PS:die Default-Route nicht geändert wurde zur Verfügung gestellt.

Weitere Informationen über TagHelpersclick here

Answer 3

HTML-Helfer in ASP.NET-Core unterstützt aussehen werden und warten Dokumentation:

https://docs.microsoft.com/en-au/aspnet/core/mvc/views/html-helpers

an der Quelle Core-ASP.NET suchen sie arbeiten ziemlich ähnlich zu älteren Versionen von ASP.NET MVC:

https://github.com/aspnet/Mvc/blob/dev/src/Microsoft.AspNetCore.Mvc.ViewFeatures/Rendering/HtmlHelperDisplayExtensions.cs

---

Beispiel

MyHTMLHelpers.cs:

using Microsoft.AspNetCore.Html; 
using Microsoft.AspNetCore.Mvc.Rendering; 
using System; 

namespace MyApp.Helpers 
{ 
    public static class MyHTMLHelpers 
    { 
     public static IHtmlContent HelloWorldHTMLString(this IHtmlHelper htmlHelper) 
      => new HtmlString("<strong>Hello World</strong>"); 

     public static String HelloWorldString(this IHtmlHelper htmlHelper) 
      => "<strong>Hello World</strong>"; 
    } 
} 

_ViewImports.cshtml (zweite Zeile ist die wichtige Veränderung):

@using MyApp 
@using MyApp.Helpers 
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 

MyView.cshtml:

<div>@Html.HelloWorldHTMLString()</div> 
<div>@Html.HelloWorldString()</div> 

Ausgänge:

Hallo Welt

< strong> Hallo Welt </strong>

Answer 4

ich war nie in der Lage zu bekommen Htmlhelper Erweiterungsmethoden zu arbeiten, erhielt ich immer:

‚IHtmlHelper‘ enthält keine Definition enthalten für ‚Method‘ und keine Erweiterungsmethode ‚Method‘ ein erstes Argument vom Typ ‚IHtmlHelper‘ akzeptieren konnte gefunden werden (möglicherweise fehlt eine using-Direktive oder eine Baugruppe Referenz?)

Auch wenn ich den richtigen Namespace in meiner _ViewImports.cshtml Datei hatte. Also entschied ich mich, die Fähigkeit von Razor-Seiten zu nutzen, um nun Dienste zu injizieren, die für die Abhängigkeitsinjektion registriert wurden. Als ein Beispiel habe ich die Notwendigkeit, einige Werte aus meiner Konfigurationsdatei in meine _Layout.cshtml Datei zu injizieren. Also habe ich folgende:

1) definiert, um eine IConfigurationHelperService Schnittstelle:

public interface IConfigurationHelperService 
{ 
    string GetApiUrl(); 
} 

2) definiert eine Implementierung dieser Schnittstelle in einer ConfigurationHelperSerivce Klasse (die selbst Dependency Injection wird mit der regulären Konfiguration zu erhalten Klasse):

public class ConfigurationHelperService : IConfigurationHelperService 
{ 
    public ConfigurationHelperService(IConfiguration configuration) 
    { 
     Configuration = configuration; 
    } 

    private IConfiguration Configuration { get; } 

    public string GetApiUrl() 
    { 
     return GetConfigurationValue(ApiUrl); 
    } 

    private string GetConfigurationValue(string key) 
    { 
     var value = Configuration[key]; 
     if (value.IsNullOrEmpty()) throw new KeyNotFoundException($"Configruation does not contain an instance of {key}"); 
     return value; 
    } 
} 

3) Registrierte den Dienst für die Injektion über ConfigureServices in Startup.cs:

4) Der richtige Namespace als Verwendungsanweisung in meine _ViewImports.cshtml Datei hinzugefügt.

5) verwendet, um das @inject Stichwort es in der _Layout.cshtml Datei verwenden zu definieren.

@inject IConfigurationHelperService ConfigHelper 
<!DOCTYPE html> 
<html> 
... 
@ConfigHelper.GetApiUrl() 
... 
</html> 

Es funktionierte gut für mich, und ich kann viel mehr Einsatzmöglichkeiten für diese auf einfachere Seiten, auf denen die Definition Modelle zu viel Arbeit wäre sehen.