Tag: Blazor

Posted on by

Introduction To Ettissal Library

Ettissal is a nuget package that provides a component for Blazor WASM to check application connectivity to internet.

Installation

Install the nuget package in your Blazor WASM project:

dotnet add package Ettissal

Or

NuGet\Install-Package Ettissal

How to use?

You have a Blazor WASM project and you want to check the application connectivity to internet. You can use the Ettissal component to do that.

Add Ettissal Library

Add the following line to the service collection in Program.cs file:

builder.Services.AddEttissal();

Use Ettissal ConnectedComponent

Using this component, you can check the application connectivity to internet. You can use it in any page or component in your Blazor WASM project.

<ConnectedComponent>
    <Online>
        <p>You're Online</p>
    </Online>
    <Offline>
        <p>You're Offline</p>
    </Offline>
</ConnectedComponent>

This will help you to show the content based on the application connectivity to internet. As you can see, you can use the Online and Offline components to show the content when the application is online or offline.

Result

I hope this can help 🙂

Here the link to the library source code : https://github.com/mabroukmahdhi/Ettissal

Posted on by

Display a Markdown file content in Balzor

You have for example many github repositories with well-done documentation and you want to use those files (*.md) in your own Blazor application? This is very simple. You only need to follow this article.

Introduction

To convert a DM file (a file with the .dm extension) to HTML in Blazor, you’ll need to use a library or tool that is capable of parsing the DM file and generating the corresponding HTML output.

One option is to use the Discord Markdown Parser library, which is a Python library that can parse DM files and generate HTML output. You can use this library by calling its API from your Blazor code using HttpClient.

Easy peasy…

If you want to simply display the content of your file, you can install and use the library Markdig.

Installation

You can install the package like this:

  • Nuget: NuGet\Install-Package Markdig
  • .NET CLI: dotnet add package Markdig

How to use?

Here’s an example of how you can use the Markdig library to convert a DM file to HTML in Blazor:

@page "/markdown"
@inject HttpClient Http

@MarkdownHtml

@code {
   
    private MarkupString MarkdownHtml { get; set; }

    protected async override Task OnInitializedAsync()
    {
        string markdown = await Http.GetStringAsync("MarkdownFile.md");
        MarkdownHtml = new MarkupString(Markdig.Markdown.ToHtml(markdown));
    }
}

For your info, I placed the file MarkdownFile.md in wwwroot in my Blazor WASM sample app. Here is the content of this file:

# My title
## My subtitle
 I am writing something here.

## Second subtitle
**Wow** this is _amazing_.

Oh I have a [link](https://mahdhi.com/) too!

And if you run your application, the result will be:

Displaying Markdown file content in Blazor

Conclusion

Keep in mind that this is just one way to convert a DM file to HTML in Blazor. There may be other libraries or tools that you can use for this purpose. If you know more about this subject ? Please share 😀