0% found this document useful (0 votes)
1 views3 pages

Razorpage 1

Download as txt, pdf, or txt
Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1/ 3

Create the MVC Project

dotnet new mvc -o EmployeePortal


Create the Layout File (_Layout.cshtml)
Now, create a shared _Layout.cshtml file that will be used by all the pages in your
application.

In the Views folder, create a folder called Shared (if it doesn’t exist already).

Inside the Shared folder, create a new file named _Layout.cshtml.


@{
Layout = null; // Layout is set in the controller
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Management Portal</title>

<!-- Bootstrap for styling -->


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/
bootstrap.min.css" rel="stylesheet">

<style>
.navbar {
margin-bottom: 20px;
}
.container {
min-height: 80vh;
}
footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>

<!-- Navbar with links to the portal pages -->


<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Employee Portal</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page"
href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Employees">Employees</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Departments">Departments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Employees/Create">Add
Employee</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Account/Logout">Logout</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Main content section -->


<div class="container">
@RenderBody() <!-- This is where the content from the individual pages will
be injected -->
</div>

<!-- Footer -->


<footer>
<p>&copy; @DateTime.Now.Year - Employee Management Portal</p>
</footer>

<!-- Bootstrap JS and Popper.js -->


<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js">
</script>

</body>
</html>

Set the Layout in the _ViewStart.cshtml


@{
Layout = "_Layout";
}

Create a Sample Home View


n the Views/Home folder, create a file named Index.cshtml.

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

<h1>Welcome to the Employee Management Portal</h1>


<p>This portal allows you to manage employees, departments, and more.</p>
Add Some Example Controllers and Views

using Microsoft.AspNetCore.Mvc;

namespace EmployeePortal.Controllers
{
public class EmployeeController : Controller
{
public IActionResult Index()
{
return View(); // Displays the list of employees
}

public IActionResult Create()


{
return View(); // Displays the form to add a new employee
}
}
}

You might also like