Cloud diary tutorial part 1- Get started with ASP.NET MVC, user authentication and the cloud

A video tutorial based on my learnings of ASP.NET MVC 5, ASP.NET Identity, SQL Server and Azure.

Summary: I will show you how to create a very simple web application with user authentication. Users can register, log in, create diary entries (text) and visualize their entries.

In part one we will create, test and refactor the application locally on our computer. Although the app is very simple we will touch a lot of different technologies. You will also see some issues you may experience when starting with ASP.NET MVC in Visual Studio and how to fix them.

In part two we will publish our app to the cloud (Azure). Please subscribe to get notified when part two is finished.

Technology stack

Visual Studio 2017 (Community Edition)
ASP.NET MVC 5
ASP.NET Identity
C#
Git
Entity Framework 6 with Code-First
LINQ to Entities
Azure App Service
Azure SQL Database

Prerequisites

Visual Studio 2017 with the following workloads:

  • ASP.NET and web development
  • Azure development

Content

00 – Introduction

01 – Create ASP.NET MVC 5 application from template

  • Create a new ASP.NET MVC 5 application with ASP.NET Identity
  • Configure authentication (Individual user accounts) for new project
  • Project folders overview
  • Local database folder: App_Data
  • Register user and log into our new application
  • Use “Server Explorer” to show data from local database

02 – Remove unneeded content from application

  • Change title and footer of application
  • Basic HTML tags (title, footer, h1, h2, footer, div)
  • Remove a View and Action Method
  • Commit to source control (local GIT repository)

03 – Create new Controller and View

  • Create a new ASP MVC Controller
  • Create a new ASP MVC View
  • User authentication and security
  • Use of the [Authorize] and [AllowAnonymous] attributes
  • Configure authorization/authentication by default with global filter
  • Refactor our app to use global filter instead of [Authorize] attribute

04 – Display list of fake entries in View

  • Create a model class for diary entry
  • Usage of “prop” code snippet.
  • Create fake data in Controller
  • Display list in View
  • Use of the “ViewBag”
  • Create an HTML table in code

05 – Add form for adding new diary entries

  • Create a Html form using ASP.NET Identity code as template
  • Razor syntax
  • MVC Form @model directive
  • Create a ViewModel for form-data with data validation attributes
  • Use of [Required], [DisplayName] and [StringLength] attributes

06 – Implement Action Method on Controller to handle the form data from HttpPost request

  • Add HttpPost Action method to Controller
  • [HttpPost] and [ValidateAntiForgeryToken] attributes
  • Test Action Method

07 – Store diary entries in database

  • ASP.NET Identity ApplicationUser and ApplicationDbContext overview
  • ASP.NET Identity tables
  • Extend DiaryEntry model class for usage in DbContext
  • Create foreign key property and navigation properties (Entity Framework)
  • Add new DiaryEntry table to DbContext
  • Create new model class from viewmodel
  • Use Entity Framework to insert into DiaryEntries table
  • Show result of data-model change: “Server Error in Application. The model backing the ‘ApplicationDbContext” context has changed since the database was created. Consider using Code First Migrations to update the database”

08 – Enable EF Migrations

  • Add Code First Migrations to update the database
  • Delete SQLServer LocalDB database from App_Data folder
  • Enable, create and apply migrations with Package Manager (“enable-migrations”, “add-migration”, “update-database”)
  • Test adding a new diary entry to the database using our form.

09 – Retrieve data

  • Query database with LINQ to entities query
  • Redirect to GET ActionMethod after the POST with “RedirectToAction”

10 – UX improvement – Login button on homepage

  • Identify user experience issues
  • Use source control (GIT) to access code from a previous version
  • Improve navigation by adding Login-Button on homepage

11 – UX improvement – Move diary to homepage

  • Refactor Controllers and Views to merge homepage and diary page

Part 2 (Publish our app to the cloud) still in the works. Please subscribe to my YouTube channel and blog to get notified when it’s ready!

Credits: Big thanks to John Sonmez from SimpleProgrammer. His “10 Steps to learn Anything” course not only helped me to organize my learning but also motivated me to create this tutorial!