Build a Complete App with ASP.Net, C#, SQL Lite – Part 6

In this part, we would plan the navigation of the application. We also setup the navigation sidebar on the left.

For this part, we would mainly be working within the _Layout.cshtml file. So open in and lets take a look.

  1. Setup the Home Page
  2. Plan and Create the Navigation

 

1. Setup the Home Page

Follow the steps below to setup the home  page

Step 1 – Open the index.htm file in the template folder we downloaded in Part 1.

Step 2 – Copy the content of the main section without the <main></main> tags as shown below:

Main section of the Index Page
Main section of the Index Page

Step 3 – Open the home.cshtm file from the Views folder and paste the content you copied below the @ViewData line

Step 4 – Copy all the script tag codes as well and paste it at the end of the file. The content of the index.cshtml file is now as shown below:

New Content of the index.cshtml file
New Content of the index.cshtml file

Now you can launch the application and visit the home page to check that everything is ok. I recommend you watch the video if you have any challenges. Or maybe you can also mention you challenge in a comment.

Step 5 – Please delete the first two scripts. The ones shown below, else some features may not work

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>

 

2. Plan and Create the Navigation

This is important because you need to plan the navigation of your application such that users would be able to get to all parts of the application.

I propose the navigation structure below:

Navigation Sidebar for HospitalMS
Navigation Sidebar for HospitalMS

 

Now that we have a clear design of the navigation, we would have to implement it.

So open the _Layout.cshtml file and adjust the code to reflect the navigation structure we have. For instance, the code below is a snippet for the Patients Record section.

<div class="sb-sidenav-menu-heading">Patient Records</div>
<a class="nav-link" href="/patients/create">
    <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
    New Patients
</a>
<a class="nav-link" href="/patients">
    <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
    Patient List
</a>

 

So follow the same procedure the create the rest of it. In the next part we would see how to add images to the tables.

Admin bar avatar

kindsonthegenius

Kindson Munonye is currently completing his doctoral program in Software Engineering in Budapest University of Technology and Economics

View all posts by kindsonthegenius →

Leave a Reply

Your email address will not be published. Required fields are marked *