Code Murals

Introduction: Blazor is a powerful framework for building web applications using C# instead of JavaScript. It allows developers to create interactive and dynamic user interfaces with ease. One of the key features in Blazor is the EventCallback<T> pattern, which enables communication between components through events. In this blog post, we will explore how to use the EventCallback<T> pattern in Blazor by building a simple example. Creating the Event-Driven Component: Let's start by creating a Blazor component called MyComponent. This component will raise an event when a button is clicked. Here's the code for the MyComponent.razor file: MyComponent.razor < h3 > My Component < / h3 > < button @onclick = " RaiseEvent " > Raise Event < / button > @code { [ Parameter ] public EventCallback < string > EventRaised { get ; set ; } private async Task RaiseEvent ( ) { await EventRais...

This blog will show you how to take a screenshot with Blazor WebAssembly. There is currently no way to take a screenshot in Blazor. So, in this blog, I'll use the Javascript library html2canvas to capture and download the screenshot. The code below is an index.razor code. In the source code. To use Javascript functions, IJSRuntime is injected. To collect the message, I've added a textbox. This message will be captured in the screenshot. Two new buttons have been added. The first is to take a screenshot, and the second is to download the screenshot. Two methods for taking and downloading screenshots have been added to the @code area. The Javascript methods Takeshot and DownloadImg do not return any values, So I use the InvokeVoidAsync method to call them. index.razor @page   "/" @inject   IJSRuntime   jsRuntime   < h3 > Take Screenshot with Blazor WebAssembly </ h3 >   < div   id = "screenshotContainer" ...

This blog is going to explain how to create and delete elements in Blazor. Let's see step by step Step 1: Create Dynamic Element The code for creating dynamic elements is shown below. I created a class named Movie with the fields Name, ReleasedYear, and CoProduction. Inside the for loop, three textboxes were added to collect movie information. I also included a button to generate a new row of text boxes. @page   "/" < h4 > Dynamic Elements </ h4 > < style >      body  {          font-size :  12px ;     }        table  {          width :  50%   !important ;     } </ style >   < table   class = "table" >      < thead >          < tr >              < th > Movie Name </ th > ...

What RenderFragment is and how to use it in an application will be covered in this blog. The component and content are rendered with the aid of the RenderFragment. Reusing the components is made easier by the templated component. RenderFragment and RenderFragment<T> are the two different sorts of render elements. RenderFragment - It is a just a simple razor content RenderFragment<T> - It allows parameters within the razor content. The context keyword helps to set a parameter within the razor content. Let's start by looking at a simple RenderFragment example. The code for the child component is as follows. In this case, ChildContent is declared as RenderFragment. The UI segment is rendered by this RenderFragment. additionally, the @ChildContent is put within the <div> element. Child.razor < h3 >Child</ h3 > < div   class = "alert alert-primary" >      @ ChildContent </ div > @ code   {   ...