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

Razor Bileşenleri Nelerdir

Razor Bileşenleri, geliştiricilerin C# ve HTML kombinasyonunu kullanarak web sayfaları oluşturmasına olanak tanıyan, ASP.NET Core içindeki bir kullanıcı arayüzü (UI) çerçevesidir ve sunucu tarafı kod yazma yeteneği sunar. Razor Bileşenleri, C# kodunu tarayıcıda WebAssembly (Wasm) veya SignalR kullanarak çalıştıran, 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 mimari sağlar, burada UI, daha küçük, kendine yeterli bileşenlere ayrılır ve bu bileşenler birleştirilerek tam bir web sayfası oluşturulur.

Razor Bileşenleri, sunucu tarafı ve istemci tarafı kodun nahtesiz bir şekilde bütünleşmesine izin veren, C# ve HTML birleşiminden oluşan Razor dili adı verilen bir işaretleme dili kullanır. Razor Bileşenleri, diğer bileşen tabanlı UI çerçeveleri olan React, Angular ve Vue'a benzerdir, ancak temel fark, C# dilinde yazılmış olup, barındırma modeline (WebAssembly veya SignalR) bağlı olarak sunucu ya da istemci tarafında çalışabilmeleridir.

Razor Bileşenlerinin Avantajları

Razor Bileşenleri, web geliştiricileri için aşağıdakiler dahil olmak üzere çeşitli avantajlar sunar:

Razor Bileşene Başlarken

Razor Bileşenlerine başlamak için bilgisayarınızda .NET Core 3.0 veya daha yeni bir sürümü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, 'Counter' adlı bir Razor bileşenimiz var ve tıklandığında currentCount değişkenini artıran bir düğme bulunmakta. @code bloğu, bileşen için C# kodunu tanımlamak üzere kullanılır.

Özel Bir Razor Bileşeni Oluşturma

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

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

Razor Bileşen dosyasını açın ve Razor dilini kullanarak bileşeninizi tanımlayın. Razor dili, 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, bu gibi 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
}

Artık bileşeninizi web uygulamanızın diğer bölümlerinde bileşeninizin etiket adını kullanarak HTML işaretlemesine dahil ederek kullanabilirsiniz. Örneğin, ana Razor sayfanızda bileşeni bu şekilde kullanabilirsiniz:

<MyComponent />

Razor Bileşeninize bileşen parametreleri kullanarak veri de geçirebilirsiniz. Bileşen parametreleri, bir ebeveyn bileşenden bir çocuk bileşene veri aktarmanıza izin verir, bu da bileşenler arasında iletişimi sağlar. Örneğin, bileşeninizde bir parametre böyle tanımlanabilir:

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

Ve bu parametreyi, bileşen sınıfınızda böyle kullanabilirsiniz:

<p>@Message</p>

Ve bu parametrenin değerini bir ebeveyn bileşenden böyle geçirebilirsiniz:

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

Razor Bileşenleri ayrıca, istemci tarafında çalıştırılabilecek sunucu tarafı mantığı da içerebilir. Örneğin, işlem mantığı yazabilir, HTTP istekleri yapabilir, kullanıcı olaylarını işleyebilir ve C# kodunu kullanarak doğrudan sunucu tarafı işlemleri gerçekleştirebilirsiniz. Bu, herhangi bir JavaScript kodu yazmadan dinamik ve etkileşimli web sayfaları oluşturmanıza olanak tanır.

Tekrar Kullanılabilir Razor Bileşenleri Oluşturma

Razor Bileşenlerinin en büyük faydalarından biri, birden fazla sayfada veya uygulamada kullanılabilecek bileşenler oluşturma yeteneğidir. Tekrar 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ünde yeni bir BookList.razor dosyası oluşturabiliriz, örneğin:

Razor bileşenini bu ş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, 'Book' objelerinden oluşan bir listeyi razor parametresi olarak alan BookList adlı bir bileşenimiz var. @foreach döngüsü, listeyi dolaşmak ve her kitap başlığını ve yazarını göstermek için kullanılır.

Bir sonraki bölümde, IronPDF kullanarak web uygulamalarından nasıl PDF dosyaları oluşturacağımızı keşfedeceğiz.

Razor Bileşenleri ile IronPDF Kullanımı

IronPDF, geliştiricilerin HTML, CSS ve JavaScript'ten PDF dosyaları oluşturmasına olanak tanıyan bir C# kütüphanesidir. Google Chrome'u destekleyen açık kaynak tarayıcı Chromium üzerine kurulmuştur. IronPDF ile geliştiriciler, Razor Bileşenlerini HTML'e kolayca dönüştürebilir ve bu içeriklerden PDF dosyaları oluşturabilirler.

IronPDF, HTML'den PDF'ye dönüştürme konusunda ustadır ve düzen ve stilin bozulmamasını sağlar. Bu özellikle raporlar, faturalar ve belgeler gibi web tabanlı içeriklerden PDF üretmek için 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'i Yükleme

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

1. Projenizi Visual Studio'da açın.
2. Projeye sağ tıklayın ve 'Manage NuGet Packages' (NuGet Paketlerini Yönet) seçeneğini seçin.
3. 'IronPDF' arayın ve 'IronPDF paketi'ni seçin.
4. 'Install' (Yükle) üzerine tıklayarak paketi yükleyin.

IronPDF NuGet paketi yüklendikten sonra, Razor Bileşen 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 bir PDF dosyası oluşturmak için, IronPdf.ChromePdfRenderer metoduna HTML sözdizim dizgesi, HTML Dosyası veya URL'yi geçebilirsiniz. Örneğin, bir sayacın artışını içeren bir PDF dosyası oluşturmak istiyoruz.

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 adlı yeni bir nesne oluşturuyoruz. Ardından, PdfDocument sınıfının yeni bir örneğini oluşturuyoruz ve RenderHtmlAsPdf metoduna bir dizge aktarıyoruz. Son olarak, PdfDocument.SaveAs metodunu kullanarak ortaya çıkan 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şturulacak.

Sonuç

Bu makalede, web uygulamalarından PDF dosyaları oluşturmak için Razor Bileşenleri ile IronPDF kullanmayı keşfettik. Razor Bileşenlerinin temellerini, IronPDF'i nasıl kurup kullanacağınızı kapsadık ve başlamak için kod örnekleri sağladık.

Razor Bileşenleri ve IronPDF, güçlü ve zengin özellikli web uygulamaları oluşturmak için kullanılabilecek güçlü araçlardır. Bu teknolojileri birleştirerek, geliştiriciler hem oldukça işlevsel hem de görsel olarak çekici web uygulamaları oluşturabilirler.

IronPDF, razor sayfalar ve URL'leri PDF'lere dönüştürmek ve ayrıca PDF belgelerini okumak, oluşturmak ve düzenlemek için de kullanılabilir. IronPDF, ayrıca mevcut veya yeni oluşturulan PDF belgelere başlıklar, altbilgiler, sayfa numaraları, dijital imzalar, parolalar eklemek ve gelişmiş PDF düzenleme özellikleri sunmak 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.