Blazor FAQ - General

To add custom CSS class names to input components despite bootstrap and other CSS framework styling, follow the steps below.

1. In the wwroot/css/site.css stylesheet, include the following styles.
   

    .validField {
          outline: 2px dotted green;
      }
       
      .invalidField {
          outline: 2px dotted red;
      }    

2. Create a new Customer.cs and model Customer class.
   

    using System.ComponentModel.DataAnnotations;
       
      namespace CustomCSS_Validation_InputComponent
      {
          public class Customer
          {
              [Required]
              public string Name { get; set; }
       
              [Required]
              [StringLength(4, ErrorMessage = "The organization code must be less than 5   characters in length.")]
              public string OrganizationCode { get; set; }
          }
      }     

3. Create a new CustomFieldCssClassProvider.cs and then the CustomFieldCssClassProvider class.Inherit the CustomFieldCssClassProvider class from FieldCssClassProvider and override the GetFieldCssClass method, which helps to check for validation messages with the EditContext and returns the “validField” or “invalidField” class name to the appropriate field.
   
   

      using Microsoft.AspNetCore.Components.Forms;
      using System.Linq;
       
      namespace FormBootstrapCSS.Data
      {
          public class CustomFieldCssClassProvider : FieldCssClassProvider
          {
              public override string GetFieldCssClass(EditContext editContext,
              in FieldIdentifier fieldIdentifier)
              {
                  var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();
       
                  return isValid ? "validField" : "invalidField";
              }
          }
      }

   
    

4. Add the form design code as well as the code for input components validation to the Index.razor page. Here, the SetFieldCssClassProvider method in the EditContext class is used to set the custom CSS name to the appropriate field based on the validation result returned by the CustomFieldCssClassProvider class, whose instance is passed into the method.
   

   @page "/"
       
      <EditForm EditContext="@editContext" OnValidSubmit="@Submit">
          <DataAnnotationsValidator />
          <ValidationSummary />
          <div class="mt-2   col-md-12">
              Name: <InputText id="name" @bind-Value="_customer.Name" />
          </div>
          <div class="mt-2   col-md-12">
              Organization Code: <InputText id="organizationCode" @bind-Value="_customer.OrganizationCode" />
          </div>
          <div class="mt-2   col-md-12">
              <button type="submit">Submit</button>
          </div>
      </EditForm>
       
      @code {
          private Customer _customer = new Customer();
          private EditContext editContext;
       
          protected override void OnInitialized()
          {
              editContext = new(_customer);
              editContext.SetFieldCssClassProvider(new   CustomFieldCssClassProvider());
          }
       
          private void Submit()
          {
           …….. . .
          }
      }      

   
   
   
   
   View Sample in GitHub

Stored procedures are pieces of reusable code that you can save in a database data dictionary. They help you extract, edit, and remove data from a database without writing the code to do so again and again. It also saves your time, lessens your workload, and increases your productivity.
Follow these steps to use stored procedures in a Blazor application:

1. Create a new Blazor application and add the Microsoft.EntityFrameworkCore, Microsoft.EntityFrameworkCore.SqlServer, Microsoft.EntityFrameworkCore.Design, Microsoft.EntityFrameworkCore.Tools NuGet packages using the NuGet package manager.

2. Create a class named EmpClass.cs in the Data folder and define the properties that are already in the database table.
   [Empclass.cs]
   

   public class EmpClass
   {
   	[Key]
   	public int Empid { get; set; }
   	public string? Empname { get; set; }
   	public string? Department { get; set; }
   	public DateTime joinDate { get; set;}
   }

   [EmpClass table]
   
   Also Define inserted Employee Details in stored procedure.
   
   

   CREATE PROCEDURE [dbo].[InsertEmpdetails]
   @Empname nvarchar(150),
   @Department nvarchar(150), 
   @joinDate datetime 
   AS
   Insert into EmpClass(Empname,Department,joinDate) values (@Empname,@Department,@Joindate)
   RETURN 0
   

3. Add the virtual property for the DbSet from EmpClass to insert records in the database under the Data folder.
   [ApplicationDbContext.cs]

   public class ApplicationDbContext:DbContext 
   {
   	public ApplicationDbContext(DbContextOptions options ) : base(options)
   	{
   	}
   	public virtual DbSet InsertRecord { get; set; }
   }
   

4. Connect the SQL Server database to the Blazor application by choosing (View –> Server Explorer). Right-click the Data Connections and choose Add connection in Visual Studio. Add your server name and DB name to connect the database to the Blazor application.
   
   The database is now connected to the Blazor application.
   

5. Add the connection string configurations to the appsetting.json file.
   [appsetting.json]
   

   {
   	"ConnectionStrings": {
   		"Myconnection": " "Data Source={{Server_Name}};Initial Catalog={{DataBase_Name}};Integrated Security=True""
   	},
   	"Logging": {
   	……
   	},
   	"AllowedHosts": "*"
   }
   

6. Create an EmpServices class in the Services folder and define the ExecuteSqlRaw extension method to execute a stored procedure.
   [EmpServices.cs]

   using {Your App Name}.Data;
   using Microsoft.EntityFrameworkCore;
   namespace {Your App Name}.Services
   {
   	public class EmpService
   	{
   		protected readonly ApplicationDbContext? _dbcontext;
   		public EmpService ( ApplicationDbContext? _db )
   		{
   			_dbcontext = _db;
   		}
   		public EmpClass AddNewRecord ( EmpClass? ec)
   		{
   			//Here define the ExecuteSqlRaw extension method to execute a stored procedure with InsertEmpdetails 
   			_dbcontext!.Database.ExecuteSqlRaw("InsertEmpdetails {0},{1},{2}", ec?.Empname!, ec?.Department!, ec!.Joindate);
   			_dbcontext.SaveChanges();
   			return ec;
   		}
   	}
   }
   

7. Add the DbContext configuration to the Program.cs file.
   

   builder.Services.AddDbContext(options => options.UseSqlServer("name=ConnectionStrings:Myconnection"));
   builder.Services.AddScoped();
   

8. Insert Record Into Database Using Stored Procedure implement in index.razor page
   

   @page "/"
   @using {Your App Name}.Data
   @using {Your App Name}.Services
   @inherits OwningComponentBase<EmpService>
   <h1>Insert Record Into Database Using Stored Procedure</h1>
   <hr/>
   <EditForm Model="@ec" OnValidSubmit="@Insertdata">
   	<table border="1">
   		<tr>
   			<td>Employee Name</td>
   			<td><input type="text" placeholder="Enter Employee Name" @bind="ec.Empname"/></td>
   		</tr>
   		<tr>
   			<td>Department</td>
   			<td><input type="text" placeholder="Enter Department" @bind="ec.Department" /></td>
   		</tr>
   		<tr>
   			<td>Joindate</td>
   			<td><InputDate @bind-Value="ec.Joindate"></InputDate></td>
   		</tr>
   		<tr>
   			<td>Joindate</td>
   			<td><input type="submit" value="Insert"/></td> 
   		</tr>
   	</table>
   </EditForm>
   @code{
   	EmpClass ec = new EmpClass();
   	void Insertdata ()
   	{
   		ec.Empid = 0;
   		Service.AddNewRecord(ec);
   	}
   }
   

9. Press Ctrl + F5 to run the application and see the output in the following image.
   

Blazor authentication is implemented to determine who a particular user is. Blazor follows the existing ASP.NET Core authentication mechanisms to show a user’s identity.
Follow these steps to implement authentication with OpenID Connect in Blazor:

1. Create Blazor application

   Create a Blazor Server app and install a NuGet package named “Microsoft.AspNetCore.Authentication.OpenIdConnect” using the NuGet package manager.

2. Add OIDC and authentication configuration

   Add OpenID Connect and cookie authentication service configuration to the Blazor Server app in the Startup.cs file.
   [Startup.cs]
   

   using Microsoft.AspNetCore.Authentication.Cookies;
   using Microsoft.AspNetCore.Authentication.OpenIdConnect;
   using Microsoft.IdentityModel.Tokens;
     
   namespace BlazorServerApp
   {
        public class Startup
        {
          . . .
          . . .
          public void ConfigureServices(IServiceCollection services)
          {
                      . . .
                      . . .
                      services.AddAuthentication(opt =>
                {
                    opt.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                    opt.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
                    opt.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
                }).AddCookie().AddOpenIdConnect("oidc", options =>
                    {
                    options.Authority = "https://demo.identityserver.io/";
                    options.ClientId = "interactive.confidential.short";
                    options.ClientSecret = "secret";
                    options.ResponseType = "code";
                    options.SaveTokens = true;
                    options.GetClaimsFromUserInfoEndpoint = true;
                    options.UseTokenLifetime = false;
                    options.Scope.Add("openid");
                    options.Scope.Add("profile");
                    options.TokenValidationParameters = new TokenValidationParameters{ NameClaimType = "name" };
     
                    options.Events = new OpenIdConnectEvents
                    {
                        OnAccessDenied = context =>
                        {
                            context.HandleResponse();
                            context.Response.Redirect("/");
                            return Task.CompletedTask;
                        }
                    };
                });
             }
     
             public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
             {
                 . . .
                 . . .
                                app.UseAuthentication();
                                app.UseAuthorization();
                         }
               }
     } 

3. Add AuthorizeRouteView to the App.razor file

   Add AuthorizeRouteView to display the page matching the specified route only if the user is authorized.
   [App.razor]
   

   @inject NavigationManager UriHelper
     
    <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly">
            <Found Context="routeData">
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        @{
                            var returnUrl = UriHelper.ToBaseRelativePath(UriHelper.Uri);
                            UriHelper.NavigateTo($"login?redirectUri={returnUrl}", forceLoad: true);
                        }
                    </NotAuthorized>
                    <Authorizing>
                        Loading...
                    </Authorizing>
                </AuthorizeRouteView>
            </Found>
            <NotFound>
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            </NotFound>
        </Router>
    </CascadingAuthenticationState> 

4. Add buttons

   Add Log out and Log in buttons to authorize the user in the header section.
   [MainLayout.razor]
   

   <div class="top-row px-4">
                <AuthorizeView>
                    <Authorized>
                        <form method="get" action="logout">
                            <button type="submit" class="nav-link btn btn-link">Log out</button>
                        </form>
                    </Authorized>
                    <NotAuthorized>
                        <a href="login?redirectUri=/">Log in</a>
                    </NotAuthorized>
                </AuthorizeView>
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div> 

5. Redirect requests to log in or log out users

   Create Razor pages for login (Login.cshtml.cs) and logout (Logout.cshtml.cs) redirection requests to IdentityServer for authorization under the Pages folder.
   [Login.cshtml.cs]
   

   using Microsoft.AspNetCore.Authentication;
     
   namespace BlazorServerApp.Pages
   {
        public class LoginModel : PageModel
        {
            public async Task OnGet(string redirectUri)
            {
                await HttpContext.ChallengeAsync("oidc", new AuthenticationProperties { RedirectUri = redirectUri });
            }
        }
    } 

   [Logout.cshtml.cs]
   

   using Microsoft.AspNetCore.Authentication;
     
   namespace BlazorServerApp.Pages
   {
        public class LogoutModel : PageModel
        {
            public async Task<IActionResult> OnGetAsync()
            {
                await HttpContext.SignOutAsync();
                return Redirect("/");
            }
        }
    } 

6. Show authorized content in Razor component

   Following is the code to display the authorized content when the app is authorized. If the app is not authorized, it displays the “Not Authorized” message to the user.
   [Index.razor]
   

   @page "/"
     
   <AuthorizeView>
        <Authorized>
            <h1>Hello, @context.User.Identity.Name !</h1>
     
            <p>Welcome to your new app.</p>
        </Authorized>
        <NotAuthorized>
            <p>Not Authorized</p>
        </NotAuthorized>
    </AuthorizeView>

7. Run the application

   Press Ctrl + F5 to run the application and click Log in in the header to authenticate the user.
   
   You can download the reference sample on GitHub.

Cookies are created by the application and passed to the user’s web browser when the user submits the request. The web browser passes the cookie back to the application to indicate that the user is authenticated. When the user logs out, the cookie is removed.
Follow these steps to set a cookie and read that cookie with authentication in Blazor.

1. Configure the cookie authentication services in the Startup.cs file.
   [Startup.cs]
   

   public class Startup
   {
       . . .
       . . .
     
       public void ConfigureServices(IServiceCollection services)
       {
          . . .
          . . .
          services.AddAuthentication("Cookies").AddCookie();
       }
       public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
       {
          . . .
          . . .
          app.UseAuthentication();
          app.UseAuthorization();
     
          app.UseEndpoints(endpoints =>
          {
             endpoints.MapControllers();
             . . .
             . . .
          });
       }  
    } 

2. Now, add a controller page to set the cookie to the browser and redirect the URL.
   [CookieController.cs]
   

   using Microsoft.AspNetCore.Authentication;
   using Microsoft.AspNetCore.Http;
   using Microsoft.AspNetCore.Mvc;
   using System.Collections.Generic;
   using System.Security.Claims;
   using System.Threading.Tasks;
     
   namespace blazorcookie
    {
        [Route("/[controller]")]
        [ApiController]
        public class CookieController : ControllerBase
        {
            [HttpPost]
            public async Task<ActionResult> Login([FromForm] string name)
            {
                ClaimsIdentity claimsIdentity = new ClaimsIdentity(new List<Claim>
                {
                    new Claim(ClaimTypes.NameIdentifier, name)
                }, "auth");
                ClaimsPrincipal claims = new ClaimsPrincipal(claimsIdentity);
                await HttpContext.SignInAsync(claims);
                return Redirect("/");
            }
        }
    } 

3. To use the authorized view, configure the CascadingAuthenticationState component in the App.razor file. This will let you check the authentication state inside the Blazor application.
   [ App.razor ]
   

   <CascadingAuthenticationState>
        <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
            . . .
            . . .
            . . .
        </Router>
   </CascadingAuthenticationState> 

4. Use form action to call the cookie controller to set the cookie and have it read by AuthorizeView user name.
   [Index.razor]
   

   @page "/"
     
   <AuthorizeView>
        <Authorized>
            <h1>Hello @context.User.Claims.First().Value</h1>
        </Authorized>
   </AuthorizeView>
     
   <form action="cookie" method="post">
        <input type="text" name="name" />
        <input type="submit" />
   </form> 

5. Run the application and submit the form request. You will find an authentication cookie with the scheme “Cookies,” which was specified in the ConfigureServices() method of the Startup class.
   
   
   Refer to this blog post for more details and download the sample on GitHub.

Blazor CSS isolation is a process that occurs at build time. By utilizing CSS isolation, you can restrict the scope of CSS files or styles to specific components within your app, preventing them from affecting other components globally. The CSS selectors are rewritten by Blazor to match markup rendered by the component. These rewritten CSS files are loaded as static assets in the {{Your_App_Name}}.styles.css.
The static file name is referenced inside the tag of the _Host.cshtml file.
[_Host.cshtml] / [index.html]

<head>
       // . . .
       <link href="{{Your_App_Name}}.styles.css" rel="stylesheet" />
</head>