TanvirArjel/TanvirArjel.Blazor

This library is an extension of Microsoft ASP.NET Core Blazor

TanvirArjel.Blazor

This library is extending ASP.NET Core Blazor functionalities to ease most common tasks for the developers. Currently, it has the following functionalities:

1. Adding constructor dependency injection support for the Blazor Components.
2. Useful extension methods on NavigationManager to handle query strings.
3. A pagination component to display pagination UI in Blazor Components.
4. A CustomValidationMessages component for adding custom error/validation messages to the EditConext model.
5. Extension method for adding bootstrap validation classes support in EditContext.

⭐ Giving a star

If you find this library useful, please don't forget to encouraging me to do such more stuffs by giving a star to this repository. Thank you.

✈️ How to get started

First install the TanvirArjel.Blazor nuget package into your Blazor app as follows:

PMC:

 Install-Package TanvirArjel.Blazor

.NET CLI:

 dotnet add package TanvirArjel.Blazor

🛠️ Usage:

1. To enable Constructor Dependency Injection support for the Blazor Components:

   Blazor Server:

   using TanvirArjel.Blazor.DependencyInjection;
       
   services.AddComponents();

   Blazor Web Assembly:

   using TanvirArjel.Blazor.DependencyInjection;
       
   builder.Services.AddComponents();

2. NavigationManager Extensions:

   a) To get query string value:

   using TanvirArjel.Blazor.Extensions;
   
   string tagName = _navigationManager.GetQuery("tag");
   int pageIndex = _navigationManager.GetQuery<int>("pageIndex");

   b) SetQuery() - 2 Overloads

   c) NavigateTo() - 3 Overloads

3. For Pagination:

   Add @using TanvirArjel.Blazor.Components to the _Imports.razor file. and then:

   <Pagination PaginationModel="PaginationModel"/>
   
   @code {
        private PaginationModel PaginationModel { get; set; }
        protected override void OnInitialized()
        {
            PaginationModel = new PaginationModel()
            {
                PageIndex = 5,
                PageSize = 10,
                TotalItems = 300,
                ListPath = "products"
            };
        }
   }

   Note: Pagination styling depends on Bootstrap css framework.

4. CustomValidationMessages component for adding custom validation message to the EditContext as follows:

   In .razor file:

   <EditForm EditContext="FormContext" OnValidSubmit="HandleValidSubmit">
     <DataAnnotationsValidator />
     <CustomValidationMessages @ref="ValidationMessages" />
     <ValidationSummary Model="@LoginModel" />
     
     ......
   </EditForm>

   In .razor.cs file:

   private EditContext FormContext { get; set; }
   
   private LoginModel LoginModel { get; set; } = new LoginModel();
   
   private CustomValidationMessages ValidationMessages { get; set; }
   
   private async Task HandleValidSubmit()
   {
     try
     {
         HttpResponseMessage httpResponse = await _userService.LoginAsync(LoginModel);
   
         if (httpResponse.IsSuccessStatusCode)
         {
             JsonSerializerOptions jsonSerializerOptions = new JsonSerializerOptions()
             {
                 PropertyNameCaseInsensitive = true
             };
   
             string responseString = await httpResponse.Content.ReadAsStringAsync();
             LoggedInUserInfo loginResponse = JsonSerializer.Deserialize<LoggedInUserInfo>(responseString, jsonSerializerOptions);
   
             if (loginResponse != null)
             {
                 await _hostAuthStateProvider.LogInAsync(loginResponse, "/");
             }
         }
         else
         {
             // This will automatically add all the server side validation messages to the EditContext model.
             await ValidationMessages.AddAndDisplayAsync(httpResponse);
             IsDisabled = false;
         }
     }
     catch (Exception exception)
     {
         // You cann also manually add error messages to the EditContext model.
         ValidationMessages.AddAndDisplay(ErrorMessage.ClientErrorMessage);
         await _exceptionLogger.LogAsync(exception);
     }
   }