Add blazor component tot razor page

[Jeroen Jansen]

Hello,

I would like to use blazor component on razor pages using the component taghelper. I can get it working when I wrap the syncfusion component inside another razor(!) page.

For example my file "test.razor":

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime"></SfCalendar>

@code {

}

This i can put on my "Index.cshtml" like this:

<component type="typeof(mgo.Pages.Components.Test)" render-mode="ServerPrerendered" />

However, I would like to use the component directly on the page "Index.cshtml" like this:

<component type="typeof(Syncfusion.Blazor.Calendars.SfCalendar"   param-DropVal="@DateTime.Now" render-mode="ServerPrerendered" />

Is that possible and what is the correct syntax for naming and passing parameters?

Thank you.

Jeroen Jansen

[Sureshkumar P]

Hi Jeroen, 

 

Greetings from Syncfusion support. 

 

 

Based on your shared information, we suspect that you want to render the custom component in calendar component. please refer the below code example. 

 

Parent component [Textboxcomponent.razor] 

@typeparam TVal; 

 

<SfCalendar TValue="TVal" @bind-Value="@CalValue"> 

</SfCalendar> 

 

@code { 

    [Parameter] 

    public TVal CalValue { get; set; } 

    [Parameter] 

    public EventCallback<TVal> CalValueChanged { get; set; } 

} 

 

 

 

Child component [Index.razor] 

<TextBoxComponent TVal="DateTime?" @bind-CalValue="@value"></TextBoxComponent> 

            

 

@code { 

        public DateTime? value { get; set; } 

} 

 

 

We have prepared the sample based on your shared information. please find the sample here: https://www.syncfusion.com/downloads/support/forum/159375/ze/CustomComponentCalendar1789626288  

 

Regards, 

Sureshkumar P 

[Jeroen Jansen]

Hi Sureshkumar,

Sorry, I did not explain my question clearly enough.

I want to use Blazor components on a Razor cshtml page. Normally this can be done using a component tag-helper like this:

<component type="typeof(mycomponentname)" param-IntialValue="x" param-OtherParam="y" render-mode="ServerPrerendered" />

Can any of Syncfusion Blazor components be called this way or can I use your components only on a page with blazor extension?   

<component type="typeof(Syncfusion.Blazor.Calendars.SfCalendar)" render-mode="ServerPrerendered" />  on index.cshtml does not work.

Kind regards,

Jeroen

[Sureshkumar P]

Hi Jeroen, 

 

Thanks for your information. 

 

We can run the Syncfusion blazor components as like your mentioned component tag-helper like below mentioned 

 

[Person.razor]: 

@using Microsoft.AspNetCore.Components 

@using Syncfusion.Blazor.Calendars 

 

<SfCalendar TValue="DateTime?"> 

</SfCalendar> 

 

 

 

[index.cshtml] 

@model WebApplication1.Components.Pages.Person  

@{ 

    ViewData["Title"] = "Home Page"; 

} 

 

<component type="typeof(WebApplication1.Components.Pages.Person)" render-mode="ServerPrerendered" /> 

 

@section scripts{  

    <script src="_framework/blazor.server.js"></script> 

} 

 

 

 

We have created the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/159375/ze/coreRazorComponentCalendar-1844074382  

 

Regards, 

Sureshkumar P 

[horacioj]

Hello,

Is this solution (about integrating Blazor components in razor pages) still valid and still the recommended implementation for the current .NET 7?

Thanks!

[UdhayaKumar Duraisamy]

In .NET 7, you can use custom elements to integrate Blazor components into your Razor pages. Custom elements are a way to create your own HTML tags that can be used in HTML pages. You can use them to wrap your Blazor components and include them in your razor pages.

To create a custom element for your Blazor component, you can follow the steps outlined in the link you provided: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-7.0#blazor-custom-elements.

This tutorial provides guidance on creating and using custom elements in a Blazor app, including details on Razor syntax, component naming, namespaces, and component parameters

[horacioj]

I think "custom elements" are for something else. i.e. "Use the custom element with any web framework. For example, the preceding my-counter custom HTML element that renders the app's Counter component is used in a React app with the following markup: <my-counter></my-counter>

What I'm looking for is the best/current/recommended way to integrate Blazor components in a standards server-side asp.net razor pages project.

Thank you

[horacioj]

OK. Custom elements should work on razor pages too. I'll try this example: https://github.com/khalidabuhakmeh/BlazorCustomElementsSample

" The purpose of this repository is to show Blazor Custom Elements in action alongside ASP.NET Core Razor Pages. "

[Joshna Lingala Uthama Reddy Lingala]

Hi Horacioj,

Thanks for the update.

Please get back to us if you need further assistance.

Regards,

Joshna L