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