Skip to main content

​
Introduction

Dev Showcase is built using ASP.NET Core MVC, a modern web framework that implements the Model-View-Controller architectural pattern. This architecture separates concerns and provides a clean, maintainable structure for building web applications.

​
ASP.NET Core MVC Pattern

The MVC pattern divides the application into three interconnected components:

Model

Represents the data and business logic layer. Contains domain objects and data structures.

View

Handles the presentation layer. Renders the UI using Razor templates (.cshtml files).

Controller

Processes incoming requests, interacts with models, and returns appropriate views.

​
Project Structure

The Dev Showcase project follows the standard ASP.NET Core MVC structure: 
dev-showcase/
├── Controllers/              # Application controllers
│   └── HomeController.cs    # Main controller handling profile routes
├── Models/                   # Data models and view models
│   └── ErrorViewModel.cs    # Error handling model
├── Views/                    # Razor view templates
│   ├── Home/                # Views for HomeController
│   │   ├── HomePage.cshtml
│   │   └── Sections/        # Partial views for page sections
│   │       ├── _Introduction.cshtml
│   │       ├── _Skills.cshtml
│   │       ├── _Projects.cshtml
│   │       └── _Education.cshtml
│   └── Shared/              # Shared views and layouts
│       ├── _Layout.cshtml   # Main layout template
│       └── Error.cshtml     # Error page
├── wwwroot/                  # Static files (CSS, JS, images)
│   ├── css/                 # Stylesheets
│   ├── js/                  # JavaScript files
│   ├── images/              # Image assets
│   ├── languages/           # JSON localization files
│   │   ├── en.json
│   │   └── es.json
│   ├── files/               # Downloadable files (CVs)
│   └── lib/                 # Third-party libraries
├── Properties/               # Launch and build settings
├── Program.cs               # Application entry point and configuration
├── appsettings.json         # Application configuration
└── dev-showcase.csproj      # Project file

​
Request Lifecycle

Understanding how requests flow through the application:
1

Request arrives

A user navigates to a URL like /en/dataScience
2

Routing matches pattern

The routing middleware matches the URL to a route pattern defined in Program.cs
3

Controller action executes

The appropriate controller action (e.g., HomeController.Profile) is invoked
4

Model processing

The controller processes data, validates input, and prepares the model
5

View rendering

The controller returns a view, which renders HTML using Razor syntax
6

Response sent

The rendered HTML is sent back to the client’s browser

​
Visual Flow

​
Core Components

​
Program.cs

The application entry point configures services and middleware:
Program.cs:1
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseRouting();
app.UseAuthorization();
app.MapStaticAssets();
The AddControllersWithViews() method registers MVC services, including controllers, views, and model binding.

​
Controllers

Controllers handle incoming requests and return responses:
Controllers/HomeController.cs:10
public class HomeController : Controller
{
    private static readonly HashSet<string> ValidProfiles = new(StringComparer.OrdinalIgnoreCase)
    {
        "dataScience",
        "webDev",
        "dataAnalyst",
        "DataAnalysis"
    };

    public IActionResult Profile(string profile)
    {
        if (!ValidProfiles.Contains(profile))
            return NotFound();

        ViewData["Profile"] = profile;
        return View("HomePage");
    }
}

​
Models

Models represent data and business logic:
Models/ErrorViewModel.cs:1
namespace dev_showcase.Models
{
    public class ErrorViewModel
    {
        public string? RequestId { get; set; }

        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
    }
}

​
Views

Views use Razor syntax to generate HTML:
Views/Home/HomePage.cshtml:1
@{
    ViewData["Title"] = "Portafolio";
}

<div class="content-sections-container">
    <div class="content-section active" data-content="introduction">
        <partial name="Sections/_Introduction" />
    </div>
    
    <div class="content-section" data-content="skills">
        <partial name="Sections/_Skills" />
    </div>
    
    <div class="content-section" data-content="projects">
        <partial name="Sections/_Projects.cshtml" />
    </div>
    
    <div class="content-section" data-content="education">
        <partial name="Sections/_Education.cshtml" />
    </div>
</div>

​
Static Files

The wwwroot folder contains static assets:
  • CSS: Modular stylesheets for different components (header, sidebar, carousel, charts)
  • JavaScript: Client-side functionality (translation, navigation, charts, animations)
  • Images: Profile photos, project screenshots, certificates
  • Languages: JSON files for multilingual content
  • Libraries: Third-party dependencies (jQuery, validation libraries)
Static files are served directly by the web server without going through the MVC pipeline, improving performance.

​
File Organization Best Practices

The project follows these organizational principles:
  1. Separation of Concerns: Controllers, Models, and Views are in separate directories
  2. Partial Views: Complex views are broken into reusable sections (e.g., _Introduction.cshtml, _Skills.cshtml)
  3. Modular CSS: Stylesheets are split by component/feature rather than one monolithic file
  4. Asset Organization: Images are organized by category (profile, projects, certificates)
  5. Language Files: Localization content is externalized to JSON files for easy maintenance

​
Configuration Files

​
appsettings.json

Stores application configuration: 
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

​
dev-showcase.csproj

Defines project properties and dependencies: 
<Project Sdk="Microsoft.NET.Sdk.Web">
  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
</Project>

​
Next Steps

Routing

Learn how URL routing works and how profile routes are configured

Localization

Understand the multilingual system and how to add new languages

Build docs developers (and LLMs) love

Get started for freeTalk to us