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

.NET Projelerinde MudBlazor'u Ayarlama

MudBlazor'u istemci projenizde veya sunucu projenizde kullanmak için önce .NET Framework'ün kurulu olduğundan emin olun. Ardından, barındırma modellerinize bağlı olarak istemci yerleşim klasöründe veya sunucu yerleşiminde yeni bir Blazor projesi oluşturun. Bunun için komut satırını veya Visual Studio'yu kullanın. Visual Studio'da Blazor Uygulaması şablonunu seçin.

Sonra projeye MudBlazor'u ekleyin. Terminali veya Paket Yöneticisi Konsolu'nu açın ve komutu çalıştırın:

Install-Package MudBlazor

Bu komut, projeye MudBlazor ekler.

MudBlazor'u yükledikten sonra _Imports.razor adresine gidin. Aşağıdakileri ekleyin:

@using MudBlazor

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

wwwroot/index.html (veya sunucu projeleri için Host.cshtml) içinde, MudBlazor'un CSS ve JS'ini aynı dosyaya ekleyin, interaktif render modu varsayılan şablon ayarlarıyla desteklendiğinden emin olun. Aşağıdaki satırı dahil edin:

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

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

Ayrıca şunu 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.

Temel Kod Örneği: Basit Bir MudBlazor Düğmesi Oluşturma

MudBlazor'un nasıl çalıştığını göstermek için, bir bileşene basit bir düğme ekleyelim. Index.razor gibi bir Razor bileşen dosyasını açın. Aşağıdaki MudBlazor düğme 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 düğme oluşturmanın başlangıcını yapar. Tıklandığında, konsola bir mesaj kaydedilir ve bu, sunucu tarafı işleme gösterilir. Variant ve Color özellikleri butonun görünümünü özelleştirir.

MudBlazor'da Diyaloglar

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

@inject IDialogService DialogService

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

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

MyDialog, diyalog içeriğini temsil eden bir Razor bileşenidir. Parametreleri DialogParameters ile geçirebilirsiniz.

Veri Tablosu

MudBlazor, koleksiyonları göstermek için bir veri tablosu bileşeni sunar. Sıralama, sayfalama ve filtreleme desteği vardır. 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. İşte MudTextField kullanılarak yapılan bir örnek:

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

Simge

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

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

Bu kod, bir alarm simgesi görüntüler. Simgeler, görsel ipuçları sağlayarak kullanıcı arayüzlerini zenginleştirir.

IronPDF ve C# MudBlazor Birleşimi Kullanım Durumu

MudBlazor, duyarlı ve etkileşimli kullanıcı arayüzleri oluşturmaya yönelik kullanışlı araçlar ve widget'larla dolu bir Blazor bileşen kütüphanesidir. MudBlazor'un kullanıcı arayüzü yeteneklerini IronPDF'in PDF oluşturmasıyla birleştirdiğinizde güçlü bir araç seti elde edersiniz. Yaygın bir kullanım durumu, kullanıcıların MudBlazor bileşenleri kullanarak belgeler veya raporlar tasarlamasına ve ardından tek bir tuşla bu tasarımları IronPDF kullanarak indirilebilir PDF'lere dönüştürmesine izin veren bir web uygulaması olabilir.

Kullanım Durumuna Ait 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