Web geliştirme yıllar içinde uzun bir yol kat etti ve modern framework'ler ve kütüphanelerin ortaya çıkmasıyla birlikte geliştiriciler, dinamik ve etkileşimli web sayfaları oluşturmak için güçlü araçlara sahip oldular. Son yıllarda önemli bir popülerlik kazanan bir teknoloji, ASP.NET Core'daki Blazor framework'ünün bir parçası olan Razor Bileşenleridir. Razor Bileşenleri, geliştiricilerin C# ve HTML kullanarak zengin, istemci tarafı web uygulamaları oluşturmalarına, JavaScript yazmak zorunda kalmadan olanak tanır. Bu makalede, Razor Bileşenlerini ve bunların modüler, tekrar kullanılabilir ve dinamik web sayfaları oluşturmak için nasıl kullanılabileceğini inceleyeceğiz.

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:

Yeniden Kullanılabilirlik

Razor Bileşenleri, web uygulaması içinde veya farklı projelerde birden fazla yerde kolayca yeniden kullanılabilir, kendine yeterli unsurlardır. Bu, kodun yeniden kullanılabilirliğini teşvik eder ve kod tekrarını azaltır, böylece daha bakımı kolay ve ölçeklenebilir web uygulamaları ortaya çıkar.

Modülerlik

Razor Bileşenleri, UI'nin karmaşık web sayfaları oluşturmak üzere daha küçük bileşenlere ayrıldığı bileşen tabanlı bir mimariyi takip eder. Bu, modülerliği teşvik eder, geliştiricilerin bireysel bileşenler içinde UI ve mantığı kapsüllemelerine olanak tanır ve kod tabanını yönetmeyi ve sürdürmeyi kolaylaştırır.

Seamless Integration with C#

Razor Bileşenleri C# dilinde yazıldığı için geliştiriciler, mevcut C# yeteneklerini ve bilgilerini web uygulamaları oluşturmak için kullanabilirler. Bu, JavaScript öğrenme ve yazma zorunluluğunu ortadan kaldırır, bu da C# ile zaten tanışık olan geliştiriciler için önemli bir avantaj olabilir.

Sunucu Tarafı ve İstemci Tarafı Çalıştırma

Razor Bileşenleri, barındırma modeline bağlı olarak sunucu veya istemci tarafında çalıştırılabilir. Bu, geliştiricilere performans, güvenlik ve kullanıcı deneyimi gibi faktörlere bağlı olarak uygulamaları için en uygun çalıştırma modelini seçme esnekliği sağlar.

Gerçek Zamanlı İletişim

Razor Bileşenleri, istemci ve sunucu arasında çift yönlü iletişim kurmak için bir gerçek zamanlı iletişim kütüphanesi olan SignalR'ı kullanabilir. Bu, web uygulamalarında gerçek zamanlı güncellemeler ve bildirimler sağlar, bu da duyarlı ve etkileşimli bir kullanıcı deneyimi sunar.

Yayılabilirlik

Razor Bileşenleri oldukça genişletilebilir olup, geliştiricilerin özelleştirilmiş bileşenler, kütüphaneler ve şablonlar oluşturmasına olanak tanır. Bu, geliştiricilerin web uygulamalarının özel gereksinimlerini karşılayan çözümler oluşturmalarına olanak tanır.

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++;
    }
}

@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
}

<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 />

<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; }
}

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

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

<p>@Message</p>

<p>@Message</p>

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

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

<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; }
}

@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

Module Program
    Sub Main(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 Module

Imports IronPdf

Module Program
    Sub Main(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 Module

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")

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.