ASP.NET Core'da bileşenleri görüntüleme

Gönderen Rick Anderson

Örnek kodu görüntüleme veya indirme ( nasılindir)

Görünüm bileşenleri

Görünüm bileşenleri kısmi görünümlere benzer, ancak çok daha güçlüdür. Görünüm bileşenleri model bağlaması kullanmaz ve yalnızca çağrılırken sağlanan verilere bağlıdır. Bu makale denetleyiciler ve görünümler kullanılarak yazılmıştır, ancak görünüm bileşenleri de Sayfalar ile Razor çalışır.

Görünüm bileşeni:

• Tam yanıt yerine öbek işler.
• Denetleyici ve görünüm arasında bulunan aynı endişe ayrımı ve testlanabilirlik avantajlarını içerir.
• Parametrelere ve iş mantığına sahip olabilir.
• Genellikle bir düzen sayfasından çağrılır.

Görünüm bileşenleri, kısmi görünüm için çok karmaşık olan yeniden kullanılabilir işleme mantığının olduğu her yerde tasarlanmıştır, örneğin:

• Dinamik gezinti menüleri
• Etiket bulutu (veritabanını sorgulanın yeri)
• Oturum açma paneli
• Alışveriş sepeti
• Son yayımlanan makaleler
• Tipik bir blogda kenar çubuğu içeriği
• Kullanıcının oturum açma durumuna bağlı olarak her sayfada işlenecek ve oturumun veya oturum açmanın bağlantılarını gösterecek bir oturum açma paneli

Görünüm bileşeni iki bölümden oluşur: sınıfı (genellikle ViewComponent'tantüretilen) ve döndüren sonuç (genellikle bir görünüm). Denetleyiciler gibi görünüm bileşeni de POCO olabilir, ancak geliştiricilerin çoğu, 'den türetilen yöntemlerden ve özelliklerden yararlanmak ViewComponent ister.

Görünüm bileşenlerinin bir uygulamanın belirtimlerini karşılarsa, bunun yerine bileşenleri Razor kullanmayı göz önünde bulundurabilirsiniz. Razor bileşenleri, yeniden kullanılabilir UI birimleri üretmek için işaretlemeyi C# koduyla da birleştirir. Razor bileşenleri, istemci tarafı kullanıcı arabirimi mantığı ve bileşimi sağlarken geliştirici üretkenliği için tasarlanmıştır. Daha fazla bilgi için bkz. RazorASP.NET Core Bileşen. Bileşenleri bir MVC veya Razor Sayfalar uygulamasına ekleme hakkında bilgi Razor için bkz. ASP.NET Core bileşenlerini önceden ASP.NET Core Razor ve tümleştirin .

Görünüm bileşeni oluşturma

Bu bölüm, bir görünüm bileşeni oluşturmak için üst düzey gereksinimleri içerir. Makalenin devamlarında, her adımı ayrıntılı olarak inceleyeceğiz ve bir görünüm bileşeni oluşturacağız.

Görünüm bileşeni sınıfı

Görünüm bileşeni sınıfı, aşağıdakilerin herhangi biri tarafından oluşturulabilir:

• ViewComponent'tan Türetme
• Bir sınıfı özniteliğiyle [ViewComponent] dekore etmek veya özniteliğiyle bir sınıftan türetme [ViewComponent]
• Adın ViewComponent son ekine sahip olduğu bir sınıf oluşturma

Denetleyiciler gibi görünüm bileşenlerinin de genel, iç içe ve soyut olmayan sınıflar olması gerekir. Görünüm bileşeni adı, "ViewComponent" son ekinin kaldırıldığı sınıf adıdır. Ayrıca özelliği kullanılarak açıkça ViewComponentAttribute.Name belirtilebilir.

Görünüm bileşeni sınıfı:

• Oluşturucu bağımlılık eklemeyi tam olarak destekler

• Denetleyici yaşam döngüsünde yer almaz, yani bir görünüm bileşeninde filtreleri kullanasınız

Bileşen yöntemlerini görüntüleme

Görünüm bileşeni, mantığını, döndüren zaman uyumlu bir yöntemde veya InvokeAsync Task<IViewComponentResult> döndüren Invoke bir yöntemde IViewComponentResult tanımlar. Parametreler, model bağlamadan değil, görünüm bileşeninin çağrılarak doğrudan gelir. Görünüm bileşeni hiçbir zaman bir isteği doğrudan işlemez. Genellikle, bir görünüm bileşeni bir modeli başlatıyor ve yöntemini çağırarak bir görünüme View iletir. Özetle, bileşen yöntemlerini görüntüleme:

• veya InvokeAsync döndüren zaman Task<IViewComponentResult> uyumlu bir yöntem Invoke döndüren bir yöntem IViewComponentResult tanımlayın.
• Genellikle bir modeli başlatılır ve yöntemini çağırarak bir görünüme ViewComponent View iletir.
• Parametreler HTTP'den değil çağıran yöntemden gelir. Model bağlaması yoktur.
• Http uç noktası olarak doğrudan ulaşılamaz. Bunlar kodunuzdan çağrılır (genellikle bir görünümde). Görünüm bileşeni hiçbir zaman bir isteği işlemez.
• Geçerli HTTP isteğinin ayrıntıları yerine imzada aşırı yüklenmiştir.

Arama yolunu görüntüleme

Çalışma zamanı aşağıdaki yollarda görünümü arar:

• /Views/{Controller Name}/Components/{View Component Name}/{View Name}
• /Views/Shared/Components/{View Component Name}/{View Name}
• /Pages/Shared/Components/{View Component Name}/{View Name}

Arama yolu, denetleyiciler + görünümler ve Sayfalar kullanan projeler için Razor geçerlidir.

Bir görünüm bileşeninin varsayılan görünüm adı Varsayılan'dır. Bu, görünüm dosyanız genellikle Default.cshtml olarak adlandırılmıştır. Görünüm bileşeni sonucu oluştururken veya yöntemini çağırarak farklı bir görünüm adı View belirtebilirsiniz.

Görünüm dosyasına Default.cshtml adını ve Views/Shared/Components/{View Component Name}/{View Name} yolunu kullanmanız önerilir. Bu örnekte kullanılan görünüm bileşeni, görünüm bileşeni görünümü için PriorityList Views/Shared/Components/PriorityList/Default.cshtml kullanır.

Görünüm arama yolunu özelleştirme

Görünüm arama yolunu özelleştirmek için koleksiyonunu Razor ViewLocationFormats değiştirebilirsiniz. Örneğin, "/Components/{View Component Name}/{View Name}" yolunda görünümleri aramak için koleksiyona yeni bir öğe ekleyin:

services.AddMvc()
    .AddRazorOptions(options =>
    {
        options.ViewLocationFormats.Add("/{0}.cshtml");
    })
    .SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

Yukarıdaki kodda yer tutucusu " {0} " "Components/{View Component Name}/{View Name}" yolunu temsil eder.

Görünüm bileşeninin iptali

Görünüm bileşenini kullanmak için bir görünümün içinde aşağıdaki çağrıyı yapın:

@await Component.InvokeAsync("Name of view component", {Anonymous Type Containing Parameters})

Parametreler yöntemine geçir InvokeAsync geçiri. Makalede PriorityList geliştirilen görünüm bileşeni Views/ToDo/Index.cshtml görünüm dosyasından çağrılır. Aşağıda yöntemi iki InvokeAsync parametreyle çağrılır:

@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

<vc:priority-list max-priority="2" is-done="false">
</vc:priority-list>

<vc:[view-component-name]
  parameter1="parameter1 value"
  parameter2="parameter2 value">
</vc:[view-component-name]>

@addTagHelper *, MyWebApp

@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

<vc:priority-list max-priority="2" is-done="false">
</vc:priority-list>

Görünüm bileşenini doğrudan denetleyiciden faturalama

Görünüm bileşenleri genellikle bir görünümden çağrılır, ancak bunları doğrudan bir denetleyici yönteminden çağırabilirsiniz. Görünüm bileşenleri denetleyiciler gibi uç noktaları tanımlamasa da, bir içeriğini döndüren bir denetleyici eylemlerini kolayca ViewComponentResult gerçekleştirebilirsiniz.

Bu örnekte, görünüm bileşeni doğrudan denetleyiciden çağrılır:

public IActionResult IndexVC()
{
    return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });
}

Adım adım kılavuz: Basit bir görünüm bileşeni oluşturma

başlangıçkodunu indirin, derleme ve test edin. ToDo öğelerinin listesini görüntüleyen ToDo denetleyiciye sahip basit bir projedir.

ViewComponent sınıfı ekleme

ViewComponents klasörü oluşturun ve aşağıdaki sınıfı PriorityListViewComponent ekleyin:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;

namespace ViewComponentSample.ViewComponents
{
    public class PriorityListViewComponent : ViewComponent
    {
        private readonly ToDoContext db;

        public PriorityListViewComponent(ToDoContext context)
        {
            db = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(
        int maxPriority, bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }
        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo.Where(x => x.IsDone == isDone &&
                                 x.Priority <= maxPriority).ToListAsync();
        }
    }
}

Kodla ilgili notlar:

• Görünüm bileşen sınıfları projedeki herhangi bir klasörde bulunabilir.

• PriorityList viewcomponent sınıf adı, son ek viewcomponent ile sona ertiğinden, çalışma zamanı bir görünümden sınıf bileşenine başvururken "prioritylist" dizesini kullanır. Daha sonra ayrıntılı olarak açıklayacağım.

• [ViewComponent]Özniteliği bir görünüm bileşenine başvurmak için kullanılan adı değiştirebilir. Örneğin, sınıfını adlandırdık XYZ ve özniteliği uygulamış olduğumuz ViewComponent :

  [ViewComponent(Name = "PriorityList")]
     public class XYZ : ViewComponent
  

• [ViewComponent]Yukarıdaki özniteliği görüntüle bileşen seçicisine PriorityList bileşenle ilişkili görünümleri ararken adı kullanmasını ve bir görünümden sınıf bileşenine başvururken "PriorityList" dizesini kullanmasını söyler. Daha sonra ayrıntılı olarak açıklayacağım.

• Bileşen, veri bağlamını kullanılabilir hale getirmek için bağımlılık ekleme işlemini kullanır.

• InvokeAsync bir görünümden çağrılabilen bir yöntemi gösterir ve rastgele sayıda bağımsız değişken alabilir.

• InvokeAsyncYöntemi ToDo ve parametrelerini karşılayan öğe kümesini döndürür isDone maxPriority .

Görünüm bileşeni görünümünü oluşturma Razor

• Görünümler/paylaşılan/bileşenler klasörünü oluşturun. Bu klasör, adlandırılmış Bileşenler olmalıdır .

• Görünümler/paylaşılan/bileşenler/PriorityList klasörünü oluşturun. Bu klasör adı, görünüm bileşen sınıfının adıyla ya da sınıfın adı eksi sonek ile eşleşmelidir (Bu kural izleniyorsa ve sınıf adında Viewcomponent sonekini kullandıysanız). ViewComponentÖzniteliğini kullandıysanız, sınıf adının öznitelik atamasını eşleşmesi gerekir.

• Bir Görünümler/paylaşılan/bileşenler/PriorityList/default. cshtml Razor görünümü oluşturun:

  @model IEnumerable<ViewComponentSample.Models.TodoItem>
  
  <h3>Priority Items</h3>
  <ul>
      @foreach (var todo in Model)
      {
          <li>@todo.Name</li>
      }
  </ul>
  

  RazorGörünüm bir listesini alır TodoItem ve görüntüler. Görünüm bileşeni yöntemi, InvokeAsync görünümün adını (örneğimizde olduğu gibi) geçirmezse, varsayılan olarak kurala göre görünüm adı için kullanılır. Öğreticide daha sonra görünümün adının nasıl geçirileceğini göstereceğiz. Belirli bir denetleyicinin varsayılan stilini geçersiz kılmak için denetleyiciye özgü görünüm klasörüne bir görünüm ekleyin (örneğin, Görünümler/Todo/Components/PriorityList/default. cshtml).

  Görünüm bileşeni denetleyiciye özgü ise, denetleyiciyi denetleyiciye özgü klasöre ekleyebilirsiniz (Görünümler/Todo/bileşenler/PriorityList/default. cshtml).

• divPriority listesi bileşenine, Görünümler/Todo/index. cshtml dosyasının altına bir çağrı içeren bir çağrı ekleyin:

  </table>
  <div>
      @await Component.InvokeAsync("PriorityList", new { maxPriority = 2, isDone = false })
  </div>
  

Biçimlendirme, @await Component.InvokeAsync Görünüm bileşenlerini çağırma söz dizimini gösterir. İlk bağımsız değişken, çağırmak veya çağırmak istediğimiz bileşenin adıdır. Sonraki parametreler bileşene geçirilir. InvokeAsync rastgele sayıda bağımsız değişken alabilir.

Uygulamayı test etme. Aşağıdaki görüntüde ToDo listesi ve öncelik öğeleri gösterilmektedir:

Görünüm bileşenini doğrudan denetleyiciden de çağırabilirsiniz:

public IActionResult IndexVC()
{
    return ViewComponent("PriorityList", new { maxPriority = 3, isDone = false });
}

Bir görünüm adı belirtme

Karmaşık bir görünüm bileşeninin bazı koşullarda varsayılan olmayan bir görünüm belirtmesi gerekebilir. Aşağıdaki kod, yönteminden "PVC" görünümünün nasıl ekleneceğini gösterir InvokeAsync . InvokeAsyncSınıfında yöntemi güncelleştirin PriorityListViewComponent .

public async Task<IViewComponentResult> InvokeAsync(
    int maxPriority, bool isDone)
{
    string MyView = "Default";
    // If asking for all completed tasks, render with the "PVC" view.
    if (maxPriority > 3 && isDone == true)
    {
        MyView = "PVC";
    }
    var items = await GetItemsAsync(maxPriority, isDone);
    return View(MyView, items);
}

Görünümleri/paylaşılan/bileşenler/prioritylist/default. cshtml dosyasını views/Shared/Components/PRIORITYLIST/PVC. cshtml adlı bir görünüme kopyalayın. PVC görünümünün kullanıldığını belirtmek için bir başlık ekleyin.

@model IEnumerable<ViewComponentSample.Models.TodoItem>

<h2> PVC Named Priority Component View</h2>
<h4>@ViewBag.PriorityMessage</h4>
<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Name</li>
    }
</ul>

Güncelleştirme görünümleri/Todo/Index. cshtml:

@await Component.InvokeAsync("PriorityList", new { maxPriority = 4, isDone = true })

Uygulamayı çalıştırın ve PVC görünümünü doğrulayın.

PVC görünümü işlenmemişse, görünüm bileşenini 4 veya daha yüksek bir önceliğe sahip olduğunuzu doğrulayın.

Görünüm yolunu inceleyin

• Öncelik görünümü döndürülmemesi için öncelik parametresini üç veya daha az olacak şekilde değiştirin.

• Views/Todo/Components/PriorityList/default. cshtml 'Yi 1default. cshtml olarak geçici olarak yeniden adlandırın.

• Uygulamayı test edin, şu hatayı alırsınız:

  An unhandled exception occurred while processing the request.
  InvalidOperationException: The view 'Components/PriorityList/Default' wasn't found. The following locations were searched:
  /Views/ToDo/Components/PriorityList/Default.cshtml
  /Views/Shared/Components/PriorityList/Default.cshtml
  EnsureSuccessful
  

• Görünümleri/ Todo/bileşenler/PriorityList/1Default. cshtml 'yi views/Shared/Components/Prioritylist/default. cshtml olarak kopyalayın.

• Görünümün paylaşılan klasörden olduğunu göstermek için paylaşılan Todo görünümü bileşen görünümüne bir biçimlendirme ekleyin.

• Paylaşılan bileşen görünümünü test edin.

Sabit kodlanmış dizelerin önleme

Derleme zamanı güvenliğini istiyorsanız, sabit kodlanmış görünüm bileşeni adını sınıf adıyla değiştirebilirsiniz. "ViewComponent" soneki olmadan görünüm bileşenini oluşturun:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using ViewComponentSample.Models;

namespace ViewComponentSample.ViewComponents
{
    public class PriorityList : ViewComponent
    {
        private readonly ToDoContext db;

        public PriorityList(ToDoContext context)
        {
            db = context;
        }

        public async Task<IViewComponentResult> InvokeAsync(
        int maxPriority, bool isDone)
        {
            var items = await GetItemsAsync(maxPriority, isDone);
            return View(items);
        }
        private Task<List<TodoItem>> GetItemsAsync(int maxPriority, bool isDone)
        {
            return db.ToDo.Where(x => x.IsDone == isDone &&
                                 x.Priority <= maxPriority).ToListAsync();
        }
    }
}

usingGörünüm dosyanıza bir ifade ekleyin Razor ve nameof işlecini kullanın:

@using ViewComponentSample.Models
@using ViewComponentSample.ViewComponents
@model IEnumerable<TodoItem>

    <h2>ToDo nameof</h2>
    <!-- Markup removed for brevity.  -->

    <div>

        @*
            Note: 
            To use the below line, you need to #define no_suffix in ViewComponents/PriorityList.cs or it won't compile.
            By doing so it will cause a problem to index as there will be multiple viewcomponents 
            with the same name after the compiler removes the suffix "ViewComponent"
        *@

        @*@await Component.InvokeAsync(nameof(PriorityList), new { maxPriority = 4, isDone = true })*@
    </div>

Component.InvokeAsyncClr türü alan bir yöntem aşırı yüklemesi kullanabilirsiniz. typeofİşleci bu durumda kullanmayı unutmayın:

@using ViewComponentSample.Models
@using ViewComponentSample.ViewComponents
@model IEnumerable<TodoItem>

<h2>ToDo typeof</h2>
<!-- Markup removed for brevity.  -->

<div>
    @await Component.InvokeAsync(typeof(PriorityListViewComponent), new { maxPriority = 4, isDone = true })
</div>

Zaman uyumlu iş gerçekleştirin

InvokeZaman uyumsuz iş yapmanız gerekmiyorsa çerçeve zaman uyumlu bir yöntem çağırma işlemini gerçekleştirir. Aşağıdaki yöntem, zaman uyumlu bir Invoke Görünüm bileşeni oluşturur:

public class PriorityList : ViewComponent
{
    public IViewComponentResult Invoke(int maxPriority, bool isDone)
    {
        var items = new List<string> { $"maxPriority: {maxPriority}", $"isDone: {isDone}" };
        return View(items);
    }
}

Görünüm bileşeni Razor dosyası yöntemine geçirilen dizeleri listeler Invoke (Görünümler/ Home /Components/prioritylist/default.exe):

@model List<string>

<h3>Priority Items</h3>
<ul>
    @foreach (var item in Model)
    {
        <li>@item</li>
    }
</ul>

@await Component.InvokeAsync(nameof(PriorityList), new { maxPriority = 4, isDone = true })

@addTagHelper *, MyWebApp

<vc:priority-list max-priority="999" is-done="false">
</vc:priority-list>

Yöntemi imzası PriorityList.Invoke zaman uyumludur, ancak Razor biçimlendirme dosyasında metodunu bulur ve çağırır Component.InvokeAsync .

Tüm görünüm bileşeni parametreleri gereklidir

Bir görünüm bileşenindeki her bir parametre gerekli bir özniteliktir. bu GitHub sorunabakın. Herhangi bir parametre atlanırsa:

• InvokeAsyncYöntem imzası eşleşmez, bu nedenle Yöntem yürütülmez.
• ViewComponent hiçbir biçimlendirmeyi işlemez.
• Hata oluşturulmayacak.

Ek kaynaklar

• Görünümlere bağımlılık ekleme