- Setting Things Up
- Getting Started
- Installing SDK
- Installing Visual Studio
- Installing Blazor Services Extensions
- Getting Started
- Create Project
- Running The Blazor Application
This is the second blog post of the Blazor series, to understand what Blazor is and how it works visit the previous post Blazor: Introduction
Blazor is an experimental project. It changes frequently and evolves rapidly. Therefore, it is possible that some content on this website is already outdated.
We need a couple of things before we can run Blazor, we will be using Visual Studio Community Edition, now let’s install the dependencies
We need to take a few steps before creating our first Blazor application:
. Install the latest Visual Studio preview with the ASP.NET and web development workload.
- Install the latest Blazor extension from the Visual Studio Marketplace. This step makes Blazor templates available to Visual Studio.
- Create a new project.
- Select ASP.NET Core Web Application. Select Next.
- Provide a project name in the Project name field or accept the default project name. Confirm the Location entry is correct or provide a location for the project. Select Create.
- . In the Create a new ASP.NET Core Web Application dialog, confirm that .NET Core and ASP.NET Core 3.0 are selected.
- For a Blazor client-side experience, choose the Blazor (client-side) template. For a Blazor server-side experience, choose the Blazor Server App template. Select Create. For information on the two Blazor hosting models, server-side and client-side, see ASP.NET Core Blazor hosting models.
- Press F5 to run the app.
Nice! You just ran your first Blazor App!
That was pretty easy, right? You can notice that the Blazor template application have three pages: Home, Counter, and Fetch data.
These three pages are implemented by the three Razor files in the Pages folder: Index.cshtml, Counter.cshtml, and FetchData.cshtml. Each of these files implements a Blazor component that’s compiled and executed client-side in the browser. Let’s see how it all works together.
Blazor apps are built using components. A component is a self-contained chunk of user interface (UI), such as a page, dialog, or form. A component includes both the HTML markup to render along with the processing logic needed to inject data or respond to UI events. Components are flexible and lightweight, and they can be nested, reused, and shared between projects.
- Select the button on the Counter page
Take a look at the implementation of the Counter component in the Counter.cshtml file:
The UI for the Counter component is defined using normal HTML. Dynamic rendering logic (for example, loops, conditionals, expressions) is added using an embedded C# syntax called Razor. The HTML markup and C# rendering logic are converted into a component class at build time. The name of the generated .NET class matches the name of the file.
Members of the component class are defined in a @code block. In the @code block, component state (properties, fields) and methods can be specified for event handling or for defining other component logic. These members can then be used as part of the component’s rendering logic and for handling events.
When the button is selected, the Counter component’s registered onclick handler is called (the IncrementCount method) and the Counter component regenerates its render tree. Blazor compares the new render tree against the previous one and applies any modifications to the browser Document Object Model (DOM). The displayed count is updated.
5. Refresh the counter page in the browser to see the changes.
After a component is defined, the component can be used to implement other components. The markup for using a component looks like an HTML tag where the name of the tag is the component type.
Adding the Razor Page to our application
You can observe the folder structure in Solution Explorer, as shown in the below image.
We will add our Razor page in the Pages folder.
Create a new file by right-clicking on the Pages folder and select New File. Name the file Nativo.cshtml. This file will contain HTML code to handle the UI of our application.
Similarly, add one more file nativo.cshtml.cs. This file will contain the C# code to handle our business logic.
Now our Pages folder will have the following structure:
Here we have included the CDN reference to the JQuery library inside the <head> section so that we can handle the DOM manipulation.
- Do not write your JS code in the .cshtml file. This is not allowed in Blazor and the compiler will throw an error. Always put your JS code in the wwwroot/index.html file.
- Always add your custom <script> tag after “<script type=”blazor-boot”></script>” in the <body> section of index.html file. This is to ensure that your custom script will execute after loading the “blazor-boot” script.
The method CallJSMethod will call our JS function “JSMethod” by using “RegisteredFunction.Invoke”. RegisteredFunction.Invoke can take two parameters — the registered JS function name and any parameter that needed to be supplied to the JS function. In this case, we are not passing any parameter to the JS function.
Here we have defined the route of the page at the top. So, in this application, if we append “/nativo” to the base URL, then we will be redirected to this page. We are also inheriting the nativo class, which is defined in the nativo.cshtml.cs file. This will allow us to use the methods defined in the nativo class.
After this, we have defined a button. This button will invoke the “CallJSMethod” method when clicked. The <p> element with id “demop” is also defined, and its value will be set by the JS function “JSMethod”.
That’s all folks