Search code examples
c#asp.net-core.net-corerazorasp.net-core-mvc

Define a shared .cshtml file and render it on a sub-page in ASP.NET Core MVC


I have defined a very simple form on /Shared/Forms/_ContactForm.cshtml, let's say it's just a stack of labels like this (whole file):

@{
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ul>
}

My objective is to reuse that form on my Contact.cshtml sub-page and at the foot of all my personal projects sub-pages

I'm editing my Contact.cshtml file and trying to use @RenderPage() in order to display my form, by using this (whole file):

@{
    ViewData["Title"] = "Contact";
}
<h1>@ViewData["Title"]</h1>

<p>Contact with me!</p>

<body>
    @RenderPage("~/Shared/Forms/_ContactForm.cshtml")
</body>

But I get an error Error CS0103: Name 'RenderPage' doesn't exist in the current context

I have tried to change the whole Contact.cshtml file by starting it with as suggested in that Microsoft guide https://learn.microsoft.com/en-us/aspnet/web-pages/overview/ui-layouts-and-themes/3-creating-a-consistent-look and starting it with the <!DOCTYPE html>. But if I do that I loose the tab section defined in my _Layout.cshtml and it is cumbersome to add all elements again manually. I'm sure I'm doing it bad since I have just started with ASP.NET Core MVC (my last experience was Xamarin, first time programming webapps...), so any advice or link would be very helpful for me.

EDIT: Also tried like suggested in comments

<body>
    <partial>
        @Html.RenderPartialAsync("~/Shared/Forms/_ContactForm.cshtml")
    </partial>
</body>

It compiles but just shows this as text: Running result


Solution

  • You can do it like this:

    <body>
        <partial>
            @await Html.PartialAsync("~/Views/Shared/Forms/_ContactForm.cshtml")
        </partial>
    </body>
    

    Or use the name attribute of the partial tag directly:

    <body>
        <partial name="~/Views/Shared/Forms/_ContactForm.cshtml" />
    </body>
    

    Please note its path.

    Test Result:

    enter image description here

    For more detail, you can refer to this document.