{"id":1977,"date":"2021-06-14T12:00:00","date_gmt":"2021-06-14T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/build-a-complete-app-with-asp-net-c-part-1\/"},"modified":"2026-07-05T03:25:39","modified_gmt":"2026-07-05T01:25:39","slug":"build-a-complete-app-with-asp-net-c-part-1","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/build-a-complete-app-with-asp-net-c-part-1\/","title":{"rendered":"Build a Complete App with ASP.Net, C#, SQL Lite \u2013 Part 1"},"content":{"rendered":"<p>In this tutorial we would build a complete application with ASP.NET and C# Programming Language. It would be a Hospital Management System &#8211; HospitalMS.<\/p>\n<p>All the tools we would use would be free.<\/p>\n<ol>\n<li><a href=\"#t1\">What You&#8217;ll Learn<\/a><\/li>\n<li><a href=\"#t2\">Install the Necessary Software<\/a><\/li>\n<li><a href=\"#t3\">Create a new MVC Project<\/a><\/li>\n<li><a href=\"#t4\">Download and Setup the Template<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h5 id=\"t1\">1. What You&#8217;ll Learn<\/h5>\n<p>In this tutorial, you will learn the following:<\/p>\n<ul>\n<li>ASP.Net Core &#8211; for building .Net web applications<\/li>\n<li>C# Programming Language &#8211; you&#8217;ll learn as we go<\/li>\n<li>SQL Lite &#8211; 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<\/li>\n<li>Entity Framework (EF) &#8211; Used for Object Relational Mapping(ORM)<\/li>\n<li>ASP.Net Razor &#8211; A simple markup for creating dynamic pages in ASP.Net<\/li>\n<li>MVC &#8211; Model-View-Controller architecture<\/li>\n<li>And more!<\/li>\n<\/ul>\n<p>This tutorial assumes that you&#8217;re an absolute beginner in programming and so let&#8217;s dive right it!<\/p>\n<p>&nbsp;<\/p>\n<p><strong id=\"t2\">2. Install the Necessary Software<\/strong><\/p>\n<p>We would install only two applications, which are both free.<\/p>\n<ul>\n<li>Download and install <a href=\"https:\/\/visualstudio.microsoft.com\/vs\/\" target=\"_blank\" rel=\"noopener\">Visual Studio 2019 from here<\/a>. Choose Professional or Community edition.<\/li>\n<li>Download and install <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=SQLiteDevelopmentTeam.SQLiteforWindowsRuntime\" target=\"_blank\" rel=\"noopener\">SQL Lite for Windows Runtime from here<\/a><\/li>\n<\/ul>\n<p>If you have challenges, please see the video for the steps<\/p>\n<p>&nbsp;<\/p>\n<p><strong id=\"t3\">3. Create a new MVC Project<\/strong><\/p>\n<p>Let&#8217;s now create our project in Visual Studio. Follow the steps;<\/p>\n<p><strong>Step 1<\/strong> &#8211; Open Visual Studio and start a new project<\/p>\n<p><strong>Step 2<\/strong> &#8211; Ensure to choose ASP.Net Core Web App(Model-View-Controller) as shown below:<\/p>\n<figure id=\"attachment_14660\" aria-describedby=\"caption-attachment-14660\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/ASP.Net-Core-Web-AppModel-View-Controller.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-14660\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/ASP.Net-Core-Web-AppModel-View-Controller-300x194.jpg\" alt=\"ASP.Net Core Web App(Model-View-Controller)\" width=\"300\" height=\"194\" srcset=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/ASP.Net-Core-Web-AppModel-View-Controller-300x194.jpg 300w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/ASP.Net-Core-Web-AppModel-View-Controller-1024x662.jpg 1024w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/ASP.Net-Core-Web-AppModel-View-Controller-768x497.jpg 768w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/ASP.Net-Core-Web-AppModel-View-Controller-600x388.jpg 600w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/ASP.Net-Core-Web-AppModel-View-Controller.jpg 1461w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-14660\" class=\"wp-caption-text\">ASP.Net Core Web App(Model-View-Controller)<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p><strong>Step 3<\/strong> &#8211; Click on Next and in the next window, give your project a name. For me I call it HospitalMS.<\/p>\n<p>&nbsp;<\/p>\n<p><strong id=\"t4\">4. Download and Setup the Template<\/strong><\/p>\n<p>We would use a free Bootstrap template called SB Admin. <a href=\"https:\/\/startbootstrap.com\/template\/sb-admin\" target=\"_blank\" rel=\"noopener\">You can download it from here<\/a>. Now follow this steps below to set it up in your Visual Studio project.<\/p>\n<p><strong>Step 1<\/strong> &#8211; Unzip the template into a local folder<\/p>\n<p><strong>Step 2<\/strong> &#8211; Copy the content of the js folder from template to the wwwroot\/js folder of your project<\/p>\n<p><strong>Step 3<\/strong> &#8211; Copy the content of the css folder from the template to wwwroot\/css folder of your project<\/p>\n<p><strong>Step 4<\/strong> &#8211; Copy the assets folder (the whole folder) into the wwwroot directory<\/p>\n<p><strong>Step 5<\/strong> &#8211; Open the _layout.cshtml file in your project. You can find it in the Views\/Shared folder<\/p>\n<p><strong>Step 6<\/strong> &#8211; Delete all the content<\/p>\n<p><strong>Step 7<\/strong> &#8211; Copy the content of the layout.html from your template the paste it in the _layout.cshtml file<\/p>\n<p><strong>Step 8<\/strong> &#8211; Location the &lt;main&gt;&lt;\/main&gt; section and replace it with this code<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">            <span style=\"color: #007700;\">&lt;main<\/span> <span style=\"color: #0000cc;\">role=<\/span><span style=\"background-color: #fff0f0;\">\"main\"<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"pb-3\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n                <span style=\"color: #007700;\">&lt;div<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"container-fluid px-4\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n                    <span style=\"color: #007700;\">&lt;h1<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"mt-4\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Static Navigation<span style=\"color: #007700;\">&lt;\/h1&gt;<\/span>\r\n                    <span style=\"color: #007700;\">&lt;ol<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"breadcrumb mb-4\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n                        <span style=\"color: #007700;\">&lt;li<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"breadcrumb-item\"<\/span><span style=\"color: #007700;\">&gt;&lt;a<\/span> <span style=\"color: #0000cc;\">href=<\/span><span style=\"background-color: #fff0f0;\">\"index.html\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Dashboard<span style=\"color: #007700;\">&lt;\/a&gt;&lt;\/li&gt;<\/span>\r\n                        <span style=\"color: #007700;\">&lt;li<\/span> <span style=\"color: #0000cc;\">class=<\/span><span style=\"background-color: #fff0f0;\">\"breadcrumb-item active\"<\/span><span style=\"color: #007700;\">&gt;<\/span>Static Navigation<span style=\"color: #007700;\">&lt;\/li&gt;<\/span>\r\n                    <span style=\"color: #007700;\">&lt;\/ol&gt;<\/span>\r\n                    @RenderBody()\r\n                <span style=\"color: #007700;\">&lt;\/div&gt;<\/span>\r\n            <span style=\"color: #007700;\">&lt;\/main&gt;<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>At this point, we are done with the setup of the template.<\/p>\n<p>You can now launch the application and check that it works. The page below should be displayed.<\/p>\n<figure id=\"attachment_14658\" aria-describedby=\"caption-attachment-14658\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-14658\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup-300x185.jpg\" alt=\"Bootstrap Layout Successful setup\" width=\"300\" height=\"185\" srcset=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup-300x185.jpg 300w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup-1024x631.jpg 1024w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup-768x473.jpg 768w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup-1536x946.jpg 1536w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup-600x369.jpg 600w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2021\/06\/Layout-Successful-setup.jpg 1598w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption id=\"caption-attachment-14658\" class=\"wp-caption-text\">Bootstrap Layout Successful setup<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial we would build a complete application with ASP.NET and C# Programming Language. It would be a Hospital Management System &#8211; HospitalMS. All &hellip; <\/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":[414],"tags":[],"class_list":["post-1977","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1977","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=1977"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1977\/revisions"}],"predecessor-version":[{"id":2145,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1977\/revisions\/2145"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1977"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1977"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1977"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}