Models

Contain or represent the data that users work with.

View Models

Represent data being transferred between views and controllers.

Domain Models

Contain the data in a business domain as well as the operations, transformations, and rules for manipulating that data.

Views

Used to render some part of the model as a user interface.

Controllers

Process incoming requests, perform operations on the model, and select views to render to the user.

Loosely cooupled components

ASP.NET MVC 5

• Web Application Framework
• Implements the MVC pattern
• Developed by Microsoft
• First Release in 2007
• Open Source

Razor - Implicitit Expressions

CSHTML<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>

HTML<p>9.2.2018 г. 10:49:34</p>
<p>True</p>

Razor - Explicit Expressions

CSHTML<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>

HTML<p>Last week this time: 2.2.2018 г. 10:55:00</p>

Razor - Code Blocks

CSHTML@{
    var message = "You are the Semicolon to my Statements.";
}
<p>@message</p>

@{
    message = "Deleted code is debugged code.";
}
<p>@message</p>

HTML <p>You are the Semicolon to my Statements.</p>
<p>Deleted code is debugged code.</p>

Razor - Control Structures

Conditionals @if, else if, else, and @switch

CSHTML@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else
{
    <p>The value was odd.</p>
}

Razor - Control Structures

CSHTML @switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number wasn't 1 or 1337.</p>
        break;
}

Razor - Control Structures

Looping @for, @foreach, @while, and @do while

CSHTML <ul>
@foreach (var person in people)
{
    <li>Name: @person.Name, Age: @person.Age</li>
}
</ul>

Razor - Control Structures

CSHTML <ul>
@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <li>Name: @person.Name, Age: @person.Age</li>
}
</ul>

Razor - Control Structures

@try, catch, finally

CSHTML @try
{
    throw new InvalidOperationException("You did something invalid.");
}
catch (Exception ex)
{
    <p>The exception message: @ex.Message</p>
}
finally
{
    <p>The finally statement.</p>
}

Razor Directives

Implicit expressions with reserved keywords following the @ symbol.

Razor - Directives

@using

CSHTML@using System.IO
@{
    var dir = Directory.GetCurrentDirectory();
}

<p>@dir</p>

HTML<p>C:\Program Files (x86)\IIS Express</p>

Razor - Directives

@model
specifies the type of the model passed to a view

CSHTML@model LoginViewModel

<div>The Login Email: @Model.Email</div>

Razor - Directives

@inherits, @inject, @functions, @section

Html Helpers

CSHTML @{
var items = new [] {
        new SelectListItem() { Text = "One", Value = "1" },
        new SelectListItem() { Text = "Five", Value = "5" },
        new SelectListItem() { Text = "Ten", Value = "10" }
    };
}

@Html.DropDownList("Quantity", items)

HTML <select id="Quantity" name="Quantity">
    <option value="1">One</option>
    <option value="5">Five</option>
    <option value="10">Ten</option>
</select>

Creating Custom Html Helpers

• Creating a static method
• Writing an extension method
• @helper

Getting Started
Telerik UI for ASP.NET MVC

Project Setup

UI Widgets

Configuration

• HtmlHelper Extension Method
• Widget Options
• Setting the Name
• Deferring Initialization

Validation

Using the Data-Annotation Attributes

Demo App

ASP.NET Core

Open-source and cross-platform web framework

Redesign of ASP.NET

ASP.NET Core

• A unified story for building web UI and web APIs.
• A cloud-ready, environment-based configuration system.
• Built-in dependency injection.
• A lightweight, high-performance, and modular HTTP request pipeline.
• Ability to host on IIS, Nginx, Apache, Docker, or self-host in your own process.
• Side-by-side app versioning when targeting .NET Core.
• Ability to build and run on Windows, macOS, and Linux.

ASP.NET Core

Building web APIs and web apps

Razor Pages

• New page-focused approach built-in & on top of MVC in ASP.NET Core 2
• Optionally integrates with Controllers and Views
• Customizable conventions
• *Not* a PHP attempt
• *Not* the new version ASP.NET Web Pages attempt
• *Not* only for "simple" scenarios

It *is* MVC

ASP.NET Core TagHelpers

What are Tag Helpers?

• Allow server-side code to participate in rendering of HTML elements in Razor files
• Target HTML elements based on element and attribute names
• Reduce explicit transitions between HTML and C# in Razor files
• Take advantage of the composition and tooling benefits of HTML in Visual Studio

Using Tag Helpers?

• ASP.NET MVC 6 includes Tag Helpers for common tasks e.g. creating forms, links etc.
• Import desired Tag Helpers into the Razor page:

  @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers"

• Optionally specify a prefix to enable an element for Tag Helper processing:

  @tagHelperPrefix "+"

• Use like HTML:

  <a asp-controller="Home" asp-action="Index">Home</a>

Tag Helpers over Html Helpers

• Cleaner Syntax
• More control over the markup
• Intellisense

// Before - HTML Helpers
@Html.ActionLink("Click me", "MyController", "MyAction",
    { @class="my-css-classname", data_my_attr="my-attribute"}) 

// After - Tag Helpers
<a asp-controller="MyController" asp-action="MyAction"
   class="my-css-classname" my-attr="my-attribute">Click me</a>

Creating Tag Helpers

• Three logical types of Tag Helpers:
  • Target existing HTML elements & modify output, e.g. <input />
  • Define new elements & produce custom output, e.g. <carousel>
  • Define new elements wiht no output, e.g. <environment />
• Tag Helpers are classes that implement ITagHelper
• No complicated lifecycle, just a single Process method

  public void Process(TagHelperContext context, TagHelperOutput output)

ASP.NET Learning Resources

• docs.asp.net
• github.com/aspnet/razor
• github.com/aspnet/mvc

Telerik UI for ASP.NET Core

Telerik UI for ASP.NET Core is a set of server-side wrappers that allows using the Kendo UI widgets in .NET Core.

Getting Started
Telerik UI for ASP.NET Core

Project Setup

Conversational UI

Community

• GitHub
• Roadmap
• Forums
• StackOverflow