Telerik UI for ASP.NET - Speaker Deck

Slide 1

Slide 1 text

{ {Telerik UI for ASP.NET Telerik UI for ASP.NET} } MVC & Core

Slide 2

Slide 2 text

{ {Denis Kyashif Denis Kyashif} } [email protected] github.com/deniskyashif @deniskyashif

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

{ {Agenda Agenda} } MVC and Razor (Recap) Telerik UI for ASP.NET MVC Telerik UI for ASP.NET Core Common Features - Conversational UI Q&A

Slide 5

Slide 5 text

{ {Prerequisites Prerequisites} } VS 2017 ASP.NET and web development .NET Core cross-platform development Progress Control Panel Training Materials: .NET Core 2.1 Runtime & SDK https://www.visualstudio.com/vs/ https://www.telerik.com/download-trial- le/v2/control-panel https://github.com/newventuresoftware/telerik-ui-for-aspnet

Slide 6

Slide 6 text

{ {Recap - The MVC Pattern Recap - The MVC Pattern} }

Slide 7

Slide 7 text

{ {Models Models} } Contain or represent the data that users work with.

Slide 8

Slide 8 text

{ {View Models View Models} } Represent data being transferred between views and controllers.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Loosely cooupled components

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

{ {ASP.NET MVC 5 ASP.NET MVC 5} } Web Application Framework Implements the MVC pattern Developed by Microsoft First Release in 2007 Open Source

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

{ {The Razor View Engine The Razor View Engine} } Simple-syntax view engine and was released as part of MVC 3

Slide 18

Slide 18 text

Razor supports C# and uses the @ symbol to transition from HTML to C# Playground

Slide 19

Slide 19 text

{ {Razor - Implicitit Expressions Razor - Implicitit Expressions} } CSHTML

@DateTime.Now

@DateTime.IsLeapYear(2016)

HTML

9.2.2018 г. 10:49:34

True

Slide 20

Slide 20 text

{ {Razor - Explicit Expressions Razor - Explicit Expressions} } CSHTML

Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))

Last week this time: 2.2.2018 г. 10:55:00

Slide 21

Slide 21 text

{ {Razor - Code Blocks Razor - Code Blocks} } CSHTML @{ var message = "You are the Semicolon to my Statements."; }

@message

@{ message = "Deleted code is debugged code."; }

@message

HTML

You are the Semicolon to my Statements.

Deleted code is debugged code.

Slide 22

Slide 22 text

{ {Razor - Control Structures Razor - Control Structures} } Conditionals @if, else if, else, and @switch CSHTML @if (value % 2 == 0) {

The value was even.

} else {

The value was odd.

}

Slide 23

Slide 23 text

{ {Razor - Control Structures Razor - Control Structures} } CSHTML @switch (value) { case 1:

The value is 1!

break; case 1337:

Your number is 1337!

break; default:

Your number wasn't 1 or 1337.

break; }

Slide 24

Slide 24 text

{ {Razor - Control Structures Razor - Control Structures} } Looping @for, @foreach, @while, and @do while CSHTML

Name: @person.Name, Age: @person.Age

Slide 25

Slide 25 text

{ {Razor - Control Structures Razor - Control Structures} } CSHTML

Name: @person.Name, Age: @person.Age

Slide 26

Slide 26 text

{ {Razor - Control Structures Razor - Control Structures} } @try, catch, nally CSHTML @try { throw new InvalidOperationException("You did something invali } catch (Exception ex) {

The exception message: @ex.Message

} finally {

The finally statement.

}

Slide 27

Slide 27 text

{ {Razor Directives Razor Directives} } Implicit expressions with reserved keywords following the @ symbol.

Slide 28

Slide 28 text

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

@dir

HTML

C:\Program Files (x86)\IIS Express

Slide 29

Slide 29 text

{ {Razor - Directives Razor - Directives} } @model speci es the type of the model passed to a view CSHTML @model LoginViewModel

The Login Email: @Model.Email

Slide 30

Slide 30 text

{ {Razor - Directives Razor - Directives} } @inherits, @inject, @functions, @section

Slide 31

Slide 31 text

{ {Html Helpers Html Helpers} }

Slide 32

Slide 32 text

An HTML Helper is just a method that returns a string.

Slide 33

Slide 33 text

HTML Helpers can be used to render standard HTML tags. They also can be used to render complex content.

Slide 34

Slide 34 text

{ {Built-in Helpers Built-in Helpers} } Html.ActionLink() Html.BeginForm() Html.DropDownList() Html.TextArea() Html.Partial() Html.Password() ...

Slide 35

Slide 35 text

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 One Five Ten

Slide 36

Slide 36 text

{ {Live Demo Live Demo} } Using Html Helpers

Slide 37

Slide 37 text

{ {Creating Custom Html Helpers Creating Custom Html Helpers} } Creating a static method Writing an extension method @helper

Slide 38

Slide 38 text

{ {Live Demo Live Demo} } Creating Custom Html Helpers

Slide 39

Slide 39 text

{ {Kendo UI Kendo UI} } Build Better Web Apps Faster

Slide 40

Slide 40 text

{ {Kendo UI Supports Kendo UI Supports} } jQuery Angular React Vue JSP ASP.NET MVC ASP.NET Core PHP

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

{ {Telerik UI for ASP.NET MVC Telerik UI for ASP.NET MVC} } Set of server-side wrappers that allows using the Kendo UI widgets from C# or VB.NET code.

Slide 43

Slide 43 text

{ {Getting Started Getting Started Telerik UI for ASP.NET MVC Telerik UI for ASP.NET MVC} } , Home Docs

Slide 44

Slide 44 text

{ {Project Setup Project Setup} } Using the Visual Studio Project Wizard

Slide 45

Slide 45 text

{ {Project Setup Project Setup} } Manual

Slide 46

Slide 46 text

{ { UI Widgets UI Widgets } } Fundamentals

Slide 47

Slide 47 text

{ {Conﬁguration Conﬁguration} } HtmlHelper Extension Method Widget Options Setting the Name Deferring Initialization

Slide 48

Slide 48 text

{ {Validation Validation} } Using the Data-Annotation Attributes

Slide 49

Slide 49 text

{ {Working with the Kendo UI Data Working with the Kendo UI Data Source Source} } Binding to Remote Data DataSourceRequest DataSourceResult IEnumerable.ToDataSourceResult()

Slide 50

Slide 50 text

For ASP.NET MVC

Slide 51

Slide 51 text

{ {Demo App Demo App} } Northwind Dashboard

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

One name to rule them all... ASP.NET vNext ASP.NET 5 ASP.NET Core

Slide 55

Slide 55 text

{ {ASP.NET Core ASP.NET Core} } Open-source and cross-platform web framework Redesign of ASP.NET

Slide 56

Slide 56 text

{ {ASP.NET Core ASP.NET Core} } A uni ed story for building web UI and web APIs. A cloud-ready, environment-based con guration 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.

Slide 57

Slide 57 text

ASP.NET Core ASP.NET Build for Windows, macOS, or Linux Build for Windows is the recommended approach to create a Web UI with ASP.NET Core 2.0. See also and Use , , , , or Multiple versions per machine One version per machine Develop with Visual Studio, , or using C# or F# Develop with Visual Studio using C#, VB, or F# Higher performance than ASP.NET Good performance Use .NET Framework runtime Razor Pages MVC Web API Web Forms SignalR MVC Web API Web Pages Visual Studio for Mac Visual Studio Code Choose .NET Framework or .NET Core runtime

Slide 58

Slide 58 text

{ {ASP.NET Core ASP.NET Core} } Building web APIs and web apps

Slide 59

Slide 59 text

{ {Razor Pages 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

Slide 60

Slide 60 text

It *is* MVC Routing Models ActionDescriptors ActionResults Filters Model Binding Value Providers ViewContext TempData Tag Helpers Layout & Partials View Components

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

{ {Live Demo Live Demo} } Get Started with Razor Pages

Slide 63

Slide 63 text

{ {ASP.NET Core TagHelpers ASP.NET Core TagHelpers} }

Slide 64

Slide 64 text

{ {What are Tag Helpers? What are Tag Helpers?} } Allow server-side code to participate in rendering of HTML elements in Razor les Target HTML elements based on element and attribute names Reduce explicit transitions between HTML and C# in Razor les Take advantage of the composition and tooling bene ts of HTML in Visual Studio

Slide 65

Slide 65 text

{ {Using Tag Helpers? 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: Optionally specify a pre x to enable an element for Tag Helper processing: Use like HTML: @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" @tagHelperPrefix "+" Home

Slide 66

Slide 66 text

{ {Tag Helpers over Html Helpers 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 Click me

Slide 67

Slide 67 text

{ {Creating Tag Helpers Creating Tag Helpers} } Three logical types of Tag Helpers: Target existing HTML elements & modify output, e.g. De ne new elements & produce custom output, e.g. De ne new elements wiht no output, e.g. Tag Helpers are classes that implement ITagHelper No complicated lifecycle, just a single Process method public void Process(TagHelperContext context, TagHelperOutput output)

Slide 68

Slide 68 text

{ {Live Demo Live Demo} } Creating Custom Tag Helpers

Slide 69

Slide 69 text

{ {ASP.NET Learning Resources ASP.NET Learning Resources} } docs.asp.net github.com/aspnet/razor github.com/aspnet/mvc

Slide 70

Slide 70 text

{ {Telerik UI for ASP.NET Core 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.

Slide 71

Slide 71 text

{ {Getting Started Getting Started Telerik UI for ASP.NET Core Telerik UI for ASP.NET Core} } , Home Docs

Slide 72

Slide 72 text

{ {Project Setup Project Setup} } Using the Visual Studio Project Wizard

Slide 73

Slide 73 text

{ {Project Setup Project Setup} } Manual

Slide 74

Slide 74 text

Set up the Telerik NuGet Private Feed Using Visual Stuio Package Manager Console PM> Install-Package NuGet.CommandLine PM> NuGet Sources Add -Name "telerik.com" -Source "https://nuget.telerik.com/nuget" -UserName "your login email" -Password "your password"

Slide 75

Slide 75 text

{ {Live Demo Live Demo} } Using Widgets

Slide 76

Slide 76 text

For ASP.NET Core

Slide 77

Slide 77 text

Knowledge and Transactional chatbots Smart chatbots Bene ts Cost savings Automation of repetitive tasks 24/7 Scalable Engaged users Customer satisfaction { {Chatbots Chatbots} }

Slide 78

Slide 78 text

Easy to navigate and engaging Cover web, mobile and desktop Framework agnostic Deliver natural conversation ow Part of your app with same look and feel No need for external channels { {Conversational UI Conversational UI} }

Slide 79

Slide 79 text

{ {Live Demo Live Demo} } { {Conversational UI Component for ASP.NET Conversational UI Component for ASP.NET} }

Slide 80

Slide 80 text

{ {Responsive Design Responsive Design} }

Slide 81

Slide 81 text

{ {Submitting Support Tickets Submitting Support Tickets} }

Slide 82

Slide 82 text

{ {Community Community} } GitHub Roadmap Forums StackOver ow

Slide 83

Slide 83 text

{ {Learning Resources Learning Resources} } newventuresoftware.com/blog Telerik UI for ASP.NET MVC Docs Telerik UI for ASP.NET Core Docs Kendo UI Docs Kendo UI Forums

Slide 84

Slide 84 text

{ {Questions? Questions?} }

Slide 85

Slide 85 text

{ {Thank You! Thank You!} } [email protected] github.com/deniskyashif @deniskyashif

Slide 86

Slide 86 text

{www.newventuresoftware.com}