Razor, .NET Core ve .NET Framework ile dinamik web sayfaları oluşturmak için kullanılan bir sunucu tarafı işaretleme dilidir. Öncelikli olarak ASP.NET Core ile birlikte kullanılır. Razor Sayfaları, kodun uygulamalar içinde temiz ve doğrudan organize edilmesine olanak tanıyan ASP.NET Core'un yeni bir yönüdür ve kod tekrarının sorun olmasını azaltır. Razor, C# veya VB (Visual Basic) kullanılarak sunucu tarafında HTML ile entegre edilip web içerikleri oluşturur.

Bu eğitim, Visual Studio'da Razor ve C# kullanarak temel bir uygulamanın nasıl oluşturulacağı hakkında rehberlik edecektir. Başlayalım!

Gereksinimler

Razor'un dünyasına dalmadan önce, aşağıdaki kurulumların yüklü olduğundan emin olun:

.NET Core SDK 2. Visual Studio

Bunlar, bu kılavuz için kullanacağımız Razor Görünüm Motoru ve proje şablonlarını sağlar. Ayrıca, birden fazla işletim sistemi üzerinde çalışabilirler, yani Windows, Linux veya macOS üzerinde bulunup bulunmadığınızdan bağımsız olarak takip edebilirsiniz.

Adım 1 Yeni Bir Razor Sayfaları Projesi Oluşturma

Microsoft Visual Studio'yu açın ve şu adımları izleyin:

1. "File" (Dosya) üzerine tıklayın > "New" (Yeni) > "Project" (Proje).
2. Proje şablonu seçim ekranında, "Blazor Server App" (Blazor Sunucu Uygulaması) seçeneğini belirleyin.

3. Projenizi "IronPDFExample" olarak adlandırın ve "Create" (Oluştur) üzerine tıklayın.

4. Aşağı açılan menülerden ".NET 7.0" veya daha üstünü seçin.

Artık yeni bir Razor Sayfaları projeniz var.

Razor Sözdizimi ve Dosyalarını Anlama

Razor dosyaları, C# (bu nedenle 'cs') ve HTML birleştirilerek, .cshtml dosya uzantısını kullanır. Visual Basic kullansaydık, dosya uzantısı .vbhtml olarak değişirdi.

Çözüm Gezgini'nizde, 'Index.cshtml' adlı .cshtml uzantılı dosyayı bulun ve açın. Bu noktada, HTML kodu ve C# kodunun bir kombinasyonunu görürsünüz. Bu karışımı sağlayan Razor Çözücüsüdür.

Razor Söz Dizimi

ASP.NET Core'da Razor Sözdizimi, HTML ve sunucu tarafı kodun birleşimidir. Sunucu kodu, ya C# ya da VB kodudur. Razor kodu, @ sembolüyle belirtilir ve HTML istemciye gönderilmeden önce sunucuda çalıştırılır.

Basit Razor sözdiziminin bir örneği:

<p>The current time is @DateTime.Now</p>

<p>The current time is @DateTime.Now</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> The current time is @DateTime.Now</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> The current time is @DateTime.Now</p>

Bu kod örneğinde, @DateTime.Now bir Razor kodudur. Sunucuda çalıştırılır ve mevcut tarih ve saatle değiştirilir, müşteriye gönderilmeden önce.

Razor Görünümü

Razor'da 'görünüm' terimi, kullanıcılara bilgi sunmayı amaçlayan herhangi bir web sayfasına karşılık gelir. Razor Görünüm Motoru, kullanıcıya HTML sayfası sunumundan sorumludur.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

page model ReadOnly Property () As IndexModel
	ViewData("Title") = "Home page"
End Property

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div class="text-center"> <h1 class="display-4"> Welcome</h1> <p> Learn about <a href="https://docs.microsoft.com/aspnet/core"> building Web apps @with ASP.NET Core</a>.</p> </div>

page model ReadOnly Property () As IndexModel
	ViewData("Title") = "Home page"
End Property

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div class="text-center"> <h1 class="display-4"> Welcome</h1> <p> Learn about <a href="https://docs.microsoft.com/aspnet/core"> building Web apps @with ASP.NET Core</a>.</p> </div>

Dinamik İçerik İçin Razor İşaretleme Kullanımı

Razor İşaretleme, HTML işaretlemesi içinde sunucu tarafı kod eklememizi sağlar. Kod blokları, satır içi ifadeler ve HTML kodlanmış ifadeler gibi çeşitli kod yapıları kullanabiliriz.

Satır İçi İfade

Bir satır içi ifade, sonucu doğrudan HTML'e aşağıdaki kodu kullanarak çıkışı alır:

<p>Hello, my name is @Model.Name</p>

<p>Hello, my name is @Model.Name</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @Model.Name</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @Model.Name</p>

Burada, @Model.Name, Razor görünümüne geçen modelin Name özelliğinin değerini çıkarsayan bir satır içi ifadedir.

Kod Bloğu

Kod blokları, sunucu üzerinde çalıştırılan kod bölümleridir:

@{
    var name = "IronPDF";
}
<p>Hello, my name is @name</p>

@{
    var name = "IronPDF";
}
<p>Hello, my name is @name</p>

@
If True Then
	Dim name = "IronPDF"
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @name</p>

@
If True Then
	Dim name = "IronPDF"
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> Hello, my name is @name</p>

Bu kod örneğinde, { } arasındaki Razor kodu bir kod bloğudur.

Kontrol Yapıları

Razor Sayfalarımıza if-ifadeleri ve döngüler gibi kontrol yapıları da kullanabiliriz:

@{
    var count = 5;
}

@if (count > 3)
{
    <p>The count is greater than 3.</p>
}

@{
    var count = 5;
}

@if (count > 3)
{
    <p>The count is greater than 3.</p>
}

@
If True Then
	Dim count = 5
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@if(count > 3)
'{
'	<p> The count is greater than 3.</p>
'}

@
If True Then
	Dim count = 5
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@if(count > 3)
'{
'	<p> The count is greater than 3.</p>
'}

Yukarıdaki kod örneğinde, if ifadesi sunucuda çalışan sunucu tarafı kodunun bir parçasıdır ve çıktısı oluşan HTML sayfasına eklenir.

Switch İfadesi

Switch ifadeleri, C# programlama dilindeki şartlı kontrol yapılarının bir türüdür. Kod blokları içinde kullanılabilirler.

@{
    var fileFormat = "PDF";
    var message = "";

    switch (fileFormat) 
    {
        case "PDF":
            message = "You selected PDF.";
            break;
        default:
            message = "Invalid selection.";
            break;
    }
}

<p>@message</p>

@{
    var fileFormat = "PDF";
    var message = "";

    switch (fileFormat) 
    {
        case "PDF":
            message = "You selected PDF.";
            break;
        default:
            message = "Invalid selection.";
            break;
    }
}

<p>@message</p>

@
If True Then
	Dim fileFormat = "PDF"
	Dim message = ""

	Select Case fileFormat
		Case "PDF"
			message = "You selected PDF."
		Case Else
			message = "Invalid selection."
	End Select
End If

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @message</p>

@
If True Then
	Dim fileFormat = "PDF"
	Dim message = ""

	Select Case fileFormat
		Case "PDF"
			message = "You selected PDF."
		Case Else
			message = "Invalid selection."
	End Select
End If

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @message</p>

Razor'da Hello World

Herhangi bir programlama dilindeki en basit programlardan biri "Hello World" dir. Razor'da, "Hello World" 'ü aşağıdaki örnekle gösterildiği gibi basit bir satır içi ifade ile görüntüleyebilirsiniz:

<p>@("Hello World")</p>

<p>@("Hello World")</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @("Hello World")</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<p> @("Hello World")</p>

Razor'da Döngüler

Razor sözdizimi, foreach ifadesi gibi döngüler yazmanıza olanak tanır. Web sayfanızda görüntülemek istediğiniz bir isim listesine sahip olduğunuzu varsayalım. Bunu, Razor sözdiziminde foreach ifadesi ile başarabilirsiniz.

@{
    var names = new List<string> { "John", "Doe", "Smith" };
}

@foreach (var name in names)
{
    <p>@name</p>
}

@{
    var names = new List<string> { "John", "Doe", "Smith" };
}

@foreach (var name in names)
{
    <p>@name</p>
}

@
If True Then
	Dim names = New List(Of String) From {"John", "Doe", "Smith"}
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@foreach(var name in names)
'{
'	<p> @name</p>
'}

@
If True Then
	Dim names = New List(Of String) From {"John", "Doe", "Smith"}
End If

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'@foreach(var name in names)
'{
'	<p> @name</p>
'}

Bu foreach ifadesi, listedeki her bir adı döngüye sokar ve web sayfasına çıktısını verir.

Etiket Yardımcılarını Anlama

ASP.NET MVC'de Etiket Yardımcıları, Razor dosyalarındaki HTML öğelerini oluşturmak ve render etmek için sunucu tarafı kodu etkinleştirir. HTML yardımcılarına biraz benzeseler de, daha HTML benzeri bir sözdizimine sahiptirler. Razor görünümlerinizdeki HTML benzeri öğeleri, istemcinin tarayıcısına gönderilen HTML işaretleme dönüştürürler. Bir anchor Etiket Yardımcısının kod örneği:

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

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

Kullanıcı Etkileşimini Yönetme

Razor Sayfaları, kullanıcı etkileşimlerini yönetmek için işleyici yöntemleri kullanır. Örneğin, form gönderimini işlemek için Razor Sayfa'nın karşılık gelen Sayfa Modeli dosyasında OnPostAsync adlı bir yöntem oluşturabiliriz.

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    // Perform some operation here

    return RedirectToPage("./Index");
}

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }

    // Perform some operation here

    return RedirectToPage("./Index");
}

Public Async Function OnPostAsync() As Task(Of IActionResult)
	If Not ModelState.IsValid Then
		Return Page()
	End If

	' Perform some operation here

	Return RedirectToPage("./Index")
End Function

Public Async Function OnPostAsync() As Task(Of IActionResult)
	If Not ModelState.IsValid Then
		Return Page()
	End If

	' Perform some operation here

	Return RedirectToPage("./Index")
End Function

Razor'da Yorumlar

Razor, C# tarzı yorumları da destekler. Razor yorumlarının sunucu tarafı olduğunu unutmayın, bu nedenle onlar tarayıcıya gönderilmezler. Bu şekilde görünürler:

@* This is a Razor comment *@

@* This is a Razor comment *@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a Razor comment *@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a Razor comment *@

Ve bu birden fazla satırlı bir yorumdur:

@*
    This is a multi-line Razor comment.
    It's useful when you have a lot to say.
*@

@*
    This is a multi-line Razor comment.
    It's useful when you have a lot to say.
*@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a multi-line Razor comment.It's useful @when you have a lot @to say. *@

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@* This is a multi-line Razor comment.It's useful @when you have a lot @to say. *@

Razor görünüm ve sayfaları HTML yorumlarını da içerebilir. Bu yorumlar, tarayıcıya gönderilen HTML çıktısında görünürler.

<!-- This is an HTML comment -->

<!-- This is an HTML comment -->

Bir Razor Sayfasına Modelleri Geçme

Razor, modeleri sunucudan sayfaya geçmenizi sağlar. @model direktifi, geçen nesne türünü belirtmek için kullanılır. Bu model özelliği, aşağıdaki örnekte gösterildiği gibi Razor sayfasında erişilebilir.

@page
@model ExampleModel

<h2>@Model.Title</h2>
<p>@Model.Description</p>

@page
@model ExampleModel

<h2>@Model.Title</h2>
<p>@Model.Description</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@page @model ExampleModel <h2> @Model.Title</h2> <p> @Model.Description</p>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'@page @model ExampleModel <h2> @Model.Title</h2> <p> @Model.Description</p>

IronPDF ile Razor'da PDF'ler Oluşturma

Discover IronPDF for .NET, geliştiricilerin .NET'te HTML'den PDFler, görüntüler ve hatta mevcut web sayfalarından PDF'ler oluşturmasına olanak tanıyan popüler bir kütüphanedir. Raporlar, faturalar ve standart bir baskı formatının gerekli olduğu her türlü belge oluşturmak için mükemmel bir araçtır. IronPDF, ASP.NET MVC ve ASP.NET Razor Sayfaları çerçevesi içerisinde mükemmel çalışır.

Kurulum

Önce, IronPDF paketini yüklemeniz gerekir. Bunu Visual Studio'daki NuGet Paket Yöneticisi Konsolundan yapabilirsiniz. Aşağıdaki komutu çalıştırın:

Install-Package IronPdf

Basit Bir PDF Oluşturma

Şimdi, Razor Sayfanızda HTML kodundan basit bir PDF oluşturalım. Öncelikle, Razor sayfanızın en üstüne IronPDF ad alanını içe aktaralım.

@using IronPdf;

@using IronPdf;

Dim IronPdf As [using]

Dim IronPdf As [using]

Ardından, IronPDF ile bir PDF oluşturabilirsiniz. Diyelim ki, Razor sayfanızda tıklandığında basit bir PDF oluşturacak bir buton var.

Sayfa Model dosyamızda ilgili işleyicide aşağıdaki kodu ekleyebiliriz:

@page "/pdf"
@using IronPdf;
@inject IJSRuntime JS

<PageTitle>Create PDF</PageTitle>

<h1>Create PDF</h1>

<div class="form-outline">
    <button class="btn btn-primary mt-3" @onclick="CreatePDF">Create PDF</button>
</div>

@code {
    private string htmlString { get; set; }

    private async Task CreatePDF()
    {
        var Renderer = new IronPdf.ChromePdfRenderer();
        Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2;

        var doc = Renderer.RenderUrlAsPdf("https://ironpdf.com/");

        using var Content = new DotNetStreamReference(stream: doc.Stream);

        await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content);
    }
}

@page "/pdf"
@using IronPdf;
@inject IJSRuntime JS

<PageTitle>Create PDF</PageTitle>

<h1>Create PDF</h1>

<div class="form-outline">
    <button class="btn btn-primary mt-3" @onclick="CreatePDF">Create PDF</button>
</div>

@code {
    private string htmlString { get; set; }

    private async Task CreatePDF()
    {
        var Renderer = new IronPdf.ChromePdfRenderer();
        Renderer.RenderingOptions.PaperSize = IronPdf.Rendering.PdfPaperSize.A2;

        var doc = Renderer.RenderUrlAsPdf("https://ironpdf.com/");

        using var Content = new DotNetStreamReference(stream: doc.Stream);

        await JS.InvokeVoidAsync("SubmitHTML", "ironpdf.pdf", Content);
    }
}

ÇIKTI

Sonuç

Başarıyla Razor C#'nin temellerini öğrendiniz ve uygulamanız içerisinde IronPDF entegrasyonunu keşfettiniz. Visual Studio'da yeni bir proje oluşturarak başladınız ve ardından dinamik web sayfaları oluşturmak için Razor sözdizimini kullanmayı öğrendiniz. Ayrıca, HTML kodundan ve hatta tam Razor Görünümlerinden PDF'ler oluşturmak için IronPDF'in nasıl kullanılabileceğini keşfettiniz.

Şimdi, daha gelişmiş uygulamalar oluşturmaya devam ederken, IronPDF'in sunduğu güçlü özelliklerden yararlanabilirsiniz. IronPDF'i ücretsiz deneyebilirsiniz ve eğer değerli bulursanız, ihtiyaçlarınıza uygun bir lisansı satın alabilirsiniz.