How do you use MVC in Blazor?
Using MVC in a Blazor application is not yet possible, but we have an option to migrate an existing ASP.NET MVC application to a Blazor Server application.
How do I get access to the browser history in Blazor?
Browser history can be accessed in Blazor using the window’s popstate event, which is fired when the user navigates the session history. We use the history API to get the history changes in the browser, and we can manually move to a specific page using back(), forward(), go(). When routing takes place in the application or browser, you can use the following code to store the current location: Window.history.pushState({ prevUrl: window.location.href }, null, newpath) To retrieve the previous URL, use the following code in your new route: Window.history.state.prevUrl Refer to this link for more information about the popstate event.Refer to this link for more information about the history API. View Sample in GitHub
How do I get the page referrer in Blazor?
To get the page referrer of where the user came from, follow these steps: Create a JavaScript function as a separate file in your application (~/wwwroot/interop.js). function getPageReferrer() { return document.referrer; } Add the script reference in the ~/wwwroot/index.html file of the Blazor WebAssembly application. <script src=”interop.js”></script> Invoke the JavaScript function using the IJSRuntime service in a Razor page. @page “/” @inject IJSRuntime JSRuntime @code { protected override async Task OnInitializedAsync() { var pageReferrer = await JSRuntime.InvokeAsync(“getPageReferrer”); } } View Sample in GitHub
How do I deploy a Blazor WebAssembly application to GitHub pages?
Follow the steps below to deploy a Blazor WebAssembly application to GitHub Pages. Prerequisites: .NET Core 3.1/.NET 5.0GITGitHub Account Create a Blazor WebAssembly project using the below command in the CLI. mkdir BlazorGitHubPagesDemocd BlazorGitHubPagesDemodotnet new blazorwasm Add the .gitignore file to ignore the bin/obj files. dotnet new gitignore Now, create a new GitHub repository according to GitHub’s instructions and run the following commands in the CLI to push an existing repository to the created GitHub repository page. // Create the Git repository git init // Track all files that are not ignore by .gitignore git add –all // Commit all changes to the repository git commit -m “Initial commit” // Push the changes to the existing repo master branch git remote add origin https://github.com/{{GitHub_User_Name}}/BlazorGitHubPagesDemo.git git push -u origin master Now the changes have been committed in the newly created GitHub repository. After the source code has been pushed to the created GitHub repository, create a new GitHub action workflow to build the project, commit the output, and push the published code to a separate branch. To deploy in GitHub, GitHub Pages will use a separate branch (named gh-pages) as the static files for your site. To achieve this, navigate to the Action tab in the GitHub repository and click the set up a workflow yourself option to create a new GitHub workflow action. Clicking set up a workflow yourself will navigate to the Edit new file page. This file will instruct GitHub actions to build and deploy your project using YAML. Refer to “GitHub Actions” for the workflow of YAML files. Copy this code and paste it in your YML file. [main.yml] Now that all steps are in place, commit the file. Navigate back to the GitHub Actions overview page by clicking the Actions tab. You can now find your GitHub Action Workflow and the workflow runs on this page. Click on the first run that was automatically created when you committed the workflow, and watch it publish your project to the gh-pages branch. Once completed, you can see the result by navigating to the gh-pages branch in your repository. To enable GitHub pages in the repository settings, navigate to the settings by clicking on the Settings tab. Scroll down to the “GitHub Pages” section and select the gh-pages branch in the Source dropdown. Now, the GitHub Pages site should be available at in the below link. ‘[YOUR_USERNAME].github.io/[YOUR_REPOSITORY_NAME]’. Refer to “How to deploy ASP.NET Blazor WebAssembly to GitHub Pages” for more details.
How do I unit test a Blazor component?
Unit testing is a level of software testing that is used by developers to ensure that the implemented logic meets the requirements and behaves as expected. The following example uses the bUnit testing library for Blazor components to write comprehensive and stable unit test cases. It allows you to write test cases in C# or Razor syntax to verify outcomes with semantic HTML diffing and comparison logic. Create a simple Blazor Server/WebAssembly application. In Visual Studio 2019, right-click on the project solution and select the Add > New Project option. Select NUnit Test Project (.NET Core) and click Next button. Enter the project name and then click Create button. The created project will be displayed like the following. Open the NuGet manager for BlazorTest and search with the keyword bunit.web. The result will be displayed as seen in the following screenshot. Select bunit.web and install it. Right-click on BlazorTest project dependencies and add the project reference BlazorServerApp. Now, write a test case for a Razor component. Add a Razor component to your Blazor project. [Index.razor] @page “/” <h3>Hello World</h3> <button class=”btn btn-primary” @onclick=”OnButtonClick”>Ping Me</button> @if (IsVisible) { <h5>Blazor component is clicked.</h5> } @code { public bool IsVisible { get; set; } protected void OnButtonClick() { IsVisible = true; } } Add the following test cases in your created test project file [UnitTest1.cs] to test the Blazor components. [UnitTest1.cs] using NUnit.Framework; using Bunit; namespace TestProject1 { public class Tests { [SetUp] public void Setup() { } [Test] public void Test1() { // Arrange using var context = new Bunit.TestContext(); // Act var cut = context.RenderComponent<BlazorServerApp.Pages.Index>(); cut.Find(“button”).Click(); // Assert cut.Find(“h5”).MarkupMatches(“<h5>Blazor component is clicked.</h5>”); } } } Then select the View > Test Explorer options in Visual Studio 2019 and run the test. Now you will see the list of test methods. The test run is successful, and the test case passes. You can also alter the test case if it fails. Refer to “Unit test a Blazor component” for more details and download the sample here.
