Bu eğitici, web uygulamaları oluşturmak için .NET 8 bağlamında MudBlazor ve IronPDF tanıtır. MudBlazor, Blazor projeleri için bir bileşen kütüphanesidir. Blazor uygulamaları için istemci ve sunucu taraflı UI bileşenleri sağlar. IronPDF, .NET uygulamalarında PDF belgeleri oluşturma, manipüle etme ve okuma işlevselliği sağlar.

MudBlazor'u kurma, web geliştirme için bileşenlerini kullanma ve PDF işlevselliği için IronPDF'i entegre etmeyi ele alacağız. Bu kılavuz, Blazor ve .NET'te yeni olanlar için hedeflenmiştir, ancak MudBlazor ve IronPDF hakkında bilgi edinmek isteyen orta seviye geliştiriciler için de faydalı olacaktır.

Bu eğitimin sonunda, bir Blazor Sunucu uygulaması kurmayı, MudBlazor bileşenlerini entegre etmeyi ve IronPDF'i PDF dosyaları ile çalışmak için kullanmayı bileceksiniz. Odak noktası, Visual Studio ile modern web uygulamaları geliştirmek için pratik bilgilerdir. Ortamımızı ayarlayıp .NET 8'de yeni bir proje oluşturarak başlayalım.

MudBlazor ile Başlarken

.NET Projelerinde MudBlazor Kurulumu

MudBlazor'u istemci projenizde veya sunucu projenizde kullanmak için öncelikle .NET Çerçevesinin yüklü olduğundan emin olun. Ardından, barındırma modellerinize bağlı olarak, istemci düzen klasöründe veya sunucu düzeninde yeni bir Blazor projesi oluşturun. Bunu yapmak için komut satırını veya Visual Studio'yu kullanın. Visual Studio'da, Blazor App şablonunu seçin.

Sonra, MudBlazor'u projenize ekleyin. Terminali veya Paket Yöneticisi Konsolunu açın ve şu komutu çalıştırın:

Install-Package MudBlazor

Bu komut, projenize MudBlazor'u ekler.

MudBlazor'ı kurduktan sonra, _Imports.razor adresine gidin. Aşağıdakileri ekleyin:

@using MudBlazor

@using MudBlazor

Bu, MudBlazor bileşenlerini projenizde kullanılabilir hale getirir.

wwwroot/index.html (veya sunucu projeleri için Host.cshtml) içinde, etkileşimli render modunun varsayılan şablon ayarları ile desteklendiğinden emin olarak, MudBlazor'un CSS ve JS dosyalarını aynı dosyaya ekleyin. Aşağıdaki satırı ekleyin:

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

Ayrıca, şunları ekleyin:

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

<script src="_content/MudBlazor/MudBlazor.min.js"></script>

Bu adım, MudBlazor'un stillerinin ve işlevselliğinin uygulamanızda çalışmasını sağlar.

Basit Bir Kod Örneği: Basit Bir MudBlazor Butonu Oluşturma

MudBlazor'u çalışırken göstermek için, bir bileşene basit bir buton ekleyelim. Bir Razor bileşen dosyasını, örneğin Index.razor açın. Aşağıdaki MudBlazor buton kodunu ekleyin:

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ButtonClick">
    Click Me
</MudButton>
@code {
    private void ButtonClick()
    {
        Console.WriteLine("Button clicked!");
    }
}

Bu kod, "Beni Tıkla" diyen bir buton oluşturmayı başlatır. Tıklandığında, sunucu tarafı işleme göstererek konsola bir mesaj kaydeder. Variant ve Color özellikleri, düğmenin görünümünü özelleştirir.

MudBlazor'un Özellikleri

MudBlazor'daki Diyaloglar

MudBlazor'un diyalog bileşeni, diyalogları oluşturmayı ve yönetmeyi basitleştirir. İlk olarak, bileşeninizde IDialogService enjekte edin:

@inject IDialogService DialogService

@inject IDialogService DialogService

Ardından, bir diyaloğu açmak için aşağıdaki yöntemi kullanın:

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

private void OpenDialog()
{
    DialogService.Show<MyDialog>("My Dialog", new DialogParameters { ["Parameter1"] = "Value1" });
}

MyDialog, iletişim penceresi içeriğini temsil eden bir Razor bileşenidir. DialogParameters ile parametreler geçebilirsiniz.

Veri Tablosu

MudBlazor, koleksiyonları göstermek için bir veri tablosu bileşeni sunar. Sıralama, sayfalama ve filtreleme destekler. Bunu kullanmak için, bir koleksiyonu Items özelliğine bağlayın:

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

<MudTable Items="@myItems">
    <HeaderContent>
        <MudTh>Header 1</MudTh>
        <MudTh>Header 2</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Header 1">@context.Item1</MudTd>
        <MudTd DataLabel="Header 2">@context.Item2</MudTd>
    </RowTemplate>
</MudTable>
@code {
    private List<MyItemType> myItems = /* Fetch or define your items here */;
}

Giriş Formları

Form girişleri için MudBlazor çeşitli bileşenler sağlar. MudTextField kullanarak bir örnek burada:

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

<MudForm Model="@myModel">
    <MudTextField Label="Enter text" For="@(() => myModel.Text)"></MudTextField>
</MudForm>
@code {
    public class MyModel
    {
        public string Text { get; set; }
    }
    private MyModel myModel = new MyModel();
}

Sekmeler

İçeriği sekmelerle düzenlemek için MudTabs kullanın. Her sekmeyi MudTabPanel ile tanımlayın:

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

<MudTabs>
    <MudTabPanel Text="Tab 1">
        Content for Tab 1
    </MudTabPanel>
    <MudTabPanel Text="Tab 2">
        Content for Tab 2
    </MudTabPanel>
</MudTabs>

İkonlar

MudBlazor, Material Icons ile entegre olur. Bir simge kullanmak için, bir MudIcon bileşeni ekleyin:

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

<MudIcon Icon="@Icons.Material.Filled.Alarm" />

Bu kod, bir alarm ikonunu gösterir. İkonlar, kullanıcı arayüzlerini görsel ipuçları sağlayarak geliştirir.

IronPDF ve MudBlazor'un Entegrasyonu

IronPDF, .NET uygulamalarında PDF dosyaları oluşturmayı, düzenlemeyi ve okumayı basitleştiren bir C# kütüphanesidir. Özellikle HTML'den PDF'lere dönüştürmek konusunda basit ve hızlı olmasıyla öne çıkar. Raporlar veya faturaları dinamik olarak üretmek istiyorsanız bu özellikle kullanışlı olabilir.

IronPDF'in en iyi özelliği, HTML'den PDF'e dönüştürme yeteneği olup, özgün düzeni ve stilini korumasıdır. Web içeriğinden raporlar, faturalar ve belgeler oluşturmak için harikadır. HTML dosyaları, URL'ler ve HTML dizeleri PDF'e dönüştürme için desteklenir.

using IronPdf;

class Program
{
    static void Main(string[] args)
    {
        var renderer = new ChromePdfRenderer();
        
        // 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");
        
        // 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");
        
        // 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();
        
        // 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");
        
        // 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");
        
        // 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()

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

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

        ' 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()

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

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

        ' 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 ve C# MudBlazor'un Birleştirilmesi Kullanım Durumu

MudBlazor, Blazor için bileşen kütüphanesidir ve interaktif ve duyarlı kullanıcı arayüzleri inşa etmek için birçok yararlı bileşene sahiptir. MudBlazor'un UI yeteneklerini IronPDF'in PDF oluşturma yetenekleriyle birleştirdiğinizde güçlü bir araç setine sahip olursunuz. Yaygın bir kullanım durumu, kullanıcıların MudBlazor bileşenleri kullanarak belgeler veya raporlar tasarlayabileceği bir web uygulaması olabilir ve ardından bir buton tıklamasıyla bu tasarımların IronPDF kullanılarak indirilebilir PDF'lere dönüştürülmesidir.

Kullanım Durumu Kod Örneği

MudBlazor ile bir kullanıcı arayüzü oluşturup, bu kullanıcı arayüzünü PDF belgesine dönüştürmek için IronPDF'i kullanacağımız temel bir örneği inceleyelim.

Önce, projenizde MudBlazor ve IronPDF'in yüklü olduğundan emin olun. Bunu NuGet Paket Yöneticisi veya Paket Yöneticisi Konsolu aracılığıyla yapabilirsiniz:

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

Adım 1: MudBlazor ile Kullanıcı Arayüzünü İnşa Etme

Blazor sayfanızda, kullanıcı arayüzünü oluşturmak için MudBlazor bileşenleri ekleyebilirsiniz. İşte MudBlazor ile oluşturulmuş basit bir form:

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
    <!-- Add more components as needed -->
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />
    <!-- Add more components as needed -->
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

Adım 2: IronPDF ile PDF Oluşturma Uygulama

Şimdi, PDF oluşturma işlevselliğini entegre etmek için GeneratePDF metodunu ele alacağız. Bu işlev, HTML içeriğimizi bir PDF dosyasına dönüştürecektir:

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

private void GeneratePDF()
{
    var renderer = new ChromePdfRenderer();
    var PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>");
    PDF.SaveAs("Report.pdf");
}

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub

Private Sub GeneratePDF()
	Dim renderer = New ChromePdfRenderer()
	Dim PDF = renderer.RenderHtmlAsPdf($"<h1>{reportTitle}</h1><p>More content here...</p>")
	PDF.SaveAs("Report.pdf")
End Sub

Bu basitleştirilmiş örnekte, RenderHtmlAsPdf bir HTML içerik dizisini alır ve bunu bir PDF'ye dönüştürür. Tam bir uygulamada, bu HTML dizisini kullanıcı girdisi veya diğer veri kaynaklarına göre dinamik bir şekilde üretebilirsiniz.

Kodun çıktısı burada:

Sonuç

Bu kılavuz, .NET 8 ile web geliştirme için MudBlazor ve IronPDF kullanımı sürecinde size yol gösterir. MudBlazor, Blazor uygulamaları için bileşenler sunarak kullanıcı arayüzlerini minimum kod ile geliştirir. IronPDF, PDF oluşturma ve düzenleme sağlar, .NET uygulamalarında belge yönetimi için değerli olur.

Adım adım talimatlarla, MudBlazor'u projelerinize entegre etmeyi, bileşenlerini kullanmayı ve web içeriğinden PDF oluşturmada IronPDF'i kullanmayı öğrenirsiniz. Yeni başlayanlar ve orta düzey geliştiriciler için ideal olan bu eğitim, bu kütüphaneleri kullanarak modern web uygulamaları oluşturacak şekilde donanımlı olmanızı sağlar. IronPDF'i daha fazla keşfetmek isteyenler için, ücretsiz bir deneme $999 tarihinden itibaren başlar.