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:

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:

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:

 

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.