Skip to content

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

License

Notifications You must be signed in to change notification settings

TanvirArjel/TanvirArjel.Blazor

Repository files navigation

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);
      }
    }

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published