Telerik UI for ASP.NET

Transcript

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

   View Slide

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

   View Slide

3. View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Loosely cooupled components
    

    View Slide

13. View Slide

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
    

    View Slide

15. View Slide

16. View Slide

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

    View Slide

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

    View Slide

19. {
    {Razor - Implicitit Expressions
    Razor - Implicitit Expressions}
    }
    CSHTML
    @DateTime.Now
    @DateTime.IsLeapYear(2016)
    HTML
    9.2.2018 г. 10:49:34
    True
    

    View Slide

20. {
    {Razor - Explicit Expressions
    Razor - Explicit Expressions}
    }
    CSHTML
    Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))HTML
    Last week this time: 2.2.2018 г. 10:55:00
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. {
    {Razor - Control Structures
    Razor - Control Structures}
    }
    Looping @for, @foreach, @while, and @do while
    CSHTML
    
    @foreach (var person in people)
    {
    Name: @person.Name, Age: @person.Age
    }
    
    

    View Slide

25. {
    {Razor - Control Structures
    Razor - Control Structures}
    }
    CSHTML
    
    @for (var i = 0; i < people.Length; i++)
    {
    var person = people[i];
    Name: @person.Name, Age: @person.Age
    }
    
    

    View Slide

26. {
    {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.
    }
    

    View Slide

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

    View Slide

28. {
    {Razor - Directives
    Razor - Directives}
    }
    @using
    CSHTML
    @using System.IO
    @{
    var dir = Directory.GetCurrentDirectory();
    }
    @dir
    HTML
    C:\Program Files (x86)\IIS Express
    

    View Slide

29. {
    {Razor - Directives
    Razor - Directives}
    }
    @model
    speci es the type of the model passed to a view
    CSHTML
    @model LoginViewModel
    The Login Email: @Model.Email
    

    View Slide

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

    View Slide

31. {
    {Html Helpers
    Html Helpers}
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

45. {
    {Project Setup
    Project Setup}
    }
    Manual
    

    View Slide

46. {
    { UI Widgets
    UI Widgets }
    }
    Fundamentals
    

    View Slide

47. {
    {Configuration
    Configuration}
    }
    HtmlHelper Extension
    Method
    Widget Options
    Setting the Name
    Deferring Initialization
    

    View Slide

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

    View Slide

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

    View Slide

50. For ASP.NET MVC
    

    View Slide

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

    View Slide

52. View Slide

53. View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

61. View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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 "+"
    Home
    

    View Slide

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
    class="my-css-classname" my-attr="my-attribute">Click me
    

    View Slide

67. {
    {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)
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

73. {
    {Project Setup
    Project Setup}
    }
    Manual
    

    View Slide

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"
    

    View Slide

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

    View Slide

76. For ASP.NET Core
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

80. {
    {Responsive Design
    Responsive Design}
    }
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

84. {
    {Questions?
    Questions?}
    }
    

    View Slide

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

    View Slide

86. {www.newventuresoftware.com}
    

    View Slide