Telerik UI for ASP.NET

Transcript

1. { {Telerik UI for ASP.NET Telerik UI for ASP.NET} }

   MVC & Core

2. { {Denis Kyashif Denis Kyashif} } denis@newventuresoftware.com github.com/deniskyashif @deniskyashif

3. None

4. { {Agenda Agenda} } MVC and Razor (Recap) Telerik UI

   for ASP.NET MVC Telerik UI for ASP.NET Core Common Features - Conversational UI Q&A

5. { {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

6. { {Recap - The MVC Pattern Recap - The MVC

   Pattern} }

7. { {Models Models} } Contain or represent the data that

   users work with.

8. { {View Models View Models} } Represent data being transferred

   between views and controllers.

9. { {Domain Models Domain Models} } Contain the data in

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

10. { {Views Views} } Used to render some part of

    the model as a user interface.

11. { {Controllers Controllers} } Process incoming requests, perform operations on

    the model, and select views to render to the user.

12. Loosely cooupled components

13. None

14. { {ASP.NET MVC 5 ASP.NET MVC 5} } Web Application

    Framework Implements the MVC pattern Developed by Microsoft First Release in 2007 Open Source
15. None
16. None

17. { {The Razor View Engine The Razor View Engine} }

    Simple-syntax view engine and was released as part of MVC 3

18. Razor supports C# and uses the @ symbol to transition

    from HTML to C# Playground

19. { {Razor - Implicitit Expressions 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>

20. { {Razor - Explicit Expressions 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>

21. { {Razor - Code Blocks 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>

22. { {Razor - Control Structures 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> }

23. { {Razor - Control Structures 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; }

24. { {Razor - Control Structures 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>

25. { {Razor - Control Structures 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>

26. { {Razor - Control Structures Razor - Control Structures} }

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

27. { {Razor Directives Razor Directives} } Implicit expressions with reserved

    keywords following the @ symbol.

28. { {Razor - Directives Razor - Directives} } @using CSHTML

    @using System.IO @{ var dir = Directory.GetCurrentDirectory(); } <p>@dir</p> HTML <p>C:\Program Files (x86)\IIS Express</p>

29. { {Razor - Directives Razor - Directives} } @model speci

    es the type of the model passed to a view CSHTML @model LoginViewModel <div>The Login Email: @Model.Email</div>

30. { {Razor - Directives Razor - Directives} } @inherits, @inject,

    @functions, @section

31. { {Html Helpers Html Helpers} }

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

    string.

33. HTML Helpers can be used to render standard HTML tags.

    They also can be used to render complex content.

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

    Html.Partial() Html.Password() ...

35. 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>

36. { {Live Demo Live Demo} } Using Html Helpers

37. { {Creating Custom Html Helpers Creating Custom Html Helpers} }

    Creating a static method Writing an extension method @helper

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

39. { {Kendo UI Kendo UI} } Build Better Web Apps

    Faster

40. { {Kendo UI Supports Kendo UI Supports} } jQuery Angular

    React Vue JSP ASP.NET MVC ASP.NET Core PHP
41. None

42. { {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.

43. { {Getting Started Getting Started Telerik UI for ASP.NET MVC

    Telerik UI for ASP.NET MVC} } , Home Docs

44. { {Project Setup Project Setup} } Using the Visual Studio

    Project Wizard

45. { {Project Setup Project Setup} } Manual

46. { { UI Widgets UI Widgets } } Fundamentals

47. { {Configuration Configuration} } HtmlHelper Extension Method Widget Options Setting

    the Name Deferring Initialization

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

49. { {Working with the Kendo UI Data Working with the

    Kendo UI Data Source Source} } Binding to Remote Data DataSourceRequest DataSourceResult IEnumerable.ToDataSourceResult()

50. For ASP.NET MVC

51. { {Demo App Demo App} } Northwind Dashboard

52. None
53. None

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

    ASP.NET Core

55. { {ASP.NET Core ASP.NET Core} } Open-source and cross-platform web

    framework Redesign of ASP.NET

56. { {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.

57. 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

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

    web apps

59. { {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

60. It *is* MVC Routing Models ActionDescriptors ActionResults Filters Model Binding

    Value Providers ViewContext TempData Tag Helpers Layout & Partials View Components
61. None

62. { {Live Demo Live Demo} } Get Started with Razor

    Pages

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

64. { {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

65. { {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 "+" <a asp-controller="Home" asp-action="Index">Home</a>

66. { {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 <a asp-controller="MyController" asp-action="MyAction" class="my-css-classname" my-attr="my-attribute">Click me</a>

67. { {Creating Tag Helpers Creating Tag Helpers} } Three logical

    types of Tag Helpers: Target existing HTML elements & modify output, e.g. <input /> De ne new elements & produce custom output, e.g. <carousel> De ne 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)

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

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

    github.com/aspnet/mvc

70. { {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.

71. { {Getting Started Getting Started Telerik UI for ASP.NET Core

    Telerik UI for ASP.NET Core} } , Home Docs

72. { {Project Setup Project Setup} } Using the Visual Studio

    Project Wizard

73. { {Project Setup Project Setup} } Manual

74. 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"

75. { {Live Demo Live Demo} } Using Widgets

76. For ASP.NET Core

77. Knowledge and Transactional chatbots Smart chatbots Bene ts Cost savings

    Automation of repetitive tasks 24/7 Scalable Engaged users Customer satisfaction { {Chatbots Chatbots} }

78. 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} }

79. { {Live Demo Live Demo} } { {Conversational UI Component

    for ASP.NET Conversational UI Component for ASP.NET} }

80. { {Responsive Design Responsive Design} }

81. { {Submitting Support Tickets Submitting Support Tickets} }

82. { {Community Community} } GitHub Roadmap Forums StackOver ow

83. { {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

84. { {Questions? Questions?} }

85. { {Thank You! Thank You!} } denis@newventuresoftware.com github.com/deniskyashif @deniskyashif

86. {www.newventuresoftware.com}