Mudblazor .NET 8 (Geliştiriciler için Nasıl Çalışır)

.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

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!");
    }
}

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

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

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

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

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>

İkonlar

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

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

Install-Package MudBlazor
Install-Package IronPdf

Install-Package MudBlazor
Install-Package IronPdf

@page "/report"
<MudText Typo="Typo.h5">Generate PDF Report</MudText>
<MudPaper Class="p-4">
    <MudTextField Label="Enter Report Title" @bind-Value="@reportTitle" />

    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@GeneratePDF">Generate PDF</MudButton>
</MudPaper>
@code {
    private string reportTitle = "";
}

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