TechDays 2013 Jari Kallonen: What's New WebForms 4.5

Régis Laurent Director of Operations, Global Knowledge Competencies include: Gold Learning Silver System Management

ASP.NET WebForms 4.5 uudet piirteet

Jari Kallonen Software Specialist at Tieturi Oy

Régis Laurent Director of Operations, Global Knowledge Competencies include: Gold Learning Silver System Management

- Strongly Typed Data Controls

- Model Binding - HTML Encoded

Data-Binding Expressions

- Unobtrusive Validation

- HTML5 tuki - Muuta sälää

Tyypitetty Data Bindings

<div> <asp:Repeater ID="CustomerRepeater" runat="server" ItemType="Demoilua.Model.Henkilo"> <ItemTemplate> <li> ID:<%# Item.ID %> Nimi:<%# Item.Nimi %> Puhelin:<%# Item.Puhelin %> </li> </ItemTemplate> </asp:Repeater> </div>

Model Binding – Tiedon valinta

public IEnumerable<Demoilua.Model.Henkilo> GetData() { return Demoilua.Model.HenkiloRepository.HaeKaikki(); }

<div> <asp:Repeater ID="CustomerRepeater" runat="server" ItemType="Demoilua.Model.Henkilo” SelectMethod="GetData"> <ItemTemplate> <li> ID:<%# Item.ID %> Nimi:<%# Item.Nimi %> Puhelin:<%# Item.Puhelin %> </li> </ItemTemplate> </asp:Repeater> </div>

Value Providers - QueryString

public IQueryable<Customer> GetCustomers( [QueryString]string keyword) { return CustomerRepository.GetByName(keyword); }

Value Providers - Kontrollit

public IQueryable<Customer> GetCustomers( [Control("customers")]int? id) { if (id.HasValue) return CustomerRepository.GetOne(id); else return CustomerRepository.GetAll(); }

Value Provider vaihtoehtoja

• Controls • Query string values • View Data • Session State • Cookies • Posted Form data • View State • Custom

2-suuntainen Binding

<EditItemTemplate> ID:<asp:TextBox ID="IDTextBox" runat="server" Text='<%# BindItem.ID %>' /> LastName:<asp:TextBox ID="NimiTextBox" runat="server" Text='<%# BindItem.Nimi %>' /> Puhelin:<asp:TextBox ID="PuhelinTextBox" runat="server" Text='<%# BindItem.Puhelin %>' /> </EditItemTemplate>

Demo

Binding, Value Providers

Markup based validointi

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="nimiTextBox" ErrorMessage="Nimi puuttuu" ForeColor="Red" />

Unobtrusive (”huomaamaton”) validointi

Pienentää sivun kokoa vähentämällä inline Javacript koodin käyttöä ->Käyttää HTML5 data-* attribuutteja • ValidationSettings:UnobtrusiveValidationMode • Asetus: – Web.Config – Global.asax – Page luokka

javascript validointi

Unobtrusive validointi

Edellinen ”Unobstrusive” muodossa

Data annotaatiot Model luokassa

public class Henkilo { [Key] public int ID { get; set; } [Required] public string Nimi { get; set; } [Range(0, 130)] public int Ika { get; set; } [Phone] public string Puhelin { get; set; } [EmailAddress, StringLength(256)] public string Email { get; set; } }

Joitain Data Annotaatioita

• CreditCard • Phone • EmailAddress • Range • Compare • Url • FileExtensions • Required • Key • RegularExpression

Model luokan validointi

public void SaveCustomer(Customer customer) { if (ModelState.IsValid) { using (var db = new Demoilua.Model.ProductsContext()) { db.Customers.Add(customer); db.SaveChanges(); Response.Redirect("~/Customers.aspx"); } } }

Validointikontrollit

<asp:ValidationSummary runat="server" ShowModelStateErrors="true" ForeColor="Red" HeaderText="Please check the following errors:" /> <asp:ModelErrorMessage ModelStateKey="phone" runat="server" ForeColor="Red" />

Tulos:

Demo

Validointi

Request validointi

• Korvaa tarvittaessa HttpEncoderin • Auttaa suojautumaan cross-site scripting (XSS) ja LDAP injection hyökkäyksiltä • AntiXSS libraryssa – HtmlEncode, HtmlFormUrlEncode,HtmlAttributeEncode – XmlAttributesEncode, XmlEncode – UrlEncode , UrlPathEncode – CssEncode

4.5 Request validointi

<system.web> … <httpRuntime encoderType="System.Web.Security.AntiXss.AntiXssEncoder" /> </system.web>

Tuki await/async ja Task pohjaisille pyynnöille

• HTTP Modules EventHandlerTaskAsyncHelper TaskEventHandler • HTTP Handlers HttpTaskAsyncHandler

Async tuki

• Web.config <add key="aspnet:UseTaskFriendlySynchronizationContext" value="true"/> • Page directive <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductDetails.aspx.cs" Inherits="WebFormsLab.ProductDetails" Async="true" %>

Async Task esimerkki

RegisterAsyncTask(new PageAsyncTask(async (t) => { using (var wc = new WebClient()) { //aikaisemmin wc.DownloadFile await wc.DownloadFileTaskAsync( imageUrl, Server.MapPath(product.ImagePath)); } }));

HTML5 päivityksiä

• TextBox TextMode – Tukee email, datetime tyyppejä jne. • FileUpload – tuki useammalle upload tiedostolle – Selainriippuvainen • Validointikontrollit tukee HTML5 elementtejä • runat=“server” lisäksi URL osoite –<video runat=“server” src=“~/file.wmv”/>

ASP.NET Core päivityksiä

• WebSockets Protocol (IIS8) • Javascriptin ja CSS:n pakkaus (Bundling / Minification) • Suorituskyky – Yhteisten komponenttien jako (muistin kulutus) – Multi-core JIT käännös – Garbage Collection – Web sovellusten esilataukset

Javascriptin ja CSS:n pakkauksen määrittely

using System.Web.Optimization; //… public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include( "~/Scripts/WebForms/WebForms.js", "~/Scripts/WebForms/WebUIValidation.js", "~/Scripts/WebForms/MenuStandards.js", "~/Scripts/WebForms/Focus.js", "~/Scripts/WebForms/GridView.js“); } }

Visual Studio 2012 parannuksia

HTML Editor Smart Tasks, loppu/alku elementin päivitys HTML 5 snippets, parempi Intellisense, … http://www.asp.net/vnext/overview/whitepapers/whats-new#_Toc303354490 JavaScript Editor Code outlining, Go to Definition, … http://www.asp.net/vnext/overview/whitepapers/whats-new#_Toc303354500 CSS Editor Color Picker, CSS 3 support, custom region (/*#region Menu */ … /*#endregion */ http://www.asp.net/vnext/overview/whitepapers/whats-new#_Toc303354508

Yhteenveto

Model pohjainen binding Validointi Laajentunut Html 5 tuki Async/Await ja Task –pohjaiset toiminnot Suorituskykyä Coreen

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentations. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Kiitos ja kumarrus Jari.kallonen@tieturi.fi