Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to use Blazor page components". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In Blazor applications, components are used to build user interfaces, such as pages, windows, dialog boxes, and so on.

module

Using a combination of C # and HTML tags, the Blazor component is called the Razor component, and the file name ends with (.razor).

1. As shown below, the screenshot after VisualStudio creates the Blazor application template shows the razor file defined in the Page folder.

Note: all Blazor components must begin with uppercase characters, otherwise they are invalid. ↑ as shown in the above figure

two。 About the .razor page

For each .razor page, there are two sections:

1. UI marked by Html

2. Code blocks written by C #

As shown below, a title of HTML is defined on the page, and a content and italic style of the title are defined for the tag through the C # code:

@ _ headingText@code {private string _ headingFontStyle = "italic"; private string _ headingText = "Hello, world!";}

The actual effect is as follows:

In the Html tag, you can render the C# field by using the prefix @ to the field name.

Note: @ code {} parentheses allow us to use C # to define properties, fields, methods, and various handling events that we are familiar with.

Component parameters

Have done client-side development (WPF/Winform) we should know that we often use some control elements, such as Button, TextBox, they all have their own Name, Text and other common properties, we are free to define it.

Then in razor, the component is more similar to our custom control (UserControl) or template (Template), where we can define public properties and set binding values for this component (.razor) file when it is used externally. Example:

1. First, define a component called SurveyPrompt.razor, and the code displays a title:

In @ code {}, a common property Title with [Parameter] is defined, which is called a component parameter.

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

two。 Next, in defining the Index.razor, you can use the above component and set the Title property for it:

The final interface is shown as follows:

Component multi-parameter @ attributes

Component has multiple parameters, and multiple parameters can be defined into an object dictionary. As shown below, the second Input uses @ attributes syntax association field for binding operation:

@ code {[Parameter] public string Title {get; set;} = "Hello"; [Parameter] public string Value {get; set;} = "10"; [Parameter] public Dictionary ButtonAttributes {get; set;} = new Dictionary () {{"title", "Hello"}, {"value", "10"},};} component methods define component methods

As with the component parameters, if we need to expose an event for the component, we also define the method in @ code {}, as shown below, define a button method for the button in the component and identify the [Parameter] property:

Click @ code {[Parameter] public EventCallback OnClickCallback {get; set;}} using component methods

Reference the component and bind a callback function to the button in the TestComponent component through OnClickCallBack.

This is the end of the content of "how to use Blazor Page components". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.