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. { {Agenda Agenda} } MVC and Razor (Recap) Telerik UI

    for ASP.NET MVC Telerik UI for ASP.NET Core Common Features - Conversational UI Q&A
  2. { {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
  3. { {Domain Models Domain Models} } Contain the data in

    a business domain as well as the operations, transformations, and rules for manipulating that data.
  4. { {Views Views} } Used to render some part of

    the model as a user interface.
  5. { {Controllers Controllers} } Process incoming requests, perform operations on

    the model, and select views to render to the user.
  6. { {ASP.NET MVC 5 ASP.NET MVC 5} } Web Application

    Framework Implements the MVC pattern Developed by Microsoft First Release in 2007 Open Source
  7. { {The Razor View Engine The Razor View Engine} }

    Simple-syntax view engine and was released as part of MVC 3
  8. { {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>
  9. { {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>
  10. { {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>
  11. { {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> }
  12. { {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; }
  13. { {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>
  14. { {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>
  15. { {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> }
  16. { {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>
  17. { {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>
  18. HTML Helpers can be used to render standard HTML tags.

    They also can be used to render complex content.
  19. 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>
  20. { {Creating Custom Html Helpers Creating Custom Html Helpers} }

    Creating a static method Writing an extension method @helper
  21. { {Kendo UI Supports Kendo UI Supports} } jQuery Angular

  22. { {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.
  23. { {Getting Started Getting Started Telerik UI for ASP.NET MVC

    Telerik UI for ASP.NET MVC} } , Home Docs
  24. { {Working with the Kendo UI Data Working with the

    Kendo UI Data Source Source} } Binding to Remote Data DataSourceRequest DataSourceResult IEnumerable.ToDataSourceResult()
  25. { {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.
  26. 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
  27. { {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
  28. It *is* MVC Routing Models ActionDescriptors ActionResults Filters Model Binding

    Value Providers ViewContext TempData Tag Helpers Layout & Partials View Components
  29. { {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
  30. { {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>
  31. { {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>
  32. { {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)
  33. { {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.
  34. { {Getting Started Getting Started Telerik UI for ASP.NET Core

    Telerik UI for ASP.NET Core} } , Home Docs
  35. 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"
  36. Knowledge and Transactional chatbots Smart chatbots Bene ts Cost savings

    Automation of repetitive tasks 24/7 Scalable Engaged users Customer satisfaction { {Chatbots Chatbots} }
  37. 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} }
  38. { {Live Demo Live Demo} } { {Conversational UI Component

    for ASP.NET Conversational UI Component for ASP.NET} }
  39. { {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