The Bootstrap-style Blazor UI component library recommended in this issue is adapted to mobile and supports various mainstream browsers.

Project Introduction

Blazor is a framework for building interactive client-side web UIs using .NET:

• Use C# instead of JavaScript to create rich, interactive UIs.
• Share server-side and client-side application logic written in .NET.
• Render the UI as HTML and CSS to support a wide range of browsers, including mobile browsers.

Client-side web development with .NET provides the following benefits:

• Use C# instead of JavaScript to write code.
• Leverage the existing .NET library ecosystem.
• Share application logic between the server and the client.
• Benefit from the performance, reliability, and security of .NET.
• Always efficiently support Visual Studio on Windows, Linux, and macOS.
  Net5 is supported
• Build on a stable, feature-rich, and easy-to-use set of common languages, frameworks, and tools.

subassembly

Blazor apps are component-based. Components in Blazor are UI elements, such as pages, dialog boxes, or data entry forms.

Components are .NET C# classes built into .NET assemblies that are used to:

• Define flexible UI rendering logic.
• Handle user events.
• Can be nested and reused.
• Can be shared and distributed as a Razor class library or NuGet package.

Component classes are typically written in the form of Razor markup pages with a .razor file extension. Components in Blazor are sometimes referred to as Razor components. Razor is a syntax for combining HTML markup with C# code designed to make developers more productive. With Razor, you can use IntelliSense programming in Visual Studio to support switching between HTML markup and C# in the same file. Razor is also used by Razor Pages and MVC. Unlike Razor Pages and MVC, which are built on a request/response model, components are designed to handle client UI logic and composition.

Blazor uses natural HTML markup that is formed by the UI. The following Razor markup illustrates a component (Dialog.razor) that displays a dialog box and handles events that occur when the user selects a button:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

In the example above, OnYes is a C# method that is triggered by the button’s onclick event. The text (ChildContent) and title (Title) of the dialog are provided by the following components that use this component in their UI.

Use HTML markup to embed a dialog component into another component. In the following example, the Index component (Pages/Index.razor) uses the previous Dialog component. The tag’s Title property passes the value of the title to the Title property of the Dialog component. The text of the Dialog component (ChildContent) is set by the content of the <Dialog> element. When you add a Dialog component to the Index component, IntelliSense in Visual Studio speeds up development with syntax and parameter completion.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

The dialog box is rendered when the parent Index component is accessed in the browser. When the user selects this button, the browser’s Developer Tools console displays a message written by the OnYes method:

Globalization and localization

Internationalization involves both globalization and localization. Globalization is the process of designing applications that support different cultures. Globalization adds input, display, and output support for a defined set of language scripts for a specific geographic region.

App localization involves the following:

• Make your app content localizable
• Provide localized resources for supported languages and cultures
• Implement a policy to select the language/culture for each request

Make your app content localizable

IStringLocalizer Use ResourceManager and ResourceReader to provide culture-specific resources at runtime. The interface has an indexer and an IEnumerable that returns localized strings. IStringLocalizer does not require the default language string to be stored in the resource file. You can develop apps for localization without having to create resource files early in development. The following code shows how to wrap the string "About Title" against localization.
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Localization;

namespace Localization.Controllers
{
    [Route("api/[controller]")]
    public class AboutController : Controller
    {
        private readonly IStringLocalizer<AboutController> _localizer;

        public AboutController(IStringLocalizer<AboutController> localizer)
        {
            _localizer = localizer;
        }

        [HttpGet]
        public string Get()
        {
            return _localizer["About Title"];
        }
    }
}

In the previous code, the IStringLocalizer<T> implementation is derived from dependency injection. If you can’t find the localized value for “About Title”, the indexer key, which is the string “About Title”, is returned. You can keep default language text strings in your app and wrap them in a localization tool so you can focus on developing your app. You develop your app in the default language and prepare for the localization step without first creating a default resource file. Alternatively, you can use the traditional method and provide a key to retrieve the default language string. For many developers, a new workflow that doesn’t have a default language, .resx file, and simply wraps string literals can reduce the overhead of localizing an app. Other developers will prefer the traditional workflow because it makes it easier to update localized strings with longer string literals.

Use the IHtmlLocalizer implementation for resources that contain HTML<T>. IHtmlLocalizer HTML-encodes the formatted parameters in the resource string, but not the resource string itself. In the example highlighted below, only the value of the name parameter is HTML-encoded.

using System;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Localization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Localization;

namespace Localization.Controllers
{
    public class BookController : Controller
    {
        private readonly IHtmlLocalizer<BookController> _localizer;

        public BookController(IHtmlLocalizer<BookController> localizer)
        {
            _localizer = localizer;
        }

        public IActionResult Hello(string name)
        {
            ViewData["Message"] = _localizer["<b>Hello</b><i> {0}</i>", name];

            return View();
        }

View localization

The IViewLocalizer service provides localized strings for views. The ViewLocalizer class implements this interface and finds the resource location from the view file path. The following code shows how to use the default implementation of IViewLocalizer:

@using Microsoft.AspNetCore.Mvc.Localization

@inject IViewLocalizer Localizer

@{
    ViewData["Title"] = Localizer["About"];
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p>@Localizer["Use this area to provide additional information."]</p>

The default implementation of IViewLocalizer looks for resource files based on the filename of the view. There is no option to use a global share resource file. ViewLocalizer implements localization tools using IHtmlLocalizer, so Razor does not HTML encode localized strings. You can parameterize the resource string, and IViewLocalizer will HTML-encode the parameter, but not the resource string. Consider the following Razor tags:

@Localizer["<i>Hello</i> <b>{0}!</b>", UserManager.GetUserName(User)]

Web Apps – Getting Started with MVC

Create a web app

• Start Visual Studio and select Create a new project.
• In the Create New Project dialog box, select ASP.NET Core Web App (Model-View-Controller) > Next.
• In the Configure New Project dialog box, enter MvcMovie for Project Name. Be sure to name your project “MvcMovie”. When copying code, the case needs to match each namespace.
  Select Next.
• In the Additional Information dialog box, select .NET 6.0 (Preview).
• Select Create.

Visual Studio uses the default project template for the MVC projects you create. Projects created:

• is an effective application.
• is a basic introductory project.

Run the app

Select Ctrl+F5 to run the app without using the debugger.

If you haven’t configured your project to use SSL, Visual Studio displays the following dialog:

If you trust an IIS Express SSL certificate, select Yes.

The following dialog box is displayed:

Visual Studio runs the app and opens the default browser.

The address bar shows localhost:port# instead of example.com. The standard hostname for the local computer is localhost. When Visual Studio creates a web project, it uses a random port for the web server.

By launching the app without debugging, you can choose Ctrl+F5 to:

• Change the code.
• Save the file.
• Quickly refresh your browser and see the code changes.

You can launch your app in debug or non-debug mode from the Debug menu:

You can debug your app by selecting the “MvcMovie” button in the toolbar:

The following image shows the app: