.ネットチームのお気に入りの剃刀機能

35997 ワード
csharp dotnet webdev テキストリンク
かみそりは埋め込みのためのマークアップ構文です.WebページへのNETベースのコード.これは、剃刀のマークアップ、Cの経度、およびHTMLが含まれます.かみそりを含むファイルは一般的に.ファイルの拡張子.剃刀は、剃刀コンポーネントファイル(. razor)でも見つかります.
剃刀はあなたのマークアップに集中するので、軽量で控えめに設計されています.しかし、本当に便利な機能がたくさん隠されている!私は何人かの友人に聞いた.彼らのお気に入りの剃刀の機能のいくつかのためのネットチームは、ここで彼らが言っていたものです.

キャッシュタグヘルパー
閉じるこの動画はお気に入りから削除されています.それはとても簡単です!
@page 
@model ArchivesModel

<cache expires-after="@TimeSpan.FromHours(4)">
    @foreach (var show in Model.Shows)
    {
     <a href="@show.AsAwesomeUrl()" class="showCard">
      <img data-src="@("https://images.hanselminutes.com/podcast/shows/" 
        + show.Number + ".jpg")"
        loading="lazy" class="lazyload" 
        src="/images/grey.gif" width="212" height="212" 
        alt="@show.Title" />
      <span class="shownumber">@show.Number</span>
      <div class="overlay title">
       <!-- cant add padding to the wrapping div or the layout gets 
        messed up, title will be wrapped in a p tag
       which will have the padding added to it -->
       <p class="overlay-text">@show.Title</p>
      </div>
     </a>
    }
</cache>
Docs: Cache taghelper

陰的なかみそり式はasync -
これはあなたのCSHTMLから直接Cの当たり前のコードを呼び出すことができますコアレイザー機能です!
<p>@await DoSomethingAsync("Hello", "from", "async")</p>
Docs: Implicit Razor expressions

カスタムタグヘルパー
タグヘルパーは、サーバー側のコードを作成して、Mozorファイル内のHTML要素をレンダリングに参加できます.組み込みのものがたくさんありますが、とても簡単に書くこともできます.
以下に例を示しますasp-if 指定した述語がfalseに等しい場合、要素の出力を抑制するタグヘルパー.
[HtmlTargetElement("*", Attributes = "asp-if")]
public class IfTagHelper : TagHelper
{
    /// <summary>
    /// The predicate expression to test.
    /// </summary>
    [HtmlAttributeName("asp-if")]
    public bool Predicate { get; set; }

    public override void Process(TagHelperContext context, 
        TagHelperOutput output)
    {
        if (!Predicate)
        {
            output.SuppressOutput();
        }
    }
}
以下のようにします.
<div asp-if="(DateTime.UtcNow.Minute % 2) == 0">
  This paragraph will only render during <strong>even</strong> minutes.
</div>
<div asp-if="(DateTime.UtcNow.Minute % 2) == 1">
  This paragraph will only render during <strong>odd</strong> minutes.
</div>
私は、多くのサンプルタグヘルパーをこれに書きましたTagHelper Pack Samples リポジトリ.

DamianEdwards / TagHelperPack
ASP . NET用のタグ付きヘルパーのセットです.ネットコア
taghelperpack
ASP . NET用のタグ付きヘルパーのセットです.NETコア(すべてのバージョン).
含まれたタグヘルパーと例
例ページを参照くださいhttps://taghelperpack.net
サポートASP .NETコア2.1X , 2.2 .X , 3.0 .X、3.1.X
インストール
  • パッケージにCMD行からリファレンスを追加します.
    MyGreatProject> dotnet add package TagHelperPack
  • 復元
    MyGreatProject> dotnet restore
  • あなたのアプリケーションのタグヘルパーを登録します_ViewImports.cshtml ファイル
    @addTagHelper *, TagHelperPack
    • View on GitHub

    テンプレートコンポーネント
    何かで.razor ファイルは芸術作品だ😍
    テンプレートコンポーネントは非常に便利です.これらは、1つ以上のUIテンプレートをパラメータとして受け入れるコンポーネントです.このコンポーネントは、コンポーネントのレンダリングロジックの一部として使用できます.テンプレートコンポーネントを使用すると、以前に可能であったよりも再利用可能な上位レベルのコンポーネントを作成できます.たとえば、リストビューのコンポーネントは、ユーザーがリスト内の項目をレンディングするためのテンプレートを指定することができます、またはグリッドコンポーネントは、ユーザーがグリッドヘッダーと各行のテンプレートを指定することができます.
    <h1>Pets</h1>

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}
    Docs: Templated components

    ViewComponentTaghelpers -
    ViewComponentを作成し、コンテンツ、ビュー、またはその他の複雑なロジックを返します.
    using Microsoft.AspNetCore.Mvc;

namespace WebApplication3000
{
   public class Foo: ViewComponent
   {
       public IViewComponentResult Invoke()
       {
           return Content("Hello, World!");
       }
   }   
}
    その後、即座にあなたのビューで利用できるTaghelpersに変換されます.
    @addTagHelper *, WebApplication3000

<vc:foo />
    Docs: View Components

    インジェクト@inject is 🔥🔥🔥! 私は、私がそれをすることができるのが好きです-それは、ものすごいHawtShoesものすごいです.
    以下に例を示します:
    @using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@{
   string myValue = Configuration["root:parent:child"];
   ...
}
    サービスを注入することもできます.
    @using System.Threading.Tasks
@using ViewInjectSample.Model
@using ViewInjectSample.Model.Services
@model IEnumerable<ToDoItem>
@inject StatisticsService StatsService
<!DOCTYPE html>
<html>
<head>
    <title>To Do Items</title>
</head>
<body>
    <div>
        <h1>To Do Items</h1>
        <ul>
            <li>Total Items: @StatsService.GetCount()</li>
            <li>Completed: @StatsService.GetCompletedCount()</li>
            <li>Avg. Priority: @StatsService.GetAveragePriority()</li>
        </ul>
        <table>
            <tr>
                <th>Name</th>
                <th>Priority</th>
                <th>Is Done?</th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Name</td>
                    <td>@item.Priority</td>
                    <td>@item.IsDone</td>
                </tr>
            }
        </table>
    </div>
</body>
</html>
    Docs: Dependency injection into views in ASP.NET Core

    クラスライブラリ
    私は剃刀コンポーネントライブラリが好きです.ちょっと書いてください.かみそりファイルと参照できるコンポーネントです.私はこれらをたくさん使ったBlazorWebFormsComponents プロジェクトは、.Blaveフォームをプロジェクトに適用します.
    例を挙げるLabel コンポーネントLabel.razor :
    @inherits BaseWebFormsComponent

@if (Visible)
{
    <span id="@ID">@Text</span>
}
    論理はLabel.razor.cs :
    using BlazorWebFormsComponents.Interfaces;
using Microsoft.AspNetCore.Components;

namespace BlazorWebFormsComponents
{
    public partial class Label : BaseWebFormsComponent, ITextComponent
    {
        [Parameter]
        public string Text { get; set; }
    }
}

    FritzAndFriends / BlazorWebFormsComponents
    ASPをエミュレートするブレザーコンポーネントのコレクションです.同じ名前のNet Webフォームコントロール
    コンポーネント
    同じ名前のWebフォームコンポーネントをエミュレートするブレザーコンポーネントのコレクション


    Live Samples running on Azure
    アプローチ＋考慮
    私たちは、よく維持されて、価値を提供しているウェブフォームアプリケーションが最小限の変更で新しいユーザーインターフェースフレームワークへの経路を持つべきであると信じています.これは、アプリケーションに変換されていませんまた、魔法のようにASPで動作するようにプロジェクトに適用することができますパッチです.ネットコア.このリポジトリには、あなたのマークアップの多くを再利用することができるライブラリと一連の戦略があります.
    これは誰もが、誰もがアプリケーションを移行する必要はありません.彼らは非常に長い時間(この執筆の時点で2029 EOL)と移行のために考慮されるアプリケーションのためのWebフォームとしてサポートされ続けることができます.
    View on GitHub

    すべてを使用します.ネット機能
    ここでは本当に便利な剃刀のスニペットです.これは私が剃刀の構文について愛していることの一つです、私は私の既存のCの言葉を使用するようになるだけでなく、私は生産的な開発者を作るすべての言語機能を使用することができます.
    @using static System.Runtime.InteropServices.RuntimeInformation

<div class="built-with">
    @FrameworkDescription
</div>
    あなたの目はあなたをだますことはありませんusing static 宣言-すべての静的メンバーのSystem.Runtime.InteropServices.RuntimeInformation 型は修飾子なしで利用可能です.私はシームレスにリッチなコンテンツを作成する強力なテンプレートエンジンを使用して、HTMLとCを一緒に噛み合わせることができます.これは簡単な例ですが、もっとたくさんあります.あなたはあなたの想像力とHTMLとCの残余の意味を囲む構成によって制限されています.これがHTMLとしてレンダリングされると、あなたは<div> を含む要素.NET Frameworkの説明.私は、私のランタイム版を見るのが好きです.ネットアプリ💜.
    結果のHTML :
    <div class="built-with"> 
.NET 6.0.0-preview.7.21377.19
</div>

    明示的移行
    ほとんどの場合では、かみそりは、あなたがそれについて考える必要がないことなしで、C - CountとHTMLの間で暗黙のうちに変わります.時にはブロックをCの行のHTMLテキストインラインとして明示的に呼び出すことが便利です.明示的な移行を行うことができます.たとえば、CのCacheコードブロック内からJavaScriptまたはCSSを出力している場合に便利です.
    あなたは<text></text> ブロックを区切るためのタグ構造@: 一つの行に対して.
    <script>
@for(int i = 0; i < 10; i++) 
{
    @:console.log(@i);
}
</script>
    これは以下のようになります.
    <script>
    console.log(0);
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    console.log(5);
    console.log(6);
    console.log(7);
    console.log(8);
    console.log(9);
</script>
    これは、次のようにして、サーバー上に設定されたデータをグラフに描画するのに便利です.
    @section Scripts {
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
    window.onload = function () {
        var dataPoints = [];
        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            data: [
                {

                    dataPoints: dataPoints
                }
            ]
        });
        @{Random rand = new Random();}
        @for(int i = 0; i < 10; i++)
        {
            @:dataPoints.push({ x: @i, y: @rand.Next(0, 100) });
        }

        chart.render();
    };
</script>
}
    Docs: Dependency injection into views in ASP.NET Core

    カミソリとかみそりページについて詳しく知る
    カミソリやかみそりページについての詳細を知りたいですか?この2時間のイントロをチェックしてください:.

    あなたはどうですか.
    あなたが共有したいお気に入りのかみそり機能を得たか.コメントにドロップ!
    中間クラス-コンストラクション関数
    Pythonスクリプトは1日以上のファイルを削除するには、空のサブディレクトリを再帰的に削除し、レコードのログファイルを作成します!