How to create my first ASP WebApp with .NET Framework 4.7.2 and how to deploy to Docker Desktop (in your local laptop)
We run Visual Studio 2022 Community Edition and we create a new project
We select the project template
We input the location and the project name
We chose the new project main features
App_Data
Used to store application data files like local databases, XML files, etc.
It's a secure folder that is not accessible directly via URLs.
App_Start
Contains class files which are executed at application start.
Common files include RouteConfig.cs for routing configuration, BundleConfig.cs for bundling and minification of CSS and JS files, etc.
Content
Houses CSS files and other static content like images.
Controllers
Contains Controller classes.
Controllers respond to HTTP requests and execute appropriate actions.
Models
Contains classes representing data models.
These models often correspond to database tables.
Scripts
Stores JavaScript files and libraries, such as jQuery, Bootstrap JS, etc.
Views
Holds the Razor view files for the application. It's typically structured into subfolders corresponding to the controllers.
_ViewStart.cshtml - Contains common view settings; executed before the rendering of each view.
_Layout.cshtml - Common layout file (like a template) used by other views.
Fonts
(Optional) For custom fonts used in your application.
bin
Contains the compiled assemblies (DLLs) including your application’s code.
Global.asax
Allows you to write code that responds to system-level events, such as application start and end.
Web.config
The main configuration file for the application. It includes settings for databases, security configurations, custom error pages, etc.
Package.config
Lists the NuGet packages used in the project.
Other Files and Folders
Properties
Contains the AssemblyInfo.cs file which includes metadata like version number, company name, etc.
.csproj file
The project file which includes references to all the other files and folders in your project. It's used by Visual Studio to build your application.
Solution (.sln) file
If your application is part of a larger solution, this file ties together the various projects.
This is the workflow summary:
Global.asax -> App_Start/RouterConfig.cs -> https://localhost:44327/Home/Index -> Call Index action inside the Home controller Controllers/HomeController.cs -> Call Home view (Views/Home/Index.cshtml) -> the Index.cshtl view is Rendered inside the Views/Shared/_Layout.cshtml as defined in _ViewStart.cshtml
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace WebApplication1
{
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
}
The Application_Start method is a special method in ASP.NET.
It is automatically called by the framework when the web application starts.
This method is typically used to perform application-level initializations, such as configuring routes, filters, and bundles:
AreaRegistration.RegisterAllAreas()
This line registers all areas in the application. Areas are an ASP.NET MVC feature that helps organize a large application into smaller functional groupings.
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)
This line registers global filters. Filters in ASP.NET MVC can be used for cross-cutting concerns like logging, exception handling, and authorization.
Global filters are applied to all controllers and actions.
RouteConfig.RegisterRoutes(RouteTable.Routes)
This configures the URL routing for the application. Routing is how ASP.NET MVC matches a URI to an action method in a controller.
RegisterRoutes method sets up the routes that the application recognizes.
BundleConfig.RegisterBundles(BundleTable.Bundles)
This registers bundles for JavaScript and CSS files.
Bundling and minification are features that help improve request load time by reducing the number of requests to the server and reducing the size of requested assets (like CSS and JavaScript).
Overall, this MvcApplication class is central to setting up important aspects of the ASP.NET MVC web application when it starts, ensuring that areas, filters, routes, and bundles are all registered and ready to use.
In this file we configure the default entry point in my web application.
In this case we call the Index action inside the Home controller
This is the web application entry point: https://localhost:44327/Home/Index
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace WebApplication1
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
}
When the application starts with the default route: https://localhost:44327/Home/Index
automatically the Index action inside the Home controller is invoked
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
@{
ViewBag.Title = "Home Page";
}
<main>
<section class="row" aria-labelledby="aspnetTitle">
<h1 id="title">ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p><a href="https://asp.net" class="btn btn-primary btn-md">Learn more »</a></p>
</section>
<div class="row">
<section class="col-md-4" aria-labelledby="gettingStartedTitle">
<h2 id="gettingStartedTitle">Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-outline-dark" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</section>
<section class="col-md-4" aria-labelledby="librariesTitle">
<h2 id="librariesTitle">Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-outline-dark" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</section>
<section class="col-md-4" aria-labelledby="hostingTitle">
<h2 id="hostingTitle">Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-outline-dark" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</section>
</div>
</main>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Toggle navigation" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>
<li>@Html.ActionLink("About", "About", "Home", new { area = "" }, new { @class = "nav-link" })</li>
<li>@Html.ActionLink("Contact", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
We create a Dockerfile as shown in the following picture
This is the Dockerfile source code
# Use a Windows image with .NET Framework 4.7.2
FROM mcr.microsoft.com/dotnet/framework/aspnet:4.7.2-windowsservercore-ltsc2019
# Set the working directory
WORKDIR /inetpub/wwwroot
# Copy the application files from your host to your container
COPY ./WebApplication1 .
# Expose the port the app runs on
EXPOSE 80
# The final command to run your application will be in the base image
We type cmd to open a command prompt window
We create the docker image with the following command
docker build -t webapplication1 .
We also verify the docker image in Docker Desktop
Now we can run the docker image with this command
docker run -d -p 8080:80 --name myapp webapplication1
We verify the application running navigating in the internet web browser to this endpoint:
We see the application running
We can also verify the running docker container in Docker Desktop