Razor Bileşenleri: Geliştiriciler İçin Nasıl Çalışır

Razor Bileşenleri Nelerdir

Razor Bileşenleri, geliştiricilerin ASP.NET Core'da C# ve HTML kombinasyonu kullanarak web sayfaları oluşturmasına olanak tanıyan bir UI çerçevesidir, sunucu tarafı mantığı yazma ve bu mantığı istemci tarafında yürütme yeteneği ile birlikte. Razor Bileşenleri, C# kodunu tarayıcıda çalıştırmak için WebAssembly (Wasm) veya SignalR kullanan bir istemci tarafı web UI çerçevesi olan Blazor çerçevesinin bir parçasıdır. Razor Bileşenleri, modern web uygulamaları oluşturmak için bileşen tabanlı bir mimariye sahiptir, burada kullanıcı arayüzü daha küçük, kendi kendine yeten bileşenlere bölünür ve bir bütün web sayfası oluşturmak için bir araya getirilebilir.

Razor Bileşenleri, sunucu tarafı ve istemci tarafı kodun sorunsuz bir şekilde entegre edilmesine izin veren, C# ve HTML'nin bir kombinasyonu olan Razor sözdizimini kullanır. Razor Bileşenleri, React, Angular ve Vue gibi diğer bileşen tabanlı UI çerçevelerine benzer, ancak temel fark, bunların C# kullanılarak yazılmasıdır ve barındırma modeline bağlı olarak sunucu veya istemci tarafında çalışabilir (WebAssembly veya SignalR).

Razor Bileşenlerinin Faydaları

Razor Bileşenleri, web geliştiricileri için aşağıdaki gibi birçok fayda sunar:

Razor Bileşeniyle Başlamak

Razor Bileşenleriyle başlamak için, sisteminizde .NET Core 3.0 veya daha yeni bir sürümünün yüklü olması gerekir. Visual Studio veya .NET Core CLI'da Blazor şablonunu kullanarak yeni bir ASP.NET Core projesi oluşturun.

dotnet new blazorserver

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Bu örnekte, tıklanınca currentCount değişkenini artıran bir butona sahip 'Counter' adında bir Razor bileşenimiz var. @code bloğu, bileşen için C# kodunu tanımlamakta kullanılır.

Özel Bir Razor Bileşeni Yaratma

Projede, Razor Bileşenlerinizi depolamak için "Components" adlı yeni bir klasör oluşturun.

"Components" klasöründe, ".razor" uzantılı yeni bir Razor Bileşeni dosyası ekleyin. Bu dosya, bileşeninizin C# ve HTML kodunu içerecektir.

Razor Bileşeni dosyasını açın ve Razor sözdizimi kullanarak bileşeninizi tanımlayın. Razor sözdizimi, C# ve HTML kodunu tek bir dosyada birleştirmenize olanak tanır, bu da dinamik web sayfaları oluşturmayı kolaylaştırır. Örneğin, şu şekilde basit bir Razor Bileşeni tanımlayabilirsiniz:

<h1>Hello, World!</h1>
<p>This is a Razor Component.</p>

@code {
    // C# code for the component can be added here
}

Razor Bileşeninizi, web uygulamanızın diğer bölümlerinde, HTML işaretlemeniz içine bileşenin etiket adını yerleştirerek kullanabilirsiniz. Örneğin, bileşeni ana Razor sayfanızda şu şekilde kullanabilirsiniz:

<MyComponent />

Bileşen parametrelerini kullanarak Razor Bileşeninize veri de gönderebilirsiniz. Bileşen parametreleri, bir ebeveyn bileşenden bir alt bileşene veri aktarmanıza izin vererek bileşenler arasında iletişimi sağlar. Örneğin, Razor Bileşeninizde bir parametre şu şekilde tanımlayabilirsiniz:

@code {
    [Parameter]
    public string Message { get; set; }
}

Ve sonra bu bileşen parametresini Razor Bileşen sınıfınızda şu şekilde kullanabilirsiniz:

<p>@Message</p>

Ve bir ebeveyn bileşenden bileşene veri şu şekilde gönderebilirsiniz:

<MyComponent Message="Hello from parent component!" />

Razor Bileşenleri aynı zamanda sunucu tarafı mantık içerebilir ve istemci tarafında çalıştırılabilir. Örneğin, işleme mantığını yazabilir, HTTP istekleri yapabilir, kullanıcı olaylarını yönetebilir ve diğer sunucu tarafı işlemleri doğrudan Razor Bileşenlerinden yazabilirsiniz. Bu, JavaScript kodu yazmaya gerek kalmadan dinamik ve etkileşimli web sayfaları oluşturmanıza olanak tanır.

Yeniden Kullanılabilir Razor Bileşenleri Oluşturma

Razor Bileşenlerinin faydalarından biri, birden çok sayfada veya uygulamada kullanılabilecek yeniden kullanılabilir kullanıcı arayüzü bileşenleri oluşturma yeteneğidir. Yeniden kullanılabilir bir bileşen oluşturmak için, projenizin "Shared" klasöründe yeni bir ".razor" dosyası oluşturabilirsiniz.

Örneğin, kitapların listesini gösteren bir bileşen oluşturmak istediğimizi varsayalım. 'Shared' klasörüne BookList.razor dosyası gibi yeni bir dosya oluşturabiliriz.

Razor bileşeni şu şekilde tanımlayabiliriz:

@typeparam TItem

@foreach (var book in Books)
{
    <p>@book.Title by @book.Author</p>
}

@code {
    [Parameter]
    public List<TItem> Books { get; set; }
}

Bu örnekte, Razor parametresi olarak bir 'Book' nesneleri listesini alan BookList adında bir bileşene sahibiz. @foreach döngüsü, listede gezinmek ve her kitap başlığını ve yazarını görüntülemek için kullanılır.

Bir sonraki bölümde, web uygulamalarından PDF dosyaları oluşturmak için Razor Bileşenleri ile IronPDF kullanmayı keşfedeceğiz.

Razor Bileşenleri ile IronPDF Kullanımı

IronPDF, geliştiricilerin HTML, CSS ve JavaScript'ten PDF dosyaları oluşturmalarını sağlayan bir C# kütüphanesidir. Google Chrome'u çalıştıran açık kaynaklı tarayıcı olan Chromium tabanlıdır. IronPDF ile, geliştiriciler Razor Bileşenlerini kolayca HTML'ye dönüştürüp PDF dosyaları oluşturabilirler.

IronPDF, HTML'den PDF'ye dönüştürmede mükemmeldir ve düzenin ve stilin bozulmadan kalmasını sağlar. Bu, raporlar, faturalar ve belgeler gibi web tabanlı içeriklerden PDF oluşturmak için özellikle faydalıdır. HTML dosyaları, URL'ler ve HTML dizeleri kolayca PDF dosyalarına dönüştürülebilir.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();

        // 1. Convert HTML String to PDF
        var htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>";
        var pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent);
        pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf");

        // 2. Convert HTML File to PDF
        var htmlFilePath = "path_to_your_html_file.html"; // Specify the path to your HTML file
        var pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath);
        pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf");

        // 3. Convert URL to PDF
        var url = "http://ironpdf.com"; // Specify the URL
        var pdfFromUrl = renderer.RenderUrlAsPdf(url);
        pdfFromUrl.SaveAs("URLToPDF.pdf");
    }
}

Imports IronPdf

Friend Class Program
	Shared Sub Main(ByVal args() As String)
		Dim renderer = New ChromePdfRenderer()

		' 1. Convert HTML String to PDF
		Dim htmlContent = "<h1>Hello, IronPDF!</h1><p>This is a PDF from an HTML string.</p>"
		Dim pdfFromHtmlString = renderer.RenderHtmlAsPdf(htmlContent)
		pdfFromHtmlString.SaveAs("HTMLStringToPDF.pdf")

		' 2. Convert HTML File to PDF
		Dim htmlFilePath = "path_to_your_html_file.html" ' Specify the path to your HTML file
		Dim pdfFromHtmlFile = renderer.RenderHtmlFileAsPdf(htmlFilePath)
		pdfFromHtmlFile.SaveAs("HTMLFileToPDF.pdf")

		' 3. Convert URL to PDF
		Dim url = "http://ironpdf.com" ' Specify the URL
		Dim pdfFromUrl = renderer.RenderUrlAsPdf(url)
		pdfFromUrl.SaveAs("URLToPDF.pdf")
	End Sub
End Class

IronPDF Yükleme

Razor Bileşenleri ile IronPDF kullanmak için, önce IronPDF NuGet paketini yüklememiz gerekiyor. Bunu yapmak için bu adımları izleyin:

1. Projenizi Visual Studio'da açın.
2. Projeye sağ tıklayın ve "NuGet Paketlerini Yönet" i seçin.
3. "IronPDF" arayın ve "IronPDF paketini" seçin.
4. Paketi yüklemek için "Yükle" ye tıklayın.

IronPDF NuGet paketini yükledikten sonra, Razor Bileşenleri uygulamamızda kullanabiliriz.

Paket yüklendikten sonra IronPdf.ChromePdfRenderer sınıfını kullanarak bir Razor Bileşeninden yeni bir PDF dosyası oluşturabilirsiniz.

ASP.NET Core Razor Bileşenlerinde PDF dosyası oluşturmak için, IronPdf.ChromePdfRenderer metoduna HTML sözdizimi dizesini, HTML dosyasını veya URL'yi geçirebilirsiniz. Örneğin, sayacın artışına sahip bir PDF dosyası oluşturmak istediğimizi varsayalım.

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

var renderer = new IronPdf.ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" + currentCount + "</h1>");
pdf.SaveAs("myPdf" + currentCount + ".pdf");

Dim renderer = New IronPdf.ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf("<h1>My PDF #" & currentCount & "</h1>")
pdf.SaveAs("myPdf" & currentCount & ".pdf")

Bu örnekte, ChromePdfRenderer yeni bir örneğini oluşturuyoruz. Ardından, PdfDocument sınıfının yeni bir örneğini oluşturuyoruz ve RenderHtmlAsPdf metoduna bir dize geçiyoruz. Son olarak, PdfDocument.SaveAs metodunu kullanarak oluşturulan PDF dosyasını diske kaydediyoruz.

Bu örnekte, sayaç bileşenimizi değiştirdik. Bir sayaç düğmesinin onClick fonksiyonunu değiştirdik, tıklandığında Sayaç'ın sayısını içeren bir PDF oluşturacak.

Sonuç

Bu makalede, Razor Bileşenleri ile IronPDF kullanarak web uygulamalarından PDF dosyaları oluşturmayı inceledik. Razor Bileşenlerinin temellerini, IronPDF'i nasıl yükleyip kullanacağını ve başlamanıza yardımcı olacak kod örneklerini ele aldık.

Razor Bileşenleri ve IronPDF, sağlam ve özellik açısından zengin web uygulamaları oluşturmak için kullanılabilecek güçlü araçlardır. Bu teknolojileri birleştirerek, geliştiriciler hem işlevsel hem de görsel olarak çekici olan web uygulamaları oluşturabilir.

IronPDF, razor sayfalarını ve URL'leri PDF'ye dönüştürmek, ayrıca PDF belgeleri okumak, oluşturmak ve manipüle etmek için de kullanılabilir. IronPDF, mevcut veya yeni oluşturulan PDF belgelerine başlıklar, altbilgiler, sayfa numaraları, dijital imzalar, parolalar ve ileri düzey PDF manipülasyon özellikleri eklemek gibi daha ayrıntılı PDF kontrolü de sağlar. Geliştirme için ücretsizdir ancak üretim için ücretsiz deneme lisansı veya ticari lisans gerektirir.