As you can see, in the Demo project, both the Found template and the NotFound template are using the same layout. We do this as follows: The EmptyBlazorProject.zip file contains all of the files from the empty Demo project as well as a MyTemplate.vstemplate file that contains all of the metadata for the project template. If the Text property of the component is null, it is set to fantastic. If you are unfamiliar with Bootstrap 4, you should refer to https://getbootstrap.com to familiarize yourself with its syntax. A comprehensive guide for beginners to learn the key concepts, real-world applications, and latest features of C# 9 and .NET 5 with hands-on exercises using VS Code, Develop your programming skills by exploring essential topics such as code reviews, implementing TDD and BDD, and designing APIs to overcome code inefficiency, redundancy, and other problems arising from bad code, Gain the expertise you need to build custom application frameworks and responsive and visually appealing user interfaces with WPF, C#, and .NET. While the value of forecasts is null, a Loading message is displayed. Each time the button on the Counter page is clicked, the counter is incremented without a page refresh. Blazor WebAssembly makes it possible to run C# code on the browser instead of having to use JavaScript, and does not rely on plugins or add-ons. The source code for this chapter is available in the following GitHub repository: https://github.com/PacktPublishing/Blazor-WebAssembly-by-Example/tree/main/Chapter02. Now let's return to Visual Studio to examine the files in the Demo project. Get productive fast with re-usable UI components from top component vendors like Telerik, DevExpress, Syncfusion, Radzen, Infragistics, GrapeCity, jQWidgets, and others. The styling for this div element is in the wwwroot\css\app.css file. Well, you can use .Net standard libraries but of course, the app is executed in the browser security sandbox. We will add a parameter to specify the increment used by the IncrementCount method. Finally, we will configure our own custom project template that creates an empty Blazor WebAssembly project. For more information on HttpClient, refer to Chapter 8, Building a Task Manager Using the ASP.NET Web API. In the following example, the route is expecting a route parameter named Increment with the type of int: The following route constraints are supported: The following types are not currently supported as constraints: Routing is handled on the client. Since Razor components are regular C# classes, they support partial classes. This is the markup in the Pages\FetchData.razor file: The preceding markup includes an if statement and a foreach loop. In this book, we will be using the asynchronous versions of the methods since they execute without blocking other operations. This book emphasizes the practical over the theoretical by providing detailed step-by-step instructions for each project. The style used for the active class is defined in the wwwroot\css\app.css file: The SurveyPrompt component creates a link to a brief survey on Blazor. So for changes to reach the Server and thereby the components, there needs to be a real-time connection. You should now be able to create a Blazor WebAssembly application. The only technical requirement for using Blazor WebAssembly is to work with a browser that supports WebAssembly which, as of today, all modern browsers do. Open the _Imports.razor file and replace the word Demo with $projectname$: We can use a custom project template the same way that we use any of the built-in project templates. In this book, the terms Razor component and component are used interchangeably. Next, it uses the OnInitializedAsync asynchronous method to populate the array. This is a screenshot of the Fetch data page from the Demo project: The body of the Fetch data page includes a table that shows the weather forecast for a few days in 2018. If you click the first Click me button, the first counter will be incremented by 1; if you click the second Click me button, the second counter will be incremented by 5: Components can have multiple @page directives. We do this as follows: Figure 2.18 The Choose Template Type dialog, Figure 2.19 The Select Template Options dialog. Then, we used the Export Template Wizard to create a custom project template based on the empty project. This type of route parameter is a string type and can only be placed at the end of the URL. in computer science and engineering from the Massachusetts Institute of Technology (MIT) and an MBA from Carnegie Mellon University (CMU). You need to download .Net Core 3.0. C# code is case sensitive and strings must be enclosed in quotation marks. Well, no, they are meant to co-exist, it's a long story. The parameters of both the component and the route must have the same name, but they are not case sensitive. The $projectname$ parameter will be replaced by the name of the project that is provided by the user when the project is created. It also initializes the runtime to run the web app. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. This results in the displayed count being updated. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application. We will learn how to use the @page directive to define routing. Lastly, we have the definition of a result type PlanetRequest that models what the incoming JSON looks like which is a shape like this: That's all we want to cover for now or this would be a book. The Counter component is more complex than the Index component. To understand however how ProductDetail communicates with the parent we need to see that components definition: There are two pieces here, the first is the definition of the parameter OnClick, looking like this: Have a look at the above type EventCallback, this means that when invoked it needs to pass a string as a parameter. In our ProductDetail component, change it to the following: We have done steps 1+2, now let's try it out by assigning it values in our Index component: and the result in the browser looks like so: What do we mean by component output? She has a B.S. Razor syntax is easy to learn if you already know C#. After we create the project, we will examine it to further familiarize ourselves with Razor components. This is an example of an inline expression: Control structures also start with an @ symbol. This is the order in which the methods in the life cycle of a component are invoked: The following diagram shows code from the Counter component of the Demo project that we will create in this chapter: The code in the preceding example is divided into three sections: Each of the sections has a different purpose. Each one is applied to its current folder and subfolders. Smart components are the ones that hold state and dumb components only render data. As previously mentioned, Blazor components have a well-defined life cycle. After that it's pretty much the same idea as the former hosting model, we render our components, we produce a UI diff and send that to the browser and ends up applying that to the DOM. Blazor apps can also be hosted in one of the following ways: Blazor WebAssembly apps execute directly in the browser on a WebAssembly-based .NET runtime. I would just like to show one more thing before we round off this article, namely working HTTP. NavigationManager provides a NavigateTo method that is used to navigate the user to the specified URI without forcing a page load. C# in the frontend, sweet and no plugins, so it's not the next Silverlight? We do this as follows: As you add the markup, IntelliSense is provided for the new Increment parameter: The Home page now contains two instances of the Counter component. Blazor code executing on the server has the flexibility to do anything you would normally do on the server, such as connecting directly to a database. Deployment, you can use GitHub Pages or static site hosting. The body of the Home page consists of some static text and a link to a survey. The URLs are resolved relative to the base path that is specified in the wwwroot/index.html file. Now we are asking the right questions. We do so by defining a life cycle method OnInitializedAsync() that is guaranteed to run on initialization. We will also learn how to use Razor syntax to combine C# code with HTML markup. That means you can get high-performance apps in the browser. A simple list component can be created like this: That's great, it showcases the @foreach helper. Blazor WebAssembly by Example is a project-based guide for learning how to build single-page web applications using the Blazor WebAssembly framework. We do this as follows: The Counter component now includes two @page directives. The body element of the index.html file includes two div elements and a reference to the blazor.webassembly.js file. To define a constraint, add a colon followed by the constraint type to the parameter. The ComponentBase class includes both asynchronous and synchronous methods used to manage the life cycle of a component. Your browser should now look like this: One usually differ between smart and dumb components. The partial keyword is used to create a partial class. Blazor works in all modern web browsers, including mobile browsers. Blazor is Microsoft's new answer to using the .Net platform and C# language everywhere, on frontend as well as backend. Using the DOM, elements can be updated, added, and removed from the page. LayoutComponentBase represents a layout and has only one property, which is the Body property. Build cross-platform native client apps with .NET MAUI and Blazor. Our step-by-step tutorial will help you get Blazor running on your computer. For example, in the Demo project, the Counter component is in the /Pages/Counter folder, yet it uses the following route: The Router component uses route parameters to populate the parameters of the corresponding component. In this example, the following URL will route the user to the Counter component: A typical page can include many directives at the top of the page. It is. The word 'Packt' and the Packt logo are registered trademarks belonging to In the preceding example, we placed the Demo project into the E:\Blazor folder. Click on the following link to see the Code in Action: An Atypical ASP.NET Core 5 Design Patterns Guide [Packt] [Amazon], C# 9 and .NET 5 Modern Cross-Platform Development [Packt] [Amazon]. After we have completed the Demo project, we will convert it into an empty Blazor WebAssembly project. This is a screenshot of the Counter page from the Demo project: The body of the Counter page includes a counter and a Click me button. Click here to download it. This book is for .NET web developers who are tired of constantly learning new JavaScript frameworks and wish to write web applications using Blazor WebAssembly, leveraging the power of .NET and C#. Therefore, let's add the Counter component to our Index component like so: Save and relaunch the app. That means everything in our app is made up of components. The following markup in the Pages\Index.razor file of the Demo project that we will create in this chapter will render a SurveyPrompt instance: The preceding SurveyPrompt element includes an attribute parameter named Title. This is the HTML that is rendered by NavLink for the Counter component when the Counter component is selected: The style used for the nav-link class is from Bootstrap. You should see something like this: Let's thereafter run this example and see what we got: You should see the below print in the terminal: Let's aim to understand all the building blocks next. Chapter 1: Introduction to Blazor WebAssembly, Chapter 2: Building Your First Blazor WebAssembly Application, Creating the Demo Blazor WebAssembly project, Creating a custom Blazor WebAssembly project template, Chapter 3: Building a Modal Dialog Using Templated Components, Chapter 4: Building a Local Storage Service Using JavaScript Interoperability (JS Interop), Chapter 5: Building a Weather App as a Progressive Web App (PWA), Chapter 6: Building a Shopping Cart Using Application State, Chapter 7: Building a Kanban Board Using Events, Chapter 8: Building a Task Manager Using ASP.NET Web API, Chapter 9: Building an Expense Tracker Using the EditForm Component, Leave a review - let other readers know what you think, https://github.com/PacktPublishing/Blazor-WebAssembly-by-Example/tree/main/Chapter02, https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor, https://docs.microsoft.com/en-us/visualstudio/ide/creating-project-and-item-templates, https://docs.microsoft.com/en-us/visualstudio/ide/template-parameters. The Demo project contains three pages: Home, Counter, and Fetch data: This is a screenshot of the Home page from the Demo project: The Home page is split into two sections. As you have seen, the Demo Blazor WebAssembly project created by the Blazor WebAssembly App project template includes quite a few files. The navigation menu is on the left side of the page and the body is on the right side of the page. Or will be, Blazor is still being worked on and getting faster and faster. Most components require parameters. She is the founder and president of the Dallas ASP.NET User Group. The Shared folder in the Demo project includes the shared user interface Razor components, including the MainLayout component. We have created a Demo project by using the Blazor WebAssembly App project template provided by Microsoft. This is the code in the body element of the index.html file: The highlighted div element in the preceding code loads the App component. It can be found under Shared/MainLayout.razor and looks like this: The above is telling us we have two sections sidebar and main. The following code for a component named HelloWorld includes a parameter named Text: To use the HelloWorld component, include the following HTML syntax in another component: In the preceding example, the Text attribute of the HelloWorld component is the source of the Text parameter. It is specified in the head element using the following syntax: Unlike other frameworks that you may have used, the route is not inferred from the location of its file. The wwwroot folder is the application's web root. Blazor WebAssembly is a component-driven framework. The following markup demonstrates the use of a very important pattern that you will often use when developing a Blazor WebAssembly application. Razor components are the fundamental building blocks of a Blazor WebAssembly application. Well, let's do the following: First, let's add some code to ProductDetail.razor: Next, let's place it in the Index component and then save and start up our app. Parameters can be simple types, complex types, functions, RenderFragments, or event callbacks. Blazor can run your client-side C# code directly in the browser, using WebAssembly. We created an empty project by deleting some of the components and code from the Demo project that we created in the previous section. The NavMenu component defines the navigation menu for the Demo project. Blazor is a feature of ASP.NET, the popular web development framework that extends the .NET developer platform with tools and libraries for building web apps. Blazor is a client-side web UI framework. You also have the whole reuse argument. Blazor compares the new render tree against the previous one and applies any modifications to the browser's DOM. The empty Blazor WebAssembly project will be used as the basis for a custom Blazor WebAssembly App project template. The only page in the Sample project is the Home page. They are classes that are implemented using a combination of C#, HTML, and Razor markup. Let's learn how to publish our .NET Core app to the Cloud and Azure. Let's have a look at the definition and then explain what's going on: There are three interesting things that are going on: This is done at the top of the page with this code: We are asking for an instance of type HttpClient and we name it Http. After that we see how we set up the method IncrementCount() to handle clicks on the button: Lastly, we use the Razor directive @code to write some C# code, As you can see above we declare our variable currentCount and our method IncrementCount(), looks almost doable right? Your C# code can easily call JavaScript APIs and libraries. This is the code repository for Blazor WebAssembly by Example, published by Packt. It only contains a blank Home page. Let's find out how and how you build apps with it in this article. Parameters are public properties of the component that are decorated with either the Parameter attribute or the CascadingParameter attribute. The markup includes a SurveyPrompt component. It can be hosted in IIS just like ASP.NET Web Forms apps. Razor components are ordinary C# classes and can be placed anywhere in a project. The Program.cs file is the entry point for the application. The following figure shows the project's structure: The project includes quite a few files with some of them divided into their own folders. Component parameters are used to make components dynamic. Enough theory right, you want to see some code? How would you create your own custom item template to automatically create a code-behind page for each new component? In this hosting model approach, Components and rendered output are decoupled from each other. Only the files in this folder are web-addressable. Each page will be used to demonstrate one or more features of Razor components. The index.html file is the root page of the web application. They are easy to use since they are simply a combination of HTML markup and C# code. What's left? Finally, we will separate the code block of one of the components into a separate file to demonstrate how to use the code-behind technique to separate the markup from the code. Wouldn't it be great if you could reuse a lot of your logic and models and use them on both frontend and backend? As you can see above there are different PROs and CONs and you have to decide what you can live with. Instant access to this title and 7,500+ eBooks & Videos, Constantly updated with 100+ new titles each month, Breadth and depth in over 1,000+ technologies, Creating an empty Blazor WebAssembly project template, Delete all of the markup. It uses multiple NavLink components to define the various menu options. WeatherForecast includes a Summary property and is defined in the Demo project. We will use a partial class to move the code block from the RAZOR file to a CS file. Code running in the browser executes in the same security sandbox as JavaScript frameworks. Discover the power of the C# language for both server-side and client-side web development, Use the Blazor WebAssembly App project template to build your first Blazor WebAssembly application, Use templated components and the Razor class library to build a modal dialog box, Understand how to use JavaScript with Blazor WebAssembly, Build a progressive web app (PWA) to enable native app-like performance and speed. Nice, so you are saying I as .Net Developer would probably prefer to write C# all the time instead of doing a bunch of context-switching between JavaScript and C#? However, it doesn't show component communication from child to parent. You will learn more about the different types of parameters later in this chapter. Later in this chapter, we will move the code block to a separate code-behind file. Blazor lets you build interactive web UIs using C# instead of JavaScript. We can see above we declare it as async because we use await to wait for the Task to resolve with our data. On top of that, you will be able to share code between backend and frontend given one of the hosting models. The Export Template Wizard is used to create custom project templates. The content within the curly brackets is evaluated and rendered to the output. In Blazor WebAssembly, routing is handled on the client, not on the server. For more information on dependency injection, refer to Chapter 6, Building a Shopping Cart Using Application State. If the route is not found, the NotFound template is used and LayoutView is rendered using the indicated Layout. The code block is where we add C# fields, properties, and methods to the component. The Body property gets the content to be rendered inside the layout. With the following software and hardware list you can run all code files present in the book (Chapter 1-15). Much like Angular, React and Vue it's components rendered on an HTML page: The components aren't rendered to the DOM directly but rather to a virtual/in-memory representation of the DOM called a RenderTree. Following is what you need for this book: Blazor is a game-changer, this is just the beginning. The following diagram illustrates the layout of a page as defined by the MainLayout component: The Blazor WebAssembly App project template uses Bootstrap 4 to style its pages. For this purpose, we will create a component Planets. The HTML in a Razor component is rendered by the server unchanged. We do this as follows: The Demo project is now empty.