Opening up a Html Page When Clicking an A Tag Or Link in a Cshtml Razor Page

user_4205454 0
Viewed 220

I have a razor .net core 3 project where I am using Razor pages for the views, I will have a few html pages that will not be cshtml and I need to be able to open up a straight up html page when I click on a link or A tag

I have tried using in my _Layout.cshtml in the navbar to open the TestPage.html

<li>
 <a asp-page="/Content/TestPage">Content</a> 
</li>

This though does not generate any html when i inspect the page so nothing happens when i click the link. I do know it works if the page im looking for is a Razor page with the @page at the top

I have also tried

<li>
  <a href="/Content/TestPage">Content</a> 
</li>

this though always gives the error "Localhost page cant be found" even though its the exact path to it. I know that if i just made the html page a cshtml page it would work but in this specific instant for the project I am working on it has to be a html page and nothing is working.

The TestPage.html is under the Pages folder with the other razor views and then its in a Content Folder finally.

Any help is appreciated if you need more context feel free to ask

TestPage.html

<div>Test Text To Show</div>
razor-pages asp.net-core razor html
3 Answers

Your href is missing the .html at the end. You cannot reference a static page the same way you reference a controller endpoint. So in your case you want:

<li>
  <a href="/Content/TestPage.html">Content</a> 
</li>
user_55654060

If you want to use a razor view rather than a razor page in a razor page project,you should not add a razor view into Pages folder.You need to create a Views folder and put a Shared folder which contains _Layout.cshtml into it.Also,you need to put _ViewImports.cshtml and _ViewStart.cshtml.

Folder structure:

enter image description here

_ViewImports.cshtml:

@using {YourProjectName}
@using {YourProjectName}.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

_ViewStart.cshtml：

@{
    Layout = "_Layout";
}

And then you need to add the routing of mvc to Startup.cs:

public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddControllers();
            ...
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            
            ...

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }

Then add Controllers folder and add Content Controller and TestPage to it.

Folder structure:

enter image description here

Content Controller:

public class ContentController : Controller
    {
        public IActionResult TestPage()
        {
            return View();
        }
    }

result: enter image description here

user_135937360

I just started up a new ASPNET Core Web App (.NET 6) project from Visual Studio 2022. The newly-created project had some demo Razor cshtml pages in a Pages folder and some css and js in a wwwroot folder. It also had a Program.cs file with methods being invoked from that file that added Razor, Routing, and Static File handling.

One of the demo Razor pages was Privacy.cshtml, and I added a demo .html file, mytest.html, to the wwwroot folder. I wanted to see what it took to be able to navigate from the demo 'Privacy' Razor-page to mytest.html and back.

In Privacy.cshtml I added the following anchor tag:

<a href="~/mytest.html">Navigate to wwwroot mytest.html</a>

And in mytest.html I put the following anchor tag:

<a href="/privacy">Navigate to Privacy.cshtml</a>

This works to allow navigating back and forth between Razor and regular html.

The navigation from Razor to mytest.html works because the html file was placed in the wwwroot folder and the href value begins with "~/"

The navigation from mytest.html back to the Razor page works due to Routing having been implemented. /privacy is the Route that by default results in navigation to Privacy.cshtml.

user_14707980
Related