Getting Started

In this series we will create a basic brochure/shop module to view a list of products. We will start with something very simple and slowly work towards our end goal, introducing you to various ASP.NET Core and KIT concepts throughout the process.

Creating a Module Project

First you should setup your KIT application if you haven't done so already. For the purpose of the series we have called the project “DemoShop”.

Now we will add a module within the application. A module is a mini model view controller (MVC) project, conceptually known as an area in ASP.NET Core. Each module is self contained inside it's own project. Let's start by creating our project/area:

  1. First create a new folder called “DemoShop.Shop” under the “src” folder. This is where our module's code will belong.
  2. Now add a “DemoShop.Shop.csproj” file under this directory.

Alternatively if you are using Visual Studio do the following:

  1. Open the solution in Visual Studio and right click the “src” folder and select “Add” → “New Project”.
  2. Select the “Class Libriary (C#)” project template and click “Next”.
  3. Enter the project name e.g. “DemoShop.Shop” and change the location to the “src” folder and click “Create”.

Now you've created the project, change the “DemoShop.Shop.csproj” file to the following:

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <ImplicitUsings>enable</ImplicitUsings>
    <Nullable>enable</Nullable>
    <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Kit.Module" Version="1.*" />
    <PackageReference Include="Kit.Mvc" Version="1.*" />
  </ItemGroup>

</Project>

Note: In Visual Studio you can open the project's *.csproj file by double clicking the project name in the solution explorer.

Now let's add the module manifest file by adding the following “Module.yaml” file to the root of our module's project:

Name: DemoShop.Shop
Type: Module
AreaName: DemoShop.Shop

Note: The manifest file differentiates a KIT module to a regular .NET class library.

Finally you need to add a reference from your application to this project.

  1. Open the “src/DemoShop.Web/DemoShop.Web.csproj” file.
  2. Now inside the ItemGroup (at the bottom) add the following:
<ProjectReference Include="..\DemoShop.Shop\DemoShop.Shop.csproj" />

Note: We have separated PackageReference's and ProjectReference's into their own groups. A package reference is for an external project, whereas a project reference is for a project within your aplication.

Controllers

Now we'll start by creating the controller of the MVC pattern. First add a sub folder within your module called "Controllers".

Now add a file beneath that folder called "HomeController.cs" with the following content:

using Microsoft.AspNetCore.Mvc;

namespace DemoShop.Shop.Controllers;

[Area("DemoShop.Shop"), Route("shop")]
public class HomeController : Controller {
    [HttpGet]
    public IActionResult Index() {
        return Content("Hello World");
    }
}

Note: Each method within the controller class is known as an action.

Now run the application (instructions in the setup guide) and navigate to https://localhost:5001/shop. You should see "Hello World" outputted to the page.

Views

In the long term you will find returning a string for your content tedious as it becomes more complicated. To solve this we will create a view:

  1. Add a sub folder within your module called "Views".
  2. Next add a folder beneath the "Views" folder called "Home" (the name of the controller).
  3. Now add a file beneath that folder called "Index.cshtml" (the name of the action method) with the following content:
@{ 
    Layout = "";
}
Hello World (View)

Note: The convention is to place the content of your view within the @RenderBody() section of the theme's master/layout page, however this requires a site map node. We will add a site map node in the next step, but for now we will set the layout page to none.

Now you just need to tell the controller to use your view. Open the "HomeController.cs" and replace the body of the "Index" action method with the following code:

return View();

Finally refresh the page to see the result.

Note: If you are not serving the application with IIS Expression (Visual Studio) or dotnet watch you will need to a rebuild and restart the server.

Whilst we are on the subject of views. It's worth adding a view imports file which will automatically add any useful utilities and namespaces to all of your module's views. To do this create a file called “_ViewImports.cshtml” (within the root of the “Views” folder with the following content:

@inherits Kit.Mvc.Razor.RazorPage<TModel>
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.ValidationSummaryTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kit.Mvc
@using System.ComponentModel
@using Kit.Collections
@using Kit.Collections.Generic
@using Kit.Helpers
@using Kit.Html
@using Kit.Mvc.Razor
@using Kit.Serialization
@using Microsoft.AspNetCore.Html
@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Routing
@using Microsoft.Extensions.Options

Note: The calls to @addTagHelper will add the ASP.NET Core Tag Helpers as well as the KIT custom ones (such as the pager). More will be mentioned about this later on in the series.

We have introduced the controller and the view, next up we will introduce final part of the MVC pattern, the model.

Data Access »