0

I like to create a ASP.NET MVC Application, where the pages are rendered on the server side. After reading a lot of documentation I couldn't find a way to achieve a modular way of creating components.

I found a way to create Custom Tag Helpers and a way to create Razor Components. But somehow I can't use a Razor Component in a Razor Component.

So what I basically want to do is to write some Razor components, which I can reuse in other Razor Components and so build my app modular.

For better understanding a simple example:

I want to write a component like a Button. Then I want to create a second component, called Icon.

For example: index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<Button text="Click me" link="/" iconclass="fa-solid fa-pen-to-square"></Button>

The Button component should look something like: Button.razor

<a class="btn btn-primary" href="@link">Click me <Icon iconclass="@iconclass"></Icon></a>

And the icon component like: Icon.razor

<i class="@iconclass"></i>

This should render the following HTML Code:

<a class="btn btn-primary" href="/">Click me <i class="fa-solid fa-pen-to-square"></i></a>

I achieved it, to include one component in index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

<component type="typeof(Button)" render-mode="ServerPrerendered" />

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

but when I do the same in the razor Component, it does not work.

<a class="btn btn-primary">
    Click me
    <component type="typeof(Icon)" render-mode="ServerPrerendered" />
</a>

Is there a way to achieve such a modular structure in ASP.Net?

M4SX5
  • 155
  • 1
  • 10
  • Are you talking about Html helper? – Yat Fei Leong Aug 25 '22 at 15:19
  • If there is a way to create a custom HTML Helper, which I can reuse in different Razor components, that would be a feasible solution. – M4SX5 Aug 25 '22 at 15:24
  • Of course u can create ur own html helper – Yat Fei Leong Aug 25 '22 at 15:26
  • Thank you very much for your answer. I really appreciate your help. How do I use a html helper in a rezor component? – M4SX5 Aug 25 '22 at 15:32
  • are you using MVC5 or Core? – Yat Fei Leong Aug 25 '22 at 15:40
  • I'm using Core. – M4SX5 Aug 25 '22 at 15:49
  • https://stackoverflow.com/questions/42039269/create-custom-html-helper-in-asp-net-core – Yat Fei Leong Aug 25 '22 at 16:02
  • You need to do some configuration to be able to use razor components in asp.net core razor pages project. Have you done that? This tutorial could help: https://medium.com/capgemini-microsoft-team/using-blazor-in-your-existing-asp-net-core-mvc-applications-f1b09bd66f4b – Dimitris Maragkos Aug 25 '22 at 16:16
  • Refer to the answer give by Sakib from the link I share you. Works similar to custom HTML helper. No Configuration needed. – Yat Fei Leong Aug 25 '22 at 16:19
  • Thank you very much for the links. I already did the tutorial from medium and everything worked fine. More interesting is the link from stackoverflow you posted. However, I get the following error when I insert this in my code. I don't know why: Argument of type HtmlHelper is missing. What do I have to pass as a first parameter? – M4SX5 Aug 25 '22 at 16:28
  • Are HTML Helper functions available in Core? I can not use @Html. What do I miss? – M4SX5 Aug 25 '22 at 17:09

0 Answers0