Can we use Razor.Component in my Asp.Net MVC Core 6 ?

Question

Can we use Razor.Component in my Asp.Net MVC Core 6 ?

mehmood tekfirst 771

Hi ,

Can I use Razor.Component in my Asp.Net MVC Core 6 web application ?

Or Is It not a recommended approach ?

If we can use then please share a sample code or example ?

Accepted answer

2 additional answers

Your answer

Answer 1

Hi @mehmood tekfirst ,

Can I use Razor.Component in my Asp.Net MVC Core 6 web application ?

You can refer the following steps to use Razor component in the MVC application:

Install the Microsoft.AspNetCore.Components package via the Nuget.

Add a Components folder inside the Views/shared folder, then add a _Imports.razor component with the following code:

@using System.Net.Http    
@using Microsoft.AspNetCore.Authorization    
@using Microsoft.AspNetCore.Components.Authorization    
@using Microsoft.AspNetCore.Components.Forms    
@using Microsoft.AspNetCore.Components.Routing    
@using Microsoft.AspNetCore.Components.Web    
@using Microsoft.JSInterop     
@using System.IO

Add a DataViewComponent.razor component in the Components folder.

<div class="card-header">    

    <h3>DataComponent</h3>    
    <button @onclick="Getdata" class="btn btn-dark">Click to GetData    </button>    
</div>    
<div class="card-body">    
    <br />    
    <div class="[@](/users/na/?userId=03be225a-0000-0003-0000-000000000000)">[@](/users/na/?userId=98f56ec8-4001-0003-0000-000000000000) </div>    
</div>    

[@](/users/na/?userId=fb704bf5-ae26-44be-9143-c2fdad4838ca) {    
    [Parameter]    
    public string Data { get; set; } = string.Empty;    
    [Parameter]    
    public string style { get; set; }    
    private void Getdata()    
    {    
        Data = "I am Working";    
        style = "badge-success";     
    }     
}

Open the _Layout.cshtml page, and add the following code at the end of the page:
Open the Program.cs file, configure the Blazor service: builder.Services.AddServerSideBlazor(); and app.MapBlazorHub();.
1. In the Index.cshtml page, use the following code to call the component: <div class="card">
  @(await Html.RenderComponentAsync<WebApplication6.Views.Shared.Components.DataViewComponent>(RenderMode.ServerPrerendered,new { Data="I came from Index",style= "badge-danger" }))
  </div>
  Then running the project, the result like this:

Reference: Simple Blazor Components In .NET CORE MVC 3.1 and ASP.NET Core Razor components

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

mehmood tekfirst 771 Reputation points

2022-05-31T07:28:44.373+00:00

Oh That's great ZhiLv-MSFT.

It means We can use Razor.Component (Blazor) in Asp.Net MVC CORE 6 including Razor View and Razor Pages ?

One thing more, If I am going to develop a shareable widget for my end user applications then What could be the hurdle in it If my all components are bases on razor.component ?

Does Razor.component is equivalent to Razor.View (PartialView ) ?

Can I deliver one url to my end user applications ?

https://www.url.com/abc.js
Garrison, Jim 0 Reputation points

2024-01-23T18:31:44.4766667+00:00

Thanks so much!

Answer 2

Anonymous

Hi @mehmood tekfirst ,

It means We can use Razor.Component (Blazor) in Asp.Net MVC CORE 6 including Razor View and Razor Pages ?

Yes, we can render the Blazor component in the MVC Razor view or Razor page. Because in the above sample, we register the Blazor service in the program.cs file, so it will host the Blazor with Asp.net MVC application.

Does Razor.component is equivalent to Razor.View (PartialView ) ?

No, they are not equivalent.

Partial View: A partial view is a Razor markup file (.cshtml) without an @page directive that renders HTML output within another markup file's rendered output. Partial views mainly reduce code duplicate by maintain reusable parts of the views.

Razor components: A component is a self-contained portion of user interface (UI) with processing logic to enable dynamic behavior. Components can be nested, reused, shared among projects, and used in MVC and Razor Pages apps.

View components: View components are similar to partial views, but they're much more powerful. View components don't use model binding, they depend on the data passed when calling the view component.

If I am going to develop a shareable widget for my end user applications then What could be the hurdle in it If my all components are bases on razor.component ?
Can I deliver one url to my end user applications ?
https://www.url.com/abc.js

From your description and the widget url, it seems that you want create a JQuery plugin/widget, then after publish the JQuery plugin, you can add the plugin reference and use them in the view page, such as the JQuery data table or JQuery UI.

In Asp.net core, if you want to share components or views in the different projects, you could try to create a Razor class library (RCL). Refer the following links:

Create reusable UI using the Razor class library project in ASP.NET Core

Consume ASP.NET Core Razor components from a Razor class library (RCL)

Razor Class Library - Create Reusable UI In ASP.NET Core.

Then, after creating the RCL, in another project, you can add the RCL reference, and then consume the components/views/pages from the RCL.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

mehmood tekfirst 771 Reputation points

2022-06-01T07:38:02.367+00:00
I couldn't understand what you understand about the url https://www.url.com/abc.js.

I just want to know can I use razor.component in razor.view or razor.page ?

If yes then how can I deliver it to my customers to implement it ?

It doesn't matter the Url could be either

https://www.url.com/abc.js

or

https://www.url.com/abc

without js.

the purpose of this url is to embed this widget into some application (html source).

I can create RCL or without it, It doesn't matter.

My objective is to use it in some web applications.
Anonymous

2022-06-01T07:50:15.94+00:00

I just want to know can I use razor.component in razor.view or razor.page ?

Yes, you can use Blazor component in Razor view or Razor Page.

If yes then how can I deliver it to my customers to implement it ?

Refer the above links about the Razor class library (RCL). You can create a RCL and add the components, then in the customers' project, add the RCL reference and use the components.
mehmood tekfirst 771 Reputation points

2022-06-01T07:56:46.113+00:00

Refer the above links about the Razor class library (RCL). You can create a RCL and add the components, then in the customers' project, add the RCL reference and use the components.

Ok I 'll do it.

Just want to confirm one thing again .

Can we use blazor component without index.html or we add blazor plugin through Js or do we need it if we use it through RCL ?
Anonymous

2022-06-01T08:38:12.88+00:00

Can we use blazor component without index.html

Do you mean using the Blazor component as a standalone page? If that is the case, you need to add the @page directive, then use a navigate link to show the page.

we add blazor plugin through Js do we need it if we use it through RCL ?

We need to use it via RCL, instead of via the JS.
mehmood tekfirst 771 Reputation points

2022-06-01T10:10:45.15+00:00

Thank you ZhiLv, I try for it. I am assuming I can add Razor.Component in RCL as well ?
mehmood tekfirst 771 Reputation points

2022-06-01T11:36:02.747+00:00

ZhiLv, Does it better to use Razor.Component in Razor Component Library or as your suggested above mix (razor component and razor view/page) approach ?

There are a lot of questions in mind now. Can you share some example by Microsoft sample ?

Can I use it plain html (with JavaScript) for utilizing Razor Component Library If my client is not using DotNet tools ?
Anonymous

2022-06-02T01:59:10.177+00:00

Does it better to use Razor.Component in Razor Component Library or as your suggested above mix (razor component and razor view/page) approach ?

Both of them are OK, it depends on your choice.

There are a lot of questions in mind now. Can you share some example by Microsoft sample ?

About the RCL sample, you could View or download sample code from here.

Can I use it plain html (with JavaScript) for utilizing Razor Component Library If my client is not using DotNet tools ?

I found you have post a new thread about this issue, I will follow it up to check your code on the new thread.
mehmood tekfirst 771 Reputation points

2022-06-02T10:28:04.873+00:00

thank you

Answer 3

Bruce (SqlWork.com) 78,006 Volunteer Moderator

depend on what you are asking

razor components are used to build Blazor applications, which can easily be hosted by a asp.net core 6. If you build a client blazor, it can make webapi to the mvc server.

if you meant if you could use razor components with razor views or razor pages, then no. They are only for building blazor applications.

mehmood tekfirst 771 Reputation points

2022-05-31T07:29:54.81+00:00

Bruce, ZhiLv is saying , we can use Razor.Component with Razor.View OR Razor.Page
Bruce (SqlWork.com) 78,006 Reputation points Volunteer Moderator

2022-05-31T19:21:56.027+00:00

his example is a razor page hosting a blazor server app directly instead of the default blazor project having an index.html

the razor component opens signal/r hub on the server to render the component. it will also send it captured events to the server, to re-render,
mehmood tekfirst 771 Reputation points

2022-06-01T07:43:16.9+00:00

his example is a razor page hosting a blazor server app directly instead of the default blazor project having an index.html

the razor component opens signal/r hub on the server to render the component. it will also send it captured events to the server, to re-render,

Can't we use without index.html or we add blazor plugin through Js ?

It doesn't matter the Url could be either

https://www.url.com/abc.js

or

https://www.url.com/abc

without js.

the purpose of this url is to embed this widget into some application (html source).

My objective is to use it in some web applications.

Share via

Can we use Razor.Component in my Asp.Net MVC Core 6 ?

2 additional answers

Your answer