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

Question

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 ?

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:

1. Install the Microsoft.AspNetCore.Components package via the Nuget.
2. 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    
   

3. 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";     
       }     
   }    
   

4. Open the _Layout.cshtml page, and add the following code at the end of the page:
   
5. Open the Program.cs file, configure the Blazor service: builder.Services.AddServerSideBlazor(); and app.MapBlazorHub();.
   6. 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

Answer 2

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

Answer 3

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.