<div><MudNavMenu><MudNavLinkHref="/"Match="NavLinkMatch.All"Icon="@Icons.Material.Filled.Home"IconColor="Color.Primary">
Home
</MudNavLink><MudNavLinkHref="/menu1"Icon="@Icons.Material.Filled.Diversity1"IconColor="Color.Secondary">
Menu 1
</MudNavLink></MudNavMenu></div>
<MudButtonVariant="Variant.Filled"Color="Color.Error"OnClick="OnDeleteAsync">Delete</MudButton><MudMessageBox @ref="deleteItemDialog"Title="Item deletion"><MessageContent>
Are you sure you want to delete the selected item?
</MessageContent><YesButton><MudButtonVariant="Variant.Filled"Color="Color.Error"StartIcon="@Icons.Material.Filled.DeleteForever">Delete</MudButton></YesButton></MudMessageBox>
<MudNavMenu><MudNavLinkHref=""Match="NavLinkMatch.All"Icon="@Icons.Material.Filled.Home"IconColor="Color.Primary">
Home
</MudNavLink><MudNavLinkHref="menu1"Icon="@Icons.Material.Filled.Diversity1"IconColor="Color.Secondary">
Menu 1
</MudNavLink></MudNavMenu>
<MudTableItems="@items"SortLabel="Sort By"AllowUnsorted="false"><HeaderContent><MudTh>Name</MudTh><!-- no sorting on this column --><MudTh><MudTableSortLabelSortBy="new Func<Item, object>(x => x.Price)"InitialDirection="SortDirection.Descending"><!-- sorting by default on this column -->
Price
</MudTableSortLabel></MudTh></HeaderContent>
privateasyncvoidSaveChangesAsync(objectelement)
{
varoperationStatus = await itemClient
.UpdateItemAsync(item.Id, item, CancellationToken.None);
// because RowEditCommit is an Action<object> it doesn't return a Task and it doesn't wait the task// if you change the Component you have to call StateHasChanged to update itStateHasChanged();
<MudTabsElevation="2"Rounded="true"Centered="true"ApplyEffectsToContainer="true"PanelClass="pa-6"><MudTabPanelText="Tab text 1">...</MudTabPanel><MudTabPanelText="Tab text 2">...</MudTabPanel></MudTabs>
<MudAutocompleteT="MyNamespace.CurrencyResponse"Label="Currency"
@bind-Value="item.Currency"SearchFuncWithCancel="@SearchCurrenciesByCodeAsync"ToStringFunc="@(x => x == null ? null : x.Code)"Strict="false"ShowProgressIndicator="true"><BeforeItemsTemplate><MudTextClass="px-4 py-1">3 characters min.</MudText></BeforeItemsTemplate><NoItemsTemplate><MudTextAlign="Align.Center"Class="px-4 py-1">
No matching currencies found
</MudText></NoItemsTemplate>
// call to the web APIprivateasyncTask<IEnumerable<CurrencyResponse>> SearchCurrenciesByCodeAsync(stringvalue, CancellationTokencancellationToken)
=> awaitCurrencyClient.GetCurrenciesByCodeAsync(value, cancellationToken);
// cache all the currencies privateasyncTask<IEnumerable<CurrencyResponse>> SearchCurrenciesByCodeAsync(stringvalue)
{
varcurrencies = await CurrencyClient.GetAllAsync();
// if text is null or empty, show complete listreturnstring.IsNullOrEmpty(value)
? (IEnumerable<CurrencyResponse>)currencies
: currencies.Where(x => x.Code.StartsWith(value, StringComparison.InvariantCultureIgnoreCase));
}
@* with an enum *@<MudSelect @bind-Value="logLevel"Label="Log level">@foreach (LogLevel logLevel in Enum.GetValues(typeof(LogLevel)))
{<MudSelectItemValue="@logLevel">@logLevel.ToString()</MudSelectItem>}</MudSelect>@* with a list of items *@<MudSelectT="Namespace.Item"
@bind-Value="@selectedItem"Label="Item"AnchorOrigin="Origin.BottomCenter">@foreach (variteminitems)
{<MudSelectItemValue="@item">@item.Description</MudSelectItem>}</MudSelect>@* with static items *@<MudSelect @bind-Value="@selectedItem"Label="Item"><MudSelectItemValue="@("Item1")">Item1</MudSelectItem><MudSelectItemValue="@("Item2")">Item2</MudSelectItem></MudSelect>
<MudPaperClass="pa-4 mr-16">padding on the 4 sides 16px</MudPaper><MudPaperClass="mr-16">margin right 64px</MudPaper><MudPaperClass="ma-1 ma-sm-4 ma-xl-16">margin 4px, 16px on screens from 600-1920px, 64px from 1920px/MudPaper>
@* hide the MudCard for screens < 600px *@<MudHiddenBreakpoint="Breakpoint.Xs"Invert="true"><MudCardClass="pa-5"><MudText>SM and Down</MudText></MudCard></MudHidden>
<MudPaperColor="Color.Primary">
Color enum
</MudPaper><MudPaperClass="mud-info mud-secondary-text">
CSS and theme colors. background: theme info blue; color: theme secondary pink
</MudPaper><!-- mud-theme-primary vs mud-primary --><MudPaperStyle="@($"color:{theme.Palette.Dark}; background:{theme.Palette.Warning};")">
C# and theme colors
</MudPaper><MudPaperClass="blue lighten-4 red-text text-darken-4">
CSS and material colors background: blue lighten4; color: red darken4
</MudPaper><MudPaperStyle="@($"color:{Colors.Blue.Lighten4}; background:{Colors.Red.Darken4};")">
C# and material colors
</MudPaper><spanstyle="color: var(--mud-palette-warning);">C# and CSS colors</span>@code {privateMudThemetheme = newMudTheme();
}
# install MudBlazor templates
dotnet new install MudBlazor.Templates
# help on new project
dotnet new mudblazor --help# new server project named MudBlazor
dotnet new mudblazor --host server --output MudBlazor
# --no-https is not available
@page "/"@using Microsoft.AspNetCore.Components.Web@namespace MyApp.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><basehref="~/" /><linkhref="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"rel="stylesheet" /><linkhref="_content/MudBlazor/MudBlazor.min.css"rel="stylesheet" />@* CSS isolation *@<linkrel="stylesheet"href="MyApp.styles.css" /><componenttype="typeof(HeadOutlet)"render-mode="ServerPrerendered" /></head><body><componenttype="typeof(App)"render-mode="ServerPrerendered" /><divid="blazor-error-ui"><environmentinclude="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment><environmentinclude="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment><ahref=""class="reload">Reload</a><aclass="dismiss">🗙</a></div><scriptsrc="_framework/blazor.server.js"></script><scriptsrc="_content/MudBlazor/MudBlazor.min.js"></script></body></html>