{"id":1982,"date":"2021-06-15T12:00:00","date_gmt":"2021-06-15T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/build-a-complete-app-with-asp-net-c-sql-lite-part-6\/"},"modified":"2026-07-05T03:25:52","modified_gmt":"2026-07-05T01:25:52","slug":"build-a-complete-app-with-asp-net-c-sql-lite-part-6","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/build-a-complete-app-with-asp-net-c-sql-lite-part-6\/","title":{"rendered":"Build a Complete App with ASP.Net, C#, SQL Lite \u2013 Part 6"},"content":{"rendered":"

In this part, we would plan the navigation of the application. We also setup the navigation sidebar on the left.<\/p>\n

For this part, we would mainly be working within the _Layout.cshtml file. So open in and lets take a look.<\/p>\n

    \n
  1. Setup the Home Page<\/a><\/li>\n
  2. Plan and Create the Navigation<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Setup the Home Page<\/strong><\/h5>\n

    Follow the steps below to setup the home\u00a0 page<\/p>\n

    Step 1<\/strong> – Open the index.htm file in the template folder we downloaded in Part 1<\/a>.<\/p>\n

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

    \"Main<\/a>
    Main section of the Index Page<\/figcaption><\/figure>\n

    Step 3<\/strong> – Open the home.cshtm file from the Views folder and paste the content you copied below the @ViewData line<\/p>\n

    Step 4<\/strong> – 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:<\/p>\n

    \"New<\/a>
    New Content of the index.cshtml file<\/figcaption><\/figure>\n

    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.<\/p>\n

    Step 5<\/strong> – Please delete the first two scripts. The ones shown below, else some features may not work<\/p>\n

    <script <\/span>src=<\/span>\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.1\/dist\/js\/bootstrap.bundle.min.js\"<\/span> crossorigin=<\/span>\"anonymous\"<\/span>><\/script><\/span>\r\n<script <\/span>src=<\/span>\"js\/scripts.js\"<\/span>><\/script><\/span>\r\n<\/pre>\n
     <\/p>\n
    2. Plan and Create the Navigation<\/strong><\/h5>\n
    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.<\/p>\n
    I propose the navigation structure below:<\/p>\n
    \"Navigation<\/a>
    Navigation Sidebar for HospitalMS<\/figcaption><\/figure>\n
     <\/p>\n
    Now that we have a clear design of the navigation, we would have to implement it.<\/p>\n
    So open the _Layout.cshtml<\/em> 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.<\/p>\n
    <div<\/span> class=<\/span>\"sb-sidenav-menu-heading\"<\/span>><\/span>Patient Records<\/div><\/span>\r\n<a<\/span> class=<\/span>\"nav-link\"<\/span> href=<\/span>\"\/patients\/create\"<\/span>><\/span>\r\n    <div<\/span> class=<\/span>\"sb-nav-link-icon\"<\/span>><i<\/span> class=<\/span>\"fas fa-tachometer-alt\"<\/span>><\/i><\/div><\/span>\r\n    New Patients\r\n<\/a><\/span>\r\n<a<\/span> class=<\/span>\"nav-link\"<\/span> href=<\/span>\"\/patients\"<\/span>><\/span>\r\n    <div<\/span> class=<\/span>\"sb-nav-link-icon\"<\/span>><i<\/span> class=<\/span>\"fas fa-tachometer-alt\"<\/span>><\/i><\/div><\/span>\r\n    Patient List\r\n<\/a><\/span>\r\n<\/pre>\n
     <\/p>\n
    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.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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 … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[311],"tags":[],"class_list":["post-1982","post","type-post","status-publish","format-standard","hentry","category-sql"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1982","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1982"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1982\/revisions"}],"predecessor-version":[{"id":2150,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1982\/revisions\/2150"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}