The following example shows how to include multiple @page parameters: In the preceding code, the first @page directive allows navigation to the component without a parameter and the second @page directive allows a route parameter. Also, Razor components use the RAZOR extension rather than the CSHTML extension that is used by Razor Pages. If you do not handle the case when the value of forecasts is null, the framework will throw an exception. Route constraints are used to ensure that a route parameter is of the required datatype. That means that when the page first loads, the data will be null. Let's cover the pros and cons of each hosting model. In the Server-side approach, the components are run on the Server and not client-side like the former hosting model. If a value for text is provided, it is assigned to the Text property of the component. You'll start by building simple standalone web applications and progress to developing more advanced hosted web applications with SQL Server backends. Each of these components may be used one or more times by other Razor components. Razor syntax is easy to learn if you already know C#. Here we are actively fetching the data. We have created a new Sample project by using our custom project template. Get productive fast with re-usable UI components from top component vendors like Telerik, DevExpress, Syncfusion, Radzen, Infragistics, GrapeCity, jQWidgets, and others. You have created the Demo Blazor WebAssembly project. In the preceding example, we placed the Demo project into the E:\Blazor folder. The ComponentBase class includes both asynchronous and synchronous methods used to manage the life cycle of a component. The Body property gets the content to be rendered inside the layout. As you navigate in the browser, Blazor intercepts that navigation and renders the component with the matching route. The content within the curly brackets is evaluated and rendered to the output. The source code for this chapter is available in the following GitHub repository: https://github.com/PacktPublishing/Blazor-WebAssembly-by-Example/tree/main/Chapter02. Your browser should now look like this: One usually differ between smart and dumb components. On top of that, you will be able to share code between backend and frontend given one of the hosting models. Deployment, you can use GitHub Pages or static site hosting. 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. What are the advantages of using a custom project template? However, it also contains a C# code block: In the preceding code block, a private currentCount variable is used to hold the number of clicks. Visual Studio and Visual Studio Code provide a great Blazor development experience on Windows, Linux, and macOS. Sign up to our emails for regular updates, bespoke offers, exclusive Alternatively, Blazor can run your client logic on the server. We can see above we declare it as async because we use await to wait for the Task to resolve with our data. 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. Most of the directives in Razor can be used in a Blazor WebAssembly application. For that reason, you need to test for the null case before attempting to process the data. Love to watch videos? The answer via a function. These are the Razor directives that are used in Blazor, in alphabetical order: This is HTML with Razor syntax. Your project can include multiple _Imports.razor files. 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. Each page will be used to demonstrate one or more features of Razor components. 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? The wwwroot folder contains a collection of Cascading Style Sheets (CSS) files, a sample data file, an icon file, and index.html. Since this is not a valid route, you will be directed to the NotFound content defined in the App component: If you need to navigate to a URL in code, you should use NavigationManager. The only technical requirement for using Blazor WebAssembly is a browser that supports WebAssembly, which, as of today, all modern browsers do. We will also learn how to use Razor syntax to combine C# code with HTML markup. 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. Razor syntax uses both inline expressions and control structures. The answer is: From the above we see we call InvokeAsync() with a string argument being the title of the component and that's how it's done. Blazor is a component centric framework. 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. Tooltip: Transpilation is the process of converting code written in one programming language to another. 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. sidebar renders a navigation menu using the component NavMenu and main renders the content using @Body. After we updated some of the files in the custom project template, we copied them into the ProjectTemplates folder. This is the section of the NavMenu component that references the NavLink components used for the project's navigation: The NavLink component is defined in the Microsoft.AspNetCore.Components.Routing namespace. Razor components must start with a capital letter. You said, instead of JavaScript, what do you mean? This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. Add the following code to the top of the code block to define the new parameter: Add the highlighted text to the markup of the, Add the following markup to the bottom of the, Copy all of the code in the code block to the partial. We will add a Counter component to the Home page. What types of loops are supported by Razor syntax? Let's find out how and how you build apps with it in this article. C# code is case sensitive and strings must be enclosed in quotation marks. 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. Your C# code can easily call JavaScript APIs and libraries. So do we. Based on what you told me about WebAssembly, sounds like it could be real fast? The App component is defined in the App.razor file: The App component is the root component of a Blazor WebAssembly application. They are easy to use since they are simply a combination of HTML markup and C# code. 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. Finally, we used the custom project template to create the Sample project. The navigation menu is on the left side of the page and the body is on the right side of the page. They are classes that are implemented using a combination of C#, HTML, and Razor markup. The body element of the index.html file includes two div elements and a reference to the blazor.webassembly.js file. 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. Each of these components includes an @page directive that is used to route the user to the page. 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. You also have the whole reuse argument. She has a BS in computer science and engineering from the Massachusetts Institute of Technology (MIT) and an MBA from Carnegie Mellon University (CMU). 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]. The Shared folder in the Demo project includes the shared user interface Razor components, including the MainLayout component. Each time the button on the Counter page is clicked, the counter is incremented without a page refresh. In this hosting model approach, Components and rendered output are decoupled from each other. . Client UI events are sent back to the server using SignalR - a real-time messaging framework. Build cross-platform native client apps with .NET MAUI and Blazor. It can be found under Shared/MainLayout.razor and looks like this: The above is telling us we have two sections sidebar and main. Awesome Blazor provides a great community-maintained list of Blazor resources. 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? Similar to the Index component, it contains an @page directive that is used for routing and some markup. In this chapter, we will cover the following topics: To complete this project, you need to have Visual Studio 2019 installed on your PC. Can the Blazor App project template be used to create both Blazor WebAssembly applications and Blazor Server applications? For example, Chapter02. 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. The following markup demonstrates the use of a very important pattern that you will often use when developing a Blazor WebAssembly application. Since Razor components are regular C# classes, they support partial classes. What do you get with a Packt Subscription? When a change happens a diff is calculated and is applied to the DOM like below image: One of the first things we need to realize about Blazor is that it can be hosted in different places.
Sitemap 28
Share