ASP.NET Core'da Tutturucu Etiketi Yardımcısı

  • Makale

Tarafından Peter Kellner ve Scott Addie

Bağlayıcı Etiketi Yardımcısı, yeni öznitelikler ekleyerek standart HTML tutturucu (<a ... ></a>) etiketini geliştirir. Kurala göre, öznitelik adları ön ekinde asp-bulunur. İşlenen tutturucu öğesinin href öznitelik değeri, özniteliklerin değerleri asp- tarafından belirlenir.

Etiket Yardımcıları'na genel bakış için, bkz. ASP.NET Core'da Etiket Yardımcıları.

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

SpeakerController bu belgedeki örneklerde kullanılır:

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

public class SpeakerController : Controller
{
    private List<Speaker> Speakers =
        new List<Speaker>
        {
            new Speaker {SpeakerId = 10},
            new Speaker {SpeakerId = 11},
            new Speaker {SpeakerId = 12}
        };

    [Route("Speaker/{id:int}")]
    public IActionResult Detail(int id) =>
        View(Speakers.FirstOrDefault(a => a.SpeakerId == id));

    [Route("/Speaker/Evaluations", 
           Name = "speakerevals")]
    public IActionResult Evaluations() => View();

    [Route("/Speaker/EvaluationsCurrent",
           Name = "speakerevalscurrent")]
    public IActionResult Evaluations(
        int speakerId,
        bool currentYear) => View();

    public IActionResult Index() => View(Speakers);
}

public class Speaker
{
    public int SpeakerId { get; set; }
}

Bağlayıcı Etiketi Yardımcısı öznitelikleri

asp-controller

asp-controller özniteliği, URL'yi oluşturmak için kullanılan denetleyiciyi atar. Aşağıdaki işaretleme tüm konuşmacıları listeler:

<a asp-controller="Speaker"
   asp-action="Index">All Speakers</a>

Oluşturulan HTML:

<a href="/Speaker">All Speakers</a>

asp-controller Öznitelik belirtilirse ve asp-action belirtilmezse, varsayılan asp-action değer şu anda yürütülmekte olan görünümle ilişkili denetleyici eylemidir. Önceki işaretlemeden atlanırsa ve Bağlayıcı Etiketi Yardımcısı Denetleyicinin Dizin görünümünde (/Home) kullanılırsaHomeasp-action, oluşturulan HTML şöyle olur:

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

asp-action

asp-action öznitelik değeri, oluşturulan href öznitelikte yer alan denetleyici eylem adını temsil eder. Aşağıdaki işaretleme, oluşturulan href öznitelik değerini konuşmacı değerlendirmeleri sayfasına ayarlar:

<a asp-controller="Speaker"
   asp-action="Evaluations">Speaker Evaluations</a>

Oluşturulan HTML:

<a href="/Speaker/Evaluations">Speaker Evaluations</a>

asp-controller Öznitelik belirtilmezse, geçerli görünümü yürüten görünümü çağıran varsayılan denetleyici kullanılır.

asp-action Öznitelik değeri ise IndexURL'ye hiçbir eylem eklenmez ve varsayılan Index eylemin çağrılması sağlanır. Belirtilen (veya varsayılan) eylem, içinde başvurulan denetleyicide asp-controllerbulunmalıdır.

asp-route-{value}

asp-route-{value} özniteliği joker yol ön ekini etkinleştirir. Yer tutucuyu {value} kaplayan tüm değerler olası bir yol parametresi olarak yorumlanır. Varsayılan yol bulunamazsa, bu yol ön eki oluşturulan href özniteliğin sonuna istek parametresi ve değeri olarak eklenir. Aksi takdirde, rota şablonunda değiştirilir.

Aşağıdaki denetleyici eylemini göz önünde bulundurun:

private List<Speaker> Speakers =
    new List<Speaker>
    {
        new Speaker {SpeakerId = 10},
        new Speaker {SpeakerId = 11},
        new Speaker {SpeakerId = 12}
    };

[Route("Speaker/{id:int}")]
public IActionResult Detail(int id) =>
    View(Speakers.FirstOrDefault(a => a.SpeakerId == id));

Startup.Configure içinde tanımlanan varsayılan yol şablonuyla:

app.UseMvc(routes =>
{
    // need route and attribute on controller: [Area("Blogs")]
    routes.MapRoute(name: "mvcAreaRoute",
                    template: "{area:exists}/{controller=Home}/{action=Index}");

    // default route for non-areas
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

MVC görünümü, eylem tarafından sağlanan modeli aşağıdaki gibi kullanır:

@model Speaker
<!DOCTYPE html>
<html>
<body>
    <a asp-controller="Speaker"
       asp-action="Detail" 
       asp-route-id="@Model.SpeakerId">SpeakerId: @Model.SpeakerId</a>
</body>
</html>

Varsayılan yolun {id?} yer tutucusu eşleştirildi. Oluşturulan HTML:

<a href="/Speaker/Detail/12">SpeakerId: 12</a>

Yol ön ekinin, aşağıdaki MVC görünümünde olduğu gibi eşleşen yönlendirme şablonunun parçası olmadığını varsayalım:

@model Speaker
<!DOCTYPE html>
<html>
<body>
    <a asp-controller="Speaker"
       asp-action="Detail"
       asp-route-speakerid="@Model.SpeakerId">SpeakerId: @Model.SpeakerId</a>
<body>
</html>

Eşleşen yolda bulunamadığından speakerid aşağıdaki HTML oluşturulur:

<a href="/Speaker/Detail?speakerid=12">SpeakerId: 12</a>

asp-controller Belirtilmemiş veya asp-action belirtilmemişse, özniteliğindekiyle aynı varsayılan işleme izlenirasp-route.

asp-route

asp-route özniteliği, doğrudan adlandırılmış bir yola bağlanan bir URL oluşturmak için kullanılır. Yönlendirme öznitelikleri kullanılarak, bir yol içinde SpeakerController gösterildiği gibi adlandırılabilir ve eyleminde Evaluations kullanılabilir:

[Route("/Speaker/Evaluations", 
       Name = "speakerevals")]

Aşağıdaki işaretlemede asp-route özniteliği adlandırılmış yola başvurur:

<a asp-route="speakerevals">Speaker Evaluations</a>

Bağlayıcı Etiketi Yardımcısı, URL /Konuşmacı/Değerlendirmeler'i kullanarak doğrudan bu denetleyici eylemine bir yol oluşturur. Oluşturulan HTML:

<a href="/Speaker/Evaluations">Speaker Evaluations</a>

veya asp-action ek asp-routeolarak belirtilirseasp-controller, oluşturulan yol beklediğiniz gibi olmayabilir. Yol çakışmasını asp-route önlemek için ve asp-action öznitelikleriyle asp-controller kullanılmamalıdır.

asp-all-route-data

asp-all-route-data özniteliği, anahtar-değer çiftleri sözlüğü oluşturmayı destekler. Anahtar parametre adıdır ve değer parametre değeridir.

Aşağıdaki örnekte, bir sözlük başlatılır ve bir Razor görünüme geçirilir. Alternatif olarak, veriler modelinizle birlikte geçirilebilir.

@{
var parms = new Dictionary<string, string>
            {
                { "speakerId", "11" },
                { "currentYear", "true" }
            };
}

<a asp-route="speakerevalscurrent"
   asp-all-route-data="parms">Speaker Evaluations</a>

Yukarıdaki kod aşağıdaki HTML'yi oluşturur:

<a href="/Speaker/EvaluationsCurrent?speakerId=11&currentYear=true">Speaker Evaluations</a>

asp-all-route-data Sözlük, aşırı yüklenmiş Evaluations eylemin gereksinimlerini karşılayan bir sorgu dizesi oluşturmak için düzleştirilmiştir:

public IActionResult Evaluations() => View();

[Route("/Speaker/EvaluationsCurrent",
       Name = "speakerevalscurrent")]
public IActionResult Evaluations(

Sözlükteki anahtarlardan herhangi biri yol parametreleriyle eşleşiyorsa, bu değerler rotada uygun şekilde değiştirilir. Diğer eşleşmeyen değerler istek parametreleri olarak oluşturulur.

asp-fragment

asp-fragment özniteliği, URL'ye eklenecek bir URL parçası tanımlar. Tutturucu Etiketi Yardımcısı karma karakteri (#) ekler. Aşağıdaki işaretlemeyi göz önünde bulundurun:

<a asp-controller="Speaker"
   asp-action="Evaluations"
   asp-fragment="SpeakerEvaluations">Speaker Evaluations</a>

Oluşturulan HTML:

<a href="/Speaker/Evaluations#SpeakerEvaluations">Speaker Evaluations</a>

Karma etiketler, istemci tarafı uygulamaları oluştururken kullanışlıdır. Örneğin, JavaScript'te kolay işaretleme ve arama için kullanılabilirler.

asp-area

asp-area özniteliği, uygun yolu ayarlamak için kullanılan alan adını ayarlar. Aşağıdaki örneklerde özniteliğin yolları yeniden asp-area eşlemeye nasıl neden olduğu gösterilir.

Sayfalarda Razor Kullanım

Razor Sayfa alanları ASP.NET Core 2.1 veya sonraki sürümlerde desteklenir.

Aşağıdaki dizin hiyerarşisini göz önünde bulundurun:

  • {Proje adı}
    • Wwwroot
    • Alanlar
      • Oturumlar
        • Sayfalar
          • _ViewStart.cshtml
          • Index.cshtml
          • Index.cshtml.cs
    • Sayfalar

Oturumlar alanı DizinRazor Sayfasına başvurmak için işaretleme şu şekildedir:

<a asp-area="Sessions"
   asp-page="/Index">View Sessions</a>

Oluşturulan HTML:

<a href="/Sessions">View Sessions</a>

Bahşiş

Sayfalar uygulamasındaki Razor alanları desteklemek için içinde aşağıdakilerden Startup.ConfigureServicesbirini yapın:

MVC'de kullanım

Aşağıdaki dizin hiyerarşisini göz önünde bulundurun:

  • {Proje adı}
    • Wwwroot
    • Alanlar
      • Bloglar
        • Denetleyiciler
          • HomeController.cs
        • Görünümler
          • Home
            • AboutBlog.cshtml
            • Index.cshtml
          • _ViewStart.cshtml
    • Denetleyiciler

"Bloglar" ayarıasp-area, Areas/Blogs dizinine bu tutturucu etiketi için ilişkili denetleyicilerin ve görünümlerin yollarına ön ek ekler. AboutBlog görünümüne başvurmak için işaretleme:

<a asp-area="Blogs"
   asp-controller="Home"
   asp-action="AboutBlog">About Blog</a>

Oluşturulan HTML:

<a href="/Blogs/Home/AboutBlog">About Blog</a>

Bahşiş

MVC uygulamasındaki alanları desteklemek için yol şablonunun varsa alana bir başvuru içermesi gerekir. Bu şablon Startup.Configure içindeki yöntem çağrısının routes.MapRouteikinci parametresiyle temsil edilir:

app.UseMvc(routes =>
{
    // need route and attribute on controller: [Area("Blogs")]
    routes.MapRoute(name: "mvcAreaRoute",
                    template: "{area:exists}/{controller=Home}/{action=Index}");

    // default route for non-areas
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

asp-protocol

asp-protocol özniteliği, URL'nizde bir protokol (örneğinhttps) belirtmek içindir. Örnek:

<a asp-protocol="https"
   asp-controller="Home"
   asp-action="About">About</a>

Oluşturulan HTML:

<a href="https://localhost/Home/About">About</a>

Örnekteki ana bilgisayar adı localhost'tır. Tutturucu Etiketi Yardımcısı, URL'yi oluştururken web sitesinin genel etki alanını kullanır.

asp-host

asp-host özniteliği, URL'nizde bir konak adı belirtmek içindir. Örnek:

<a asp-protocol="https"
   asp-host="microsoft.com"
   asp-controller="Home"
   asp-action="About">About</a>

Oluşturulan HTML:

<a href="https://microsoft.com/Home/About">About</a>

asp-page

asp-page özniteliği Pages ile birlikte Razor kullanılır. Bağlayıcı etiketinin href öznitelik değerini belirli bir sayfaya ayarlamak için bunu kullanın. Ile sayfa adının ön ekini / oluşturmak, uygulamanın kökünden eşleşen bir sayfanın URL'sini oluşturur:

Örnek kodla, aşağıdaki işaretleme katılımcı Razor sayfasına bir bağlantı oluşturur:

<a asp-page="/Attendee">All Attendees</a>

Oluşturulan HTML:

<a href="/Attendee">All Attendees</a>

asp-page özniteliği , asp-controllerve asp-action öznitelikleriyle asp-routebirbirini dışlar. Ancak, asp-page aşağıdaki işaretlemenin gösterdiği gibi yönlendirmeyi denetlemek için ile asp-route-{value} birlikte kullanılabilir:

<a asp-page="/Attendee"
   asp-route-attendeeid="10">View Attendee</a>

Oluşturulan HTML:

<a href="/Attendee?attendeeid=10">View Attendee</a>

Başvuruda bulunulmuş sayfa yoksa, istekten alınan bir ortam değeri kullanılarak geçerli sayfaya bir bağlantı oluşturulur. Hata ayıklama günlüğü düzeyi dışında hiçbir uyarı belirtilmemiştir.

asp-page-handler

asp-page-handler özniteliği Pages ile birlikte Razor kullanılır. Belirli sayfa işleyicilerine bağlanmaya yöneliktir.

Aşağıdaki sayfa işleyicisini göz önünde bulundurun:

public void OnGetProfile(int attendeeId)
{
    ViewData["AttendeeId"] = attendeeId;

    // code omitted for brevity
}

Sayfa modelinin ilişkili işaretlemesi, sayfa işleyicisine OnGetProfile bağlanır. On<Verb> Sayfa işleyicisi yöntemi adının ön ekinin öznitelik değerinde atlandığından asp-page-handler emin olun. Yöntem zaman uyumsuz olduğunda, Async sonek de atlanır.

<a asp-page="/Attendee"
   asp-page-handler="Profile"
   asp-route-attendeeid="12">Attendee Profile</a>

Oluşturulan HTML:

<a href="/Attendee?attendeeid=12&handler=Profile">Attendee Profile</a>

Ek kaynaklar