Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Telerik UI for ASP.NET

Telerik UI for ASP.NET

Denis Kyashif

July 10, 2018

More Decks by Denis Kyashif

Other Decks in Programming


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

    MVC & Core
  2. { {Denis Kyashif Denis Kyashif} } [email protected] 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

  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

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

  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

  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

  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!} } [email protected] github.com/deniskyashif @deniskyashif

  86. {www.newventuresoftware.com}