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

In this tutorial we would build a complete application with ASP.NET and C# Programming Language. It would be a Hospital Management System – HospitalMS.

All the tools we would use would be free.

1. What You’ll Learn
2. Install the Necessary Software
3. Create a new MVC Project
4. Download and Setup the Template

 

1. What You’ll Learn

In this tutorial, you will learn the following:

• ASP.Net Core – for building .Net web applications
• C# Programming Language – you’ll learn as we go
• SQL Lite – A light-weigh SQL Server database application. We choose SQL lite because, it simply packages with your application. Therefore no database configuration is needed after deployment
• Entity Framework (EF) – Used for Object Relational Mapping(ORM)
• ASP.Net Razor – A simple markup for creating dynamic pages in ASP.Net
• MVC – Model-View-Controller architecture
• And more!

This tutorial assumes that you’re an absolute beginner in programming and so let’s dive right it!

 

2. Install the Necessary Software

We would install only two applications, which are both free.

• Download and install Visual Studio 2019 from here. Choose Professional or Community edition.
• Download and install SQL Lite for Windows Runtime from here

If you have challenges, please see the video for the steps

 

3. Create a new MVC Project

Let’s now create our project in Visual Studio. Follow the steps;

Step 1 – Open Visual Studio and start a new project

Step 2 – Ensure to choose ASP.Net Core Web App(Model-View-Controller) as shown below:

 

Step 3 – Click on Next and in the next window, give your project a name. For me I call it HospitalMS.

 

4. Download and Setup the Template

We would use a free Bootstrap template called SB Admin. You can download it from here. Now follow this steps below to set it up in your Visual Studio project.

Step 1 – Unzip the template into a local folder

Step 2 – Copy the content of the js folder from template to the wwwroot/js folder of your project

Step 3 – Copy the content of the css folder from the template to wwwroot/css folder of your project

Step 4 – Copy the assets folder (the whole folder) into the wwwroot directory

Step 5 – Open the _layout.cshtml file in your project. You can find it in the Views/Shared folder

Step 6 – Delete all the content

Step 7 – Copy the content of the layout.html from your template the paste it in the _layout.cshtml file

Step 8 – Location the <main></main> section and replace it with this code

            <main role="main" class="pb-3">
                <div class="container-fluid px-4">
                    <h1 class="mt-4">Static Navigation</h1>
                    <ol class="breadcrumb mb-4">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active">Static Navigation</li>
                    </ol>
                    @RenderBody()
                </div>
            </main>

 

At this point, we are done with the setup of the template.

You can now launch the application and check that it works. The page below should be displayed.