Giter Site home page Giter Site logo

programsolutions / abpmudblazor3 Goto Github PK

View Code? Open in Web Editor NEW

This project forked from yellow-dragon-cloud/abpmudblazor3

0.0 0.0 0.0 2.89 MB

MudBlazor Theme in ABP Blazor WebAssembly PART 3

License: MIT License

JavaScript 0.09% C# 86.63% CSS 1.03% HTML 12.25%

abpmudblazor3's Introduction

MudBlazor Theme in ABP Blazor WebAssembly PART 3

Introduction

In this part, I will show you how to replace the built-in messaging service to show MudBlazor message boxes.

8. Make Sure You Have Completed PART 1 & Part 2

This project is built on top of MudBlazor Theme in ABP Blazor WebAssembly PART 1 and MudBlazor Theme in ABP Blazor WebAssembly PART 2. Before continuing, you need to complete these parts in order, if you haven't already.

9. Add MudBlazor MessageBox Support to MainLayout

Open MainLayout.razor and replace it with the code below:

@inherits LayoutComponentBase

<MudThemeProvider />
<MudSnackbarProvider />
<MudDialogProvider />

<MudLayout>
    <MudAppBar Elevation="8">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="MudBlazor.Color.Inherit" Edge="Edge.Start" 
                       OnClick="@((e) => DrawerToggle())" />
        <Branding />
        <MudSpacer />
        <NavToolbar />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="8">
        <NavMenu />
    </MudDrawer>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.False" Class="mt-4">
            <PageAlert />
            @Body
            <UiPageProgress />
        </MudContainer>
    </MudMainContent>
</MudLayout>

@code 
{
    private bool _drawerOpen = true;

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

10. Replace Message Service

In Volo.Abp.AspNetCore.Components.Web.BasicTheme/Services folder, create a new MudBlazorUiMessageService.cs file with the following code:

using System;
using System.Threading.Tasks;
using Localization.Resources.AbpUi;
using Microsoft.Extensions.Localization;
using MudBlazor;
using Volo.Abp.AspNetCore.Components.Messages;
using Volo.Abp.DependencyInjection;

namespace Volo.Abp.AspNetCore.Components.Web.BasicTheme.Services;

[Dependency(ReplaceServices = true)]
public class MudBlazorUiMessageService : IUiMessageService, IScopedDependency
{
    private readonly IDialogService _dialogService;
    private readonly IStringLocalizer<AbpUiResource> _localizer;

    public MudBlazorUiMessageService(IDialogService dialogService, IStringLocalizer<AbpUiResource> localizer)
    {
        _dialogService = dialogService;
        _localizer = localizer;
    }

    public async Task<bool> Confirm(string message, string title = null, Action<UiMessageOptions> options = null)
    {
        var result = await _dialogService.ShowMessageBox(
            title, message, yesText: _localizer["Yes"], noText: _localizer["No"]);
        return result ?? false;
    }

    public Task Error(string message, string title = null, Action<UiMessageOptions> options = null)
    {
        _dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
        return Task.CompletedTask;
    }

    public Task Info(string message, string title = null, Action<UiMessageOptions> options = null)
    {
        _dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
        return Task.CompletedTask;
    }

    public Task Success(string message, string title = null, Action<UiMessageOptions> options = null)
    {
        _dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
        return Task.CompletedTask;
    }

    public Task Warn(string message, string title = null, Action<UiMessageOptions> options = null)
    {
        _dialogService.ShowMessageBox(title, message, yesText: _localizer["Ok"]);
        return Task.CompletedTask;
    }
}

This code replaces IUiMessageService service. See Overriding Services for more information.

Finally, edit Index.razor to test new message boxes:

@page "/"
@using Volo.Abp.AspNetCore.Components.Messages
@using Volo.Abp.AspNetCore.Components.Notifications
@inherits BookStoreComponentBase
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject IUiNotificationService NotificationService
@inject IUiMessageService MessageService

<div class="container">
    <div class="p-5 text-center">
        <Button onclick="@(async () => { await NotificationService.Success("Hello, World!"); await NotificationService.Warn("Something went wrong!"); })">
            Show Notifications!
        </Button>
        <hr />
        <Button onclick="@(() => { MessageService.Info("Hello, World!"); })">
            Show Info!
        </Button>
        <br />
        <Button onclick="@(() => { throw new Exception(); })">
            Show Error!
        </Button>
    </div>
</div>

The Result

image

Next

MudBlazor Theme in ABP Blazor WebAssembly PART 4

abpmudblazor3's People

Contributors

yellow-dragon-cloud avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.