How do you use Blazor in an existing ASP.NET MVC application?
Blazor applications are component-based. Blazor components can be used in existing ASP.NET MVC applications. Follow these steps to learn how Blazor components are used in the view page of an MVC application. Prerequisites: Visual Studio 2019 .NET Core 3.1 Create a ASP.NET MVC application. Open Visual Studio 2019 and select ASP.NET Core Web App (Model-View-Controller) in the Create a new project page and configure the project as shown. Add the reference Microsoft.AspNetCore.Components in your dependencies. Add the Blazor component folder in the View/Shared folder. Then add a Razor component inside the Component folder. Add the following code to the created Component.razor file. @using Microsoft.AspNetCore.Components <h3>Blazor Component in MVC</h3> <button @onclick=”Test” class=”btn btn-dark”>Click to get answer</button> <br /> <div >@Data </div> @code { [Parameter] public string Data { get; set; } = string.Empty; private void Test() { Data = “Button Clicked”; } } Add the script reference to the _Layout.cshtml file. <base href=”~/” /><script src=”_framework/blazor.server.js”></script> Create an _Imports.razor file in the Component folder and add the following namespaces to the _Imports.razor file to access component features over your components in the application. @using System.Net.Http@using Microsoft.AspNetCore.Authorization@using Microsoft.AspNetCore.Components.Authorization@using Microsoft.AspNetCore.Components.Forms@using Microsoft.AspNetCore.Components.Routing@using Microsoft.AspNetCore.Components.Web@using Microsoft.JSInterop@using System.IO Add services.AddServerSideBlazor() under the ConfigureServices method and add endpoints.MapBlazorHub(); under the Configure method in the Startup.cs file. ………………… . .namespace blazinmvc{ public class Startup { ……………… . . public void ConfigureServices(IServiceCollection services) { services.AddServerSideBlazor(); services.AddControllersWithViews(); } public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { …………….. . . app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: “default”, pattern: “{controller=Home}/{action=Index}/{id?}”); endpoints.MapBlazorHub(); }); } } } To render components on the View page, add the following code in the Index.cshtml page in the Views folder. @{ ViewData[“Title”] = “Home Page”; }<div >@(await Html.RenderComponentAsync<blazinmvc.Views.Shared.Component.Component>(RenderMode.ServerPrerendered,new { Data= ” Hello World ” })) </div> Run the application. After button click In the component page, we use the button to change the text defined in the Index.cshtml page inside the component rendering. Clicking the button will change the text shown on the Home page. View Sample in GitHub
How do I generate and save a file client-side using Blazor?
Since there is no built-in functionality for saving files in Blazor, it is necessary to write the function in JavaScript and then invoke the JavaScript function from C# code in Blazor. In this solution, we have used JavaScript interop for file saving and generation in client-side Blazor. Create a new JavaScript file, saveFile.js, in the wwwroot folder and add the following code. [saveFile.js] function saveFile(file, Content) { var link = document.createElement(‘a’); link.download = name; link.href = “data:text/plain;charset=utf-8,” + encodeURIComponent(Content) document.body.appendChild(link); link.click(); document.body.removeChild(link); } Reference the new script file in the index.html page as shown.[index.html] <body> ………………………… . . <script src=”_framework/blazor.webassembly.js”></script> <script src=”saveFile.js”></script> </body> Invoke the JavaScript function in a new Razor page. [Savefile.razor] page “/savefile” @inject IJSRuntime JSRuntime <h1>Blazor Save & Generate File</h1><textarea @bind=”fileContent” style=”width:150px;height:100px” /> <button @onclick=”SaveFile”>SaveFile</button> <button @onclick=”DownloadFile”>GenerateFile</button> @code { string Content; string fileContent; string fileName = “file.txt”; public void SaveFile() { Content = fileContent; } public async void DownloadFile() { await JSRuntime.InvokeAsync<object>(“saveFile”,fileName,Content); }} Run the app. Save and generate the file in text format. View Sample in GitHub
What is the difference between using @bind and @bind-value?
In Blazor, there is no significant difference between using these two attributes. The @bind attribute is a shorthand of the @bind-value attribute and its delegate will trigger the ValueChanged event of the component.The usage of both the @bind and @bind-value attributes in the following code examples are functionally equivalent. @bind @bind-value
How can I bind a drop-down list in Blazor WebAssembly?
We can bind a drop-down list in Blazor WebAssembly using the <select> tag and bind the values to the drop-down list using the @bind attribute in the tag. In the following code example, we have bind a country list along with its country codes. On changing the dropdown list, the codes corresponding to the country will appear below. [Index.razor] Note: We also have our Syncfusion Dropdown List component. Please refer to the demo link for more information about our product. View Sample in GitHub
How does Blazor WebAssembly work?
Blazor WebAssembly can run client-side C# code directly in the browser. The Blazor application, as well as its dependencies and the .NET runtime, are all downloaded to the browser. The application runs on the browser’s UI thread directly. The same method handles both UI notifications and event management. We can re-use code and libraries from the server-side parts of the application while .NET runs on WebAssembly.
