Recently I got a chance to deploy this application on Azure, So I m writing step by step note on this.
If you are using visual studio deployment wizard, it is very simple to do it. I hope you have already created profile on Azure portal
There are the following Steps:
>> Clone the BlazorHero from github then clean and re-build the application
>> Go to the LocalizationConstants.cs file comment the given below
Note: Currently Azure is not supporting this country culture code.
Go to visual studio build >> publish server
Select azure like this
Click on Next button
Click on Create
Step 6: Configure the Sql server like this
Now Click on Publish Button
You will able to see the running application on Azure Cloud like this
Summary:
In this post we saw the magic of visual studio 2022 deployment wizard tool. We saw that without going azure portal, we are able to deploy the Blazor Application on azure cloud.
Recently I have used Azure AD(Active Directive) authentication on my Blazor project, So I am writing small post on this topic.
As you know Azure Active Directory (Azure AD) is a cloud-based identity and access management service. It is very simple and easy to integrate in Blazor Application.
Step1: Create the Blazor server application like this
Step2: Select the Authentication Type as “Microsoft Identity Platform”
Step 3: Now go to Azure portal and click on Active Directory
Step4: Click on Add and App registration link then you will see the page like this
Step 5: Click on Register and pick the client and tenant Id
Step 6: Go to Authentication then select the Id taken and Access Token and save it, like this image
Step 7: Go to appsettings.json file and file the required input like this
In one of my blazor project, there was requirement to prevent default submit behavior on pressing enter key in middle of entry screen. I fixed it like given below.
Any Web browser, if we will press enter key in middle of entry screen and there are any button with type submit then it will triggered it. This is expected behavior of web browser. But we want to disable feature then we do like this.
UI for above screen
@page "/test1"
@using System.ComponentModel.DataAnnotations
<h3>Test1</h3>
<EditForm Model="empModel" OnValidSubmit="HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
Name: <InputText id="name" @bind-Value="empModel.Name" /> <br /> <br />
Address: <InputText id="name2" @bind-Value="empModel.Address" /><br /> <br />
<button type="submit">Submit</button>
</EditForm>
@code {
private Emp empModel = new Emp();
private void HandleValidSubmit()
{
Console.WriteLine("OnValidSubmit");
}
public class Emp
{
[Required]
[StringLength(10, ErrorMessage = "Name is too long.")]
public string? Name { get; set; }
[Required]
public string? Address {get; set;}
}
}
Step 1: Go to MainLayout.Razor and keep this script file to disable it
<script suppress-error="BL9992">
//prevent submit on enter
document.body.addEventListener('keypress', e => {
if (e.which == 13 && !e.target.matches('button[type=submit]')) {
const form = e.composedPath().find(e => e.matches('form'))
const submitButton = form && form.querySelector('button[type=submit]:enabled');
if (submitButton) {
const preventSubmit = (e2) => {
e2.preventDefault();
return false;
}
// Browser emulates submit button click, when enter key is pressed, so we need to prevent that.
form.addEventListener('click', preventSubmit, { once: true, capture: true });
setTimeout(() => form.removeEventListener('click', preventSubmit, { capture: true }), 0);
// better clear the eventlistener despite once:true in case the keypress propagation has been stopped by some other eventhandler
}
}
});
</script>
Chandradev's Blog 