How to Create an HTML View in ASP.NET 6

In this tutorial, we will show you how to create an HTML View in ASP.NET 6. Views are a great way to keep your code organized and easy to read.

They also make it easy to switch between different rendering engines, such as Razor or HTML.

Creating a View is simple. Just create a new file in your Views folder and give it a .cshtml extension. For example, we will create a file called “sample.cshtml”.

Below you can see the folder structure and the location of Sample.cshtml

If the view belongs to the home controller, create the file under the Views/Home folder. If it belongs to other controllers create the file under Views/Shared.

In this file, you can write standard HTML code. You can also use Razor syntax to dynamically render content. For example, you can use @model to access the model data that is passed to the view:

@model MyModel

In my case, sample.cshtml looks like.

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <h1>Sample View</h1>
    </div>
</body>
</html>

Once the view page is done, I will add the following code to the Home Controller (HomeController.cs)

using Microsoft.AspNetCore.Mvc;
namespace FirstProject.Controllers {
    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            return View("Sample");

        }
    }
}

At this stage, I can go ahead and run the application and see if it works.

Related