.

NET DEVELOPMENT
ASP.NET CORE
BY WILLY-JOEL TCHANA, SOFTWARE ARCHITECT
@WILLYTCHANA

1
 PERQUISITES

• C# LANGUAGE
• HTML/CSS/JAVASCRIPT
• BOOTSTRAP / JQUERY
• SQL / MYSQL / MS SQL SERVER

2
 MAP
• .NET CORE OVERVIEW AND TOOLS
• WHAT’S AND WHY ASP.NET CORE
• MVC ARCHITECTURE
• ROUTING CONFIGURATION
• CREATE, BUILD AND RUN FIRST ASP.NET PROJECT
• DEMO : EXPLORE PROJECT STRUCTURE
• DEMO : CREATE FIRST CONTROLLER AND VIEW
• DEMO : LAYOUT AND _VIEWSTART CSHTML FILES
• DEMO : DATA BETWEEN CONTROLLER AND VIEW : V iewBag AND ViewData
• DEMO : STRONGLY VIEW
• NAVIGATION, FORM, ASP TAG HELPERS AND_VIEWIMPORTS CSHTML FILE
• VALIDATIONS
• WORK WITH DATABASE (ORM) 3

• PUBLISH YOU APP

 .NET CORE
OVERVIEW
• .NET CORE OR DOTNET CORE IS A DEVELOPMENT CROSS-PLATFORM
• .NET CORE PROVIDED BY MICROSOFT SINCE 2016
• THE LAST VERSION IS .NET CORE 3.1
• .NET CORE = SDK + LANGUAGE + RUNTIME
• .NET CORE CAN BUILD DESKTOP, WEB, MOBILE, GAMING AND AI APPLICATIONS

4
 .NET CORE : TOOLS
• DOWNLOAD AND INSTALL VISUAL STUDIO CODE OR VISUAL STUDIO COMMUNITY
2017+
• HTTPS://CODE.VISUALSTUDIO.COM/DOWNLOAD HTTPS://VISUALSTUDIO.MICROSOFT.COM/FR/DOWNLOADS/

• IF YOU ARE USING VISUAL STUDIO CODE DOWNLOAD AND INSTALL .NET CORE SDK
• HTTPS://DOTNET.MICROSOFT.COM/DOWNLOAD/DOTNET-CORE/THANK-YOU/SDK-3.1.100-WINDOWS-X64-INSTALLER
• INSTALL .NET CORE EXTENSION PACK
• GO TO FILE -> PREFERENCES -> PARAMETERS AND
• TYPE INSIDE SEARCH BAR SETTINGS.JSON
• CLICK TO MODIFY SETTINGS.JSON
• ADD THIS

    "emmet.includeLanguages": {
        "razor": "html",
        "aspnetcorerazor": "html"
    },

• IF YOU ARE USING VISUAL STUDIO COMMUNITY CHECK “.NET CORE CROSS-
PLATFORM DEVELOPMENT” FROM WORKLOADS TAB IN VISUAL STUDIO INSTALLER5
 WHAT’S AND WHY ASP.NET CORE
• ASP.NET CORE IS AN OPEN-SOURCE FRAMEWORK TO BUILD : WEB APP AND SERVICES, IOT APPS AND MOBILE BACK
ENDS
• ASP.NET CORE PROVIDES THE FOLLOWING BENEFITS:
• A UNIFIED STORY FOR BUILDING WEB UI AND WEB APIS.
• ARCHITECTED FOR TESTABILITY.
• ABILITY TO DEVELOP AND RUN ON WINDOWS, MACOS, AND LINUX.
• INTEGRATION OF MODERN, CLIENT-SIDE FRAMEWORKS AND DEVELOPMENT WORKFLOWS.
• SUPPORT FOR HOSTING REMOTE PROCEDURE CALL (RPC) SERVICES USING GRPC.
• A CLOUD-READY, ENVIRONMENT-BASED CONFIGURATION SYSTEM.
• BUILT-IN DEPENDENCY INJECTION.
• A LIGHTWEIGHT, HIGH-PERFORMANCE, AND MODULAR HTTP REQUEST PIPELINE.
• ABILITY TO HOST ON THE FOLLOWING:
• KESTREL
• IIS
• HTTP.SYS
• NGINX
• APACHE
• DOCKER 6

• TOOLING THAT SIMPLIFIES MODERN WEB DEVELOPMENT.

 MVC ARCHITECTURE
• MVC = MODEL VIEW CONTROLLER
• SEPARATE PRESENTATION (VIEW), WITH LOGIC (CONTROLLER) AND DATA
(MODEL)

7
 ROUTING CONFIGURATIONS
• IN ASP.NET MVC, MODELS, VIEWS AND CONTROLLERS ARE CLASSES
• THE DEFAULT ROUTE MODEL IS
HTTP(S)://YOURDOMAIN:PORT/{CONTROLLER}/{ACTION}/{ID?}
• CONTROLLER IS A CLASS NAME IN YOUR PROJECT THAT INHERITS CONTROLLER BASE CLASS
• ACTION IS A METHOD NAME INSIDE YOUR CONTROLLER CLASS
• ID (? MEANS OPTIONAL) IS A PARAMETER OF ACTION

• CONVENTION OVER CONFIGURATION

• ALL CONTROLLERS ARE IN "CONTROLLERS" FOLDER AND THEIR NAMES MUST BE SUFFIX
WITH CONTROLLER WORD
• EX: public class ProductController : Controller {}
• THE VIEWS ARE SOUGHT IN THE FOLDER WHICH HAS THE SAME NAME AS THE
CONTROLLER IN THE "VIEWS" DIRECTORY, OR IN THE "SHARED" FOLDER IN THE "VIEWS"
DIRECTORY AND MUST HAVE THE EXTENSION .CSHTML
• EX: Views/Product/Index.cshtml
• THE "SHARED" FOLDER IS USED TO STORE THE VIEWS COMMON TO ALL CONTROLLERS 8

• EX: Views\shared\layout.cshtml
 ROUTING EXAMPLE
• HTTP(S)://YOURDOMAIN:PORT/{CONTROLLER}/{ACTION}/{ID?}
 EXAMPLE:
 PRODUCT/DETAILS/5 => PRODUCTCONTROLLER.DETAILS(INT ID)
 PRODUCT/INDEX => PRODUCTCONTROLLER.INDEX()
 PRODUCT/CREATE/5?NAME=HAMBURGER&PRICE=1000&CURRENCY=XAF
=> PRODUCTCONTROLLER.CREATE(INT ID, STRING NAME, DOUBLE PRICE, STRING CURRENCY)

• HTTP(S):// YOURDOMAIN:PORT/{CONTROLLER=HOME}/{ACTION=INDEX}/{ID?}
 EXAMPLE:
 PRODUCT/DETAILS/5 => PRODUCTCONTROLLER.DETAILS(INT ID)
 PRODUCT/INDEX => PRODUCTCONTROLLER.INDEX()
 PRODUCT => PRODUCTCONTROLLER.INDEX()
 / => HOMECONTROLLER.INDEX()

• HTTP(S):// YOURDOMAIN:PORT/ADMIN/{CONTROLLER=HOME}/{ACTION=INDEX}/{ID?}
 EXAMPLE:
 ADMIN/PRODUCT/DETAILS/5 => PRODUCTCONTROLLER.DETAILS(INT ID)
 ADMIN/PRODUCT/INDEX => PRODUCTCONTROLLER.INDEX()
 ADMIN/PRODUCT => PRODUCTCONTROLLER.INDEX()
9
 ADMIN/ => HOMECONTROLLER.INDEX()
 CREATE, BUILD AND RUN FIRST ASP.NET
PROJECT
• SYNTAX: DOTNET <COMMAND> <ARGUMENT> <OPTION>
• DOTNET CORE VERSION:
• >DOTNET --VERSION

• CREATE ASP.NET CORE 3.0 EMPTY APP :

• DOTNET CORE TEMPLATE LIST:
 >DOTNET NEW LIST
• DOTNET CORE CREATE NEW PROJECT
 C:\ MYEMPTYWEBAPP> DOTNET NEW WEB
 >DOTNET NEW WEB -N MYEMPTYWEBAPP
 >DOTNET NEW WEB -N MYEMPTYWEBAPP -O C:\MYPROJECTS

• ADD PACKAGE :
 C:\ MYEMPTYWEBAPP> DOTNET ADD PACKAGE NEWTON.JSON
• RESTORE PACKAGE:
• C:\ MYEMPTYWEBAPP>DOTNET RESTORE

• BUILD APP :
• C:\ MYEMPTYWEBAPP>DOTNET BUILD

• RUN APP : 10

• DOTNET RUN OR DOTNET WATCH RUN (BROWSE TO HTTPS://LOCALHOST:5001 OR HTTP://LOCALHOST:5000 )

 DEMO

• EXPLORE PROJECT STRUCTURE

• CREATE FIRST CONTROLLER AND VIEW
• LAYOUT AND _VIEWSTART CSHTML FILES
• DATA BETWEEN CONTROLLER AND VIEW : ViewBag AND
ViewData
• MODEL : STRONGLY VIEW

11
 NAVIGATION
• <a href=“Product/Index”>Product list</a>
• <a href=“/Product”>Product list</a>
• <a href=“/Product/Search/tomato?city=dla”>Product details</a>
• <a href=“/Home/Index”>Home</a>
• <a href=“/Home”>Home</a>
• <a href=“/”>Home</a>
• <form action=“/Product/Create” method=“get”>…</form>
• <form action=“/Product/Create” method=“post”>…</form>
• <form action=“/Product/Create” method=“post” enctype=“multipart/form-data”>…</form> 12
 NAVIGATION AND TAG HELPERS
• @addTagHelper makes Tag Helpers available inside a view
• Controlling Tag Helper scope with the _ViewImports.cshtml file

• <a asp-controller="product" asp-action="index">product</a>
• <a asp-controller="Product" asp-action="Index" asp-route-id="5" asp-route-name="Tomato">Product</a>

13
 FORM AND TAG HELPERS
• @model App1.Models.Product
• <form asp-controller="Product" asp-action="Create" method="post">
• <div class="form-group">
• <label asp-for="Name" class="control-label"></label>
• <input type="text" asp-for="Name" class="form-control"/>
• </div>
• <div class="form-group">
• <label asp-for="Price" class="control-label"></label>
• <input asp-for="Price" class="form-control"/>
• </div>
• …
• <button class="btn btn-primary">Save</button> 14

• </form>