Novinky webových formulářů v ASP.NET 4.5

podle Web Camp Team

Nová verze webových formulářů ASP.NET přináší řadu vylepšení zaměřených na vylepšení uživatelského prostředí při práci s daty.

V předchozích verzích webových formulářů jste při použití datové vazby k vygenerování hodnoty člena objektu použili výrazy vazby dat Bind() nebo Eval(). V nové verzi ASP.NET můžete deklarovat, k jakému typu dat bude ovládací prvek vázán pomocí nové Vlastnosti ItemType. Nastavení této vlastnosti vám umožní používat proměnnou silného typu k získání úplných výhod vývojového prostředí sady Visual Studio, jako je IntelliSense, navigace členů a kontrola času kompilace.

Pomocí ovládacích prvků vázaných na data teď můžete také určit vlastní metody pro výběr, aktualizaci, odstranění a vkládání dat, což zjednodušuje interakci mezi ovládacími prvky stránky a logikou aplikace. Kromě toho byly do ASP.NET přidány možnosti vazby modelu, což znamená, že můžete mapovat data ze stránky přímo na parametry typu metody.

Ověřování uživatelského vstupu by mělo být také jednodušší s nejnovější verzí webových formulářů. Teď můžete anotovat třídy modelu pomocí ověřovacích atributů z oboru názvů System.ComponentModel.DataAnnotations a požádat o ověření uživatelského vstupu pomocí těchto informací. Ověřování na straně klienta ve webových formulářích je teď integrované s jQuery a poskytuje čistější kód na straně klienta a nerušivé funkce JavaScriptu.

V oblasti ověření požadavku jsme vylepšili, aby bylo snazší selektivně vypnout ověřování požadavků pro konkrétní části aplikací nebo číst neplatná data žádosti.

Některé vylepšení ovládacích prvků serveru Webových formulářů, které využívají nové funkce HTML5:

Vlastnost TextMode ovládacího prvku TextBox byla aktualizována tak, aby podporovala nové typy vstupu HTML5, jako jsou e-mail, datum a tak dále.

Ovládací prvek FileUpload teď podporuje více nahrávání souborů z prohlížečů, které podporují tuto funkci HTML5.

Ovládací prvky validátoru teď podporují ověřování vstupních elementů HTML5.

Nové elementy HTML5, které mají atributy, které představují adresu URL, nyní podporují runat="server". V důsledku toho můžete použít konvence ASP.NET v cestách URL, jako je operátor ~ k reprezentaci kořenového adresáře aplikace (například <video runat="server" src="~/myVideo.wmv"></video>).

Ovládací prvek UpdatePanel byl opraven tak, aby podporoval publikování vstupních polí HTML5.

Na oficiálním portálu ASP.NET najdete další příklady nových funkcí v ASP.NET WebForms 4.5: Co je nového v ASP.NET 4.5 a sadě Visual Studio 2012

Všechny ukázkové kódy a fragmenty kódu jsou součástí sady Web Camp Training Kit.

Cíle

V tomto praktickém cvičení se naučíte:

Použití výrazů datové vazby silného typu
Použití nových funkcí vazby modelu ve webových formulářích
Použití zprostředkovatelů hodnot k mapování dat stránky na metody kódu
Použití datových poznámek k ověření vstupu uživatele
Využití nerušivého ověřování na straně klienta pomocí jQuery ve webových formulářích
Implementace podrobného ověřování požadavků
Implementace asynchronního zpracování stránek ve webových formulářích

Požadavky

K dokončení tohoto cvičení musíte mít následující položky:

Microsoft Visual Studio Express 2012 pro web nebo superior (pokyny k instalaci najdete v dodatku A ).

Nastavení

Instalace fragmentů kódu

Pro usnadnění práce je většina kódu, který budete spravovat v tomto cvičení, k dispozici jako fragmenty kódu sady Visual Studio. Chcete-li nainstalovat fragmenty kódu, spusťte soubor .\Source\Setup\CodeSnippets.vsi .

Pokud nemáte zkušenosti s fragmenty kódu sady Visual Studio Code a chcete se naučit, jak je používat, můžete odkazovat na dodatek z tohoto dokumentu "Příloha C: Použití fragmentů kódu".

Cvičení

Toto praktické cvičení zahrnuje následující cvičení:

Cvičení 1: Vazba modelu ve webových formulářích ASP.NET
Cvičení 2: Ověření dat
Cvičení 3: Asynchronní zpracování stránek ve webových formulářích ASP.NET

Poznámka:

Každé cvičení je doprovázeno koncovou složkou obsahující výsledné řešení, které byste měli získat po dokončení cvičení. Toto řešení můžete použít jako vodítko, pokud potřebujete další pomoc s prací ve cvičeních.

Odhadovaná doba dokončení tohoto cvičení: 60 minut.

Cvičení 1: Vazba modelu ve webových formulářích ASP.NET

Nová verze webových formulářů ASP.NET přináší řadu vylepšení zaměřených na vylepšení prostředí při práci s daty. V tomto cvičení se dozvíte o ovládacích prvcích dat silného typu a vazbě modelu.

Úkol 1 – použití datových vazeb se silnými typy

V této úloze zjistíte nové vazby silného typu dostupné v ASP.NET 4.5.

Otevřete řešení Begin umístěné ve složce Source/Ex1-ModelBinding/Begin/.
1. Než budete pokračovat, budete si muset stáhnout některé chybějící balíčky NuGet. Uděláte to tak, že kliknete na nabídku Projekt a vyberete Spravovat balíčky NuGet.
2. V dialogovém okně Spravovat balíčky NuGet klikněte na Obnovit , aby se stáhly chybějící balíčky.
3. Nakonec řešení sestavíte kliknutím na Sestavit | řešení.
  
  Poznámka:
  
  Jednou z výhod použití NuGetu je, že nemusíte dodávat všechny knihovny v projektu, což snižuje velikost projektu. Pomocí Nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config, budete moci stáhnout všechny požadované knihovny při prvním spuštění projektu. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.
Otevřete Customers.aspx stránku. Umístěte nečíslovaný seznam do hlavního ovládacího prvku a zahrňte ovládací prvek opakovače pro výpis každého zákazníka. Nastavte název opakovače na customersRepeater , jak je znázorněno v následujícím kódu.

V předchozích verzích webových formulářů byste při použití datové vazby k vygenerování hodnoty člena u objektu, na který vytváříte datovou vazbu, použili výraz datové vazby spolu s voláním metody Eval a předali název člena jako řetězec.

Za běhu budou tato volání funkce Eval používat odraz proti aktuálně vázanému objektu ke čtení hodnoty člena s daným názvem a zobrazí výsledek v HTML. Tento přístup usnadňuje vytvoření vazby dat s libovolnými, neshadovanými daty.

V sadě Visual Studio bohužel ztratíte mnoho skvělých funkcí vývojového prostředí, včetně IntelliSense pro názvy členů, podpory navigace (například Přejít k definici) a kontroly času kompilace.
```
...
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
  <h3>Customers</h3>
  <ul>
    <asp:Repeater ID="customersRepeater" runat="server">
      <ItemTemplate>
            <li>
                <%# Eval("FirstName") %>
                <%# Eval("LastName") %>
            </li>
      </ItemTemplate>
    </asp:Repeater>
  </ul>
  <a href="CustomerDetails.aspx">Add a New Customer</a>
</asp:Content>
```
Otevřete soubor Customers.aspx.cs.
Přidejte následující příkaz using.
```
using System.Linq;
```
V Page_Load metodě přidejte kód pro naplnění opakovače seznamem zákazníků.

(Fragment kódu – Web Forms Lab – Ex01 – Vazba zdroje dat zákazníků)
```
protected void Page_Load(object sender, EventArgs e)
{
    using (var db = new WebFormsLab.Model.ProductsContext())
    {
        this.customersRepeater.DataSource = db.Customers.ToList();
        this.customersRepeater.DataBind();
    }
}
```
Řešení používá EntityFramework společně s CodeFirst k vytvoření a přístupu k databázi. V následujícím kódu je customersRepeater vázán na materializovaný dotaz, který vrátí všechny zákazníky z databáze.
Stisknutím klávesy F5 spusťte řešení a přejděte na stránku Zákazníci a zobrazte opakovač v akci. Vzhledem k tomu, že řešení používá CodeFirst, databáze se při spuštění aplikace vytvoří a naplní v místní instanci SQL Expressu.

Výpis zákazníků s opakovačem

Poznámka:

V sadě Visual Studio 2012 je výchozím serverem pro vývoj webů služba IIS Express.
Zavřete prohlížeč a vraťte se do sady Visual Studio.

Nyní nahraďte implementaci, která bude používat vazby silného typu. Otevřete stránku Customers.aspx a pomocí nového atributu ItemType v opakovači nastavte typ Zákazníka jako typ vazby.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <asp:Repeater ID="customersRepeater" 
                  ItemType="WebFormsLab.Model.Customer" 
                  runat="server">
      <ItemTemplate>
         ...
      </ItemTemplate>
    </asp:Repeater>
  </ul>
  <a href="CustomerDetails.aspx">Add a New Customer</a>
</asp:Content>

ItemType vlastnost umožňuje deklarovat, ke kterému typu dat bude ovládací prvek vázán a umožňuje použít vazby silného typu uvnitř ovládacího prvku vázaného na data.

Obsah ItemTemplate nahraďte následujícím kódem.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  ...
  <ul>
    <asp:Repeater ID="customersRepeater" ItemType="WebFormsLab.Model.Customer" runat="server">
      <ItemTemplate>
        <li>
          <a href="CustomerDetails.aspx?id=<%#: Item.Id %>">
            <%#: Item.FirstName %> <%#: Item.LastName %>
          </a>
        </li>
      </ItemTemplate>
    </asp:Repeater>
  </ul>
  <a href="CustomerDetails.aspx">Add a New Customer</a>
</asp:Content>
```
Nevýhodou výše uvedených přístupů je, že volání Eval() a Bind() jsou zpožděná – to znamená, že předáte řetězce, které představují názvy vlastností. To znamená, že nemáte intellisense pro názvy členů, podporu pro navigaci v kódu (například Přejít k definici) ani podporu kontroly času kompilace.

Nastavení ItemType vlastnost způsobí, že se vygenerují dvě nové typové proměnné v oboru výrazů vazby dat: Item a BindItem. Tyto proměnné silného typu můžete použít ve výrazech datových vazeb a získat úplné výhody vývojového prostředí sady Visual Studio.

": " použitý ve výrazu automaticky zakóduje výstup, aby se zabránilo problémům se zabezpečením (například skriptovací útoky mezi weby). Tato notace byla k dispozici od verze .NET 4 pro zápis odpovědí, ale nyní je k dispozici také ve výrazech datových vazeb.

Poznámka:

Člen položky funguje pro jednosměrnou vazbu. Pokud chcete provést obousměrnou vazbu, použijte člen BindItem .

Podpora Technologie IntelliSense v vazbě silného typu
Stisknutím klávesy F5 spusťte řešení a přejděte na stránku Zákazníci a ujistěte se, že změny fungují podle očekávání.

Výpis podrobností o zákazníkovi
Zavřete prohlížeč a vraťte se do sady Visual Studio.

Úkol 2 – Představení vazby modelu ve webových formulářích

V předchozích verzích webových formulářů ASP.NET, kdy jste chtěli provést obousměrnou vazbu dat, a to jak načítání, tak aktualizace dat, bylo potřeba použít objekt Zdroje dat. Může se jednat o zdroj dat objektu, zdroj dat SQL, zdroj dat LINQ atd. Pokud ale váš scénář vyžadoval vlastní kód pro zpracování dat, museli jste použít zdroj dat objektu a to přineslo některé nevýhody. Například jste se potřebovali vyhnout složitým typům a při provádění logiky ověřování jste museli zpracovávat výjimky.

V nové verzi ASP.NET Webových formulářů podporují vazby modelu ovládací prvky vázané na data. To znamená, že můžete určit metody výběru, aktualizace, vložení a odstranění přímo v ovládacím prvku vázaném na data, které budou volat logiku ze souboru kódu nebo z jiné třídy.

Pokud se o tom chcete dozvědět víc, použijete GridView k výpisu kategorií produktů pomocí nového atributu SelectMethod . Tento atribut umožňuje zadat metodu pro načtení dat GridView.

Otevřete Products.aspx stránku a vložte GridView. Nakonfigurujte Objekt GridView, jak je znázorněno níže, aby používal vazby silného typu a povolil řazení a stránkování.

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
 <asp:GridView ID="categoriesGrid" runat="server"
    AutoGenerateColumns="false"
    ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryID">
    <Columns>
      <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" />
      <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" />
      <asp:BoundField DataField="Description" HeaderText="Description" />
      <asp:TemplateField HeaderText="# of Products">
        <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
      </asp:TemplateField>
    </Columns>
  </asp:GridView>
</asp:Content>

Pomocí nového atributu SelectMethod nakonfigurujte GridView tak, aby volal Metodu GetCategories k výběru dat.

<asp:GridView ID="categoriesGrid" runat="server"
    AutoGenerateColumns="false"
    ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
    SelectMethod="GetCategories">
  <Columns>
    <asp:BoundField DataField="CategoryId" HeaderText="ID" SortExpression="CategoryId" />
    <asp:BoundField DataField="CategoryName" HeaderText="Name" SortExpression="CategoryName" />
    <asp:BoundField DataField="Description" HeaderText="Description" />
    <asp:TemplateField HeaderText="# of Products">
      <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

Otevřete soubor Products.aspx.cs kódem a přidejte následující příkazy using.

(Fragment kódu – Web Forms Lab – Ex01 – Obory názvů)

using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using WebFormsLab.Model;

Přidejte do třídy Products soukromý člen a přiřaďte novou instanci ProductsContext. Tato vlastnost uloží kontext dat Entity Framework, který umožňuje připojení k databázi.
```
public partial class Products : System.Web.UI.Page
{
    private ProductsContext db = new ProductsContext();
    ...
```
Vytvořte metodu GetCategories pro načtení seznamu kategorií pomocí LINQ. Dotaz bude obsahovat Products vlastnost, aby GridView mohl zobrazit množství produktů pro každou kategorii. Všimněte si, že metoda vrací nezpracovaný objekt IQueryable, který představuje dotaz, který se má provést později v životním cyklu stránky.

(Fragment kódu – Web Forms Lab – Ex01 – GetCategories)
```
public IQueryable<Category> GetCategories()
{
  var query = this.db.Categories
    .Include(c => c.Products);

  return query;
}
```
Poznámka:

V předchozích verzích webových formulářů ASP.NET povolte řazení a stránkování pomocí vlastní logiky úložiště v kontextu zdroje dat objektu, který je potřeba k napsání vlastního kódu a přijetí všech potřebných parametrů. Teď, protože metody datové vazby můžou vracet IQueryable a to představuje dotaz, který se má stále provést, ASP.NET se může postarat o úpravu dotazu, aby se přidaly správné parametry řazení a stránkování.
Stisknutím klávesy F5 spusťte ladění webu a přejděte na stránku Produkty. Měli byste vidět, že GridView je naplněna kategoriemi vrácenými Metodou GetCategories.

Naplnění objektu GridView pomocí vazby modelu
Stiskněte shift+F5 Zastavit ladění.

Úkol 3 – Zprostředkovatelé hodnot v vazbě modelu

Vazba modelu umožňuje nejen určit vlastní metody pro práci s daty přímo v ovládacím prvku vázaném na data, ale také umožňuje mapovat data ze stránky na parametry z těchto metod. U parametru metody můžete k určení zdroje dat hodnoty použít atributy zprostředkovatele hodnot. Příklad:

Ovládací prvky na stránce
Hodnoty řetězců dotazu
Zobrazit data
Stav relace
Soubory cookie
Data publikovaného formuláře
Zobrazit stav
Podporují se také vlastní zprostředkovatelé hodnot.

Pokud jste použili ASP.NET MVC 4, všimnete si, že podpora vazby modelu je podobná. Tyto funkce byly převzaty z ASP.NET MVC a přesunuty do sestavení System.Web , aby je bylo možné používat i ve webových formulářích.

V této úloze aktualizujete GridView tak, aby filtrovala výsledky podle množství produktů pro každou kategorii, přičemž obdržíte parametr filtru s vazbou modelu.

Vraťte se na stránku Products.aspx .

V horní části objektu GridView přidejte Popisek a Pole se seznamem , abyste vybrali počet produktů pro každou kategorii, jak je znázorněno níže.

<h3>Categories</h3>
<asp:Label ID="Label1" runat="server" AssociatedControlID="minProductsCount">
     Show categories with at least this number of products:
</asp:Label>
<asp:DropDownList runat="server" ID="minProductsCount" AutoPostBack="true">
  <asp:ListItem Value="" Text="-" />
  <asp:ListItem Text="1" />
  <asp:ListItem Text="3" />
  <asp:ListItem Text="5" />
</asp:DropDownList>
<br/>

Přidejte do objektu GridView prázdnou hodnotu EmptyDataTemplate , která zobrazí zprávu, pokud neexistují žádné kategorie s vybraným počtem produktů.

<asp:GridView ID="categoriesGrid" runat="server"
    AutoGenerateColumns="false"
    ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
    SelectMethod="GetCategories">
  <Columns>
    <asp:BoundField DataField="CategoryId" HeaderText="ID" />
    <asp:BoundField DataField="CategoryName" HeaderText="Name" />
    <asp:BoundField DataField="Description" HeaderText="Description" />
    <asp:TemplateField HeaderText="# of Products">
      <ItemTemplate><%#: Item.Products.Count %></ItemTemplate>
    </asp:TemplateField>
  </Columns>
  <EmptyDataTemplate>
      No categories found with a product count of <%#: minProductsCount.SelectedValue %>
  </EmptyDataTemplate>
</asp:GridView>

Otevřete Products.aspx.cs kódu a přidejte následující příkaz using.
```
using System.Web.ModelBinding;
```
Upravte metodu GetCategories tak, aby přijímala celočíselné argumenty minProductsCount a vyfiltrujte vrácené výsledky. Chcete-li to provést, nahraďte metodu následujícím kódem.

(Fragment kódu – Web Forms Lab – Ex01 – GetCategories 2)
```
public IQueryable<Category> GetCategories([Control]int? minProductsCount)
{
    var query = this.db.Categories
    .Include(c => c.Products);

    if (minProductsCount.HasValue)
    {
        query = query.Where(c => c.Products.Count >= minProductsCount);
    }

    return query;
}
```
Nový atribut [Control] v argumentu minProductsCount bude ASP.NET vědět, že jeho hodnota musí být naplněna pomocí ovládacího prvku na stránce. ASP.NET vyhledá jakýkoli ovládací prvek odpovídající názvu argumentu (minProductsCount) a provede potřebné mapování a převod pro vyplnění parametru hodnotou ovládacího prvku.

Alternativně atribut poskytuje přetížený konstruktor, který umožňuje určit ovládací prvek, ze kterého chcete získat hodnotu.

Poznámka:

Jedním z cílů funkcí datových vazeb je snížit množství kódu, který je potřeba napsat pro interakci se stránkou. Kromě zprostředkovatele hodnot [Control] můžete v parametrech metody použít jiné zprostředkovatele vazby modelu. Některé z nich jsou uvedené v úvodu k úkolu.
Stisknutím klávesy F5 spusťte ladění webu a přejděte na stránku Produkty. V rozevíracím seznamu vyberte řadu produktů a všimněte si, jak je nyní objekt GridView aktualizován.

Filtrování objektu GridView s hodnotou rozevíracího seznamu
Zastavte ladění.

Úkol 4 – Použití vazby modelu pro filtrování

V této úloze přidáte druhý podřízený Objekt GridView, který zobrazí produkty ve vybrané kategorii.

Otevřete Products.aspx stránku a aktualizujte kategorie GridView, aby se automaticky vygenerovalo tlačítko Vybrat.

<asp:GridView ID="categoriesGrid" runat="server"
  AutoGenerateColumns="false"
  ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
  SelectMethod="GetCategories"
  AutoGenerateSelectButton="true">

Přidejte druhý GridView s názvem productsGrid v dolní části. Nastavte ItemType na WebFormsLab.Model.Product, DataKeyNames na ProductId a SelectMethod na GetProducts. Nastavte autoGenerateColumns na false a přidejte sloupce pro ProductId, ProductName, Description a UnitPrice.

<h3>Products</h3>
<asp:GridView ID="productsGrid" runat="server" 
    CellPadding="4"
    AutoGenerateColumns="false"
    ItemType="WebFormsLab.Model.Product"
    DataKeyNames="ProductId"
    SelectMethod="GetProducts">
    <Columns>
        <asp:BoundField DataField="ProductId" HeaderText="ID" />
        <asp:BoundField DataField="ProductName" HeaderText="Name" />
        <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price" />
    </Columns>
    <EmptyDataTemplate>
        Select a category above to see its products
    </EmptyDataTemplate>
</asp:GridView>

Otevřete soubor Products.aspx.cs kódu. Implementujte metodu GetProducts pro příjem ID kategorie z kategorie GridView a filtrování produktů. Vazba modelu nastaví hodnotu parametru pomocí vybraného řádku v categoriesGrid. Vzhledem k tomu, že název argumentu a název ovládacího prvku se neshodují, měli byste zadat název ovládacího prvku v zprostředkovateli hodnot ovládacího prvku.

(Fragment kódu – Web Forms Lab – Ex01 – GetProducts)
```
public IEnumerable<Product> GetProducts([Control("categoriesGrid")]int? categoryId)
{
    return this.db.Products.Where(p => p.CategoryId == categoryId);
}
```
Poznámka:

Tento přístup usnadňuje testování těchto metod. V kontextu testu jednotek, kde se webové formuláře nespouštějí, atribut [Control] neprovede žádnou konkrétní akci.

Otevřete Products.aspx stránku a vyhledejte produkty GridView. Aktualizujte produkty GridView tak, aby zobrazovaly odkaz pro úpravy vybraného produktu.

<h3>Products</h3>
<asp:GridView ID="productsGrid" runat="server" 
  CellPadding="4"
  AutoGenerateColumns="false"
  ItemType="WebFormsLab.Model.Product"
  DataKeyNames="ProductId"
  SelectMethod="GetProducts">
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <a href="ProductDetails.aspx?productId=<%#: Item.ProductId %>">View</a>
      </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="ProductId" HeaderText="ID" />
    <asp:BoundField DataField="ProductName" HeaderText="Name" />
    <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" />
    <asp:BoundField DataField="UnitPrice" HeaderText="Price" />
  </Columns>
  <EmptyDataTemplate>
    Select a category above to see its products
  </EmptyDataTemplate>
</asp:GridView>

Otevřete ProductDetails.aspx kód stránky a nahraďte metodu SelectProduct následujícím kódem.

(Fragment kódu – Web Forms Lab – Ex01 – Metoda SelectProduct)
```
public Product SelectProduct([QueryString]int? productId)
{
    return this.db.Products.Find(productId);
}
```
Poznámka:

Všimněte si, že atribut [QueryString] slouží k vyplnění parametru metody z parametru productId v řetězci dotazu.
Stisknutím klávesy F5 spusťte ladění webu a přejděte na stránku Produkty. Vyberte libovolnou kategorii z kategorií GridView a všimněte si, že produkty GridView jsou aktualizovány.

Zobrazení produktů z vybrané kategorie
Kliknutím na odkaz Zobrazit na produktu otevřete stránku ProductDetails.aspx.

Všimněte si, že stránka načítá produkt pomocí selectMethod pomocí parametru productId z řetězce dotazu.

Zobrazení podrobností o produktu

Poznámka:

V dalším cvičení se implementuje možnost zadat popis HTML.

Úloha 5 – Použití vazby modelu pro operace aktualizace

V předchozím úkolu jste použili vazbu modelu hlavně pro výběr dat. V této úloze se dozvíte, jak používat vazbu modelu v operacích aktualizací.

Kategorie GridView aktualizujete tak, aby uživatelé mohli aktualizovat kategorie.

Otevřete Products.aspx stránku a aktualizujte kategorie GridView tak, aby se automaticky vygenerovalo tlačítko Edit a pomocí nového atributu UpdateMethod určete metodu UpdateCategory pro aktualizaci vybrané položky.
```
<asp:GridView ID="categoriesGrid" runat="server"
    AutoGenerateColumns="false"
    ItemType="WebFormsLab.Model.Category" DataKeyNames="CategoryId"
    SelectMethod="GetCategories"
    AutoGenerateSelectButton="true"
    AutoGenerateEditButton="true"
    UpdateMethod="UpdateCategory">
```
Atribut DataKeyNames v GridView definuje, které jsou členy, které jedinečně identifikují objekt vázané na model, a proto, které jsou parametry, které by metoda aktualizace měla alespoň přijmout.
Otevřete Products.aspx.cs soubor s kódem a implementujte metodu UpdateCategory. Metoda by měla obdržet ID kategorie pro načtení aktuální kategorie, naplnění hodnot z GridView a pak aktualizovat kategorii.

(Fragment kódu – Web Forms Lab – Ex01 – UpdateCategory)
```
public void UpdateCategory(int categoryId)
{
    var category = this.db.Categories.Find(categoryId);

    this.TryUpdateModel(category);

    if (this.ModelState.IsValid)
    {
        this.db.SaveChanges();
    }
}
```
Nová metoda TryUpdateModel ve třídě Page je zodpovědná za naplnění objektu modelu pomocí hodnot z ovládacích prvků na stránce. V tomto případě nahradí aktualizované hodnoty z aktuálního řádku GridView upravovaného do objektu kategorie .

Poznámka:

V dalším cvičení se dozvíte, jak se při úpravě objektu používá ModelState.IsValid k ověřování dat zadaných uživatelem.
Spusťte web a přejděte na stránku Produkty. Umožňuje upravit kategorii. Zadejte nový název a kliknutím na tlačítko Aktualizovat změny zachovají.

Úpravy kategorií

Cvičení 2: Ověření dat

V tomto cvičení se dozvíte o nových funkcích ověřování dat v ASP.NET 4.5. V webových formulářích si můžete prohlédnout nové nepotřebné ověřovací funkce. Datové poznámky použijete ve třídách modelu aplikace pro ověřování uživatelských vstupů a nakonec se dozvíte, jak zapnout nebo vypnout ověření žádosti na jednotlivých ovládacích prvcích na stránce.

Úkol 1 – nerušivé ověření

Formuláře se složitými daty, včetně validátorů, mají tendenci generovat příliš mnoho javascriptového kódu na stránce, což může představovat přibližně 60 % kódu. Pokud je povolené neobtěžující ověřování, kód HTML bude vypadat čistěji a přehledněji.

V této části povolíte v ASP.NET nerušivé ověřování a porovnáte kód HTML vygenerovaný oběma konfiguracemi.

Otevřete Visual Studio 2012 a otevřete řešení Begin umístěné ve složce Source\Ex2-Validation\Begin v tomto cvičení. Případně můžete pokračovat v práci na stávajícím řešení z předchozího cvičení.
1. Pokud jste otevřeli poskytnuté řešení Begin , budete si muset před pokračováním stáhnout některé chybějící balíčky NuGet. Uděláte to tak, že v Průzkumník řešení kliknete na projekt WebFormsLab Spravovat balíčky NuGet.
2. V dialogovém okně Spravovat balíčky NuGet klikněte na Obnovit , aby se stáhly chybějící balíčky.
3. Nakonec řešení sestavíte kliknutím na Sestavit | řešení.
  
  Poznámka:
  
  Jednou z výhod použití NuGetu je, že nemusíte dodávat všechny knihovny v projektu, což snižuje velikost projektu. Pomocí Nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config, budete moci stáhnout všechny požadované knihovny při prvním spuštění projektu. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.
Stisknutím klávesy F5 spusťte webovou aplikaci. Přejděte na stránku Zákazníci a klikněte na odkaz Přidat nového zákazníka .
Klikněte pravým tlačítkem na stránku prohlížeče a výběrem možnosti Zobrazit zdroj otevřete kód HTML vygenerovaný aplikací.

Zobrazení kódu HTML stránky
Projděte zdrojový kód stránky a všimněte si, že ASP.NET vložil kód JavaScriptu a validátory dat na stránku, aby provedl ověření a zobrazil seznam chyb.

Ověření kódu JavaScriptu na stránce CustomerDetails
Zavřete prohlížeč a vraťte se do sady Visual Studio.
Teď povolíte nerušivé ověřování. Otevřete Web.Config a vyhledejte v části AppSettings klíč ValidationSettings:UnobtrusiveValidationMode . Nastavte hodnotu klíče na WebForms.
```
<configuration>
  ...
  <appSettings>
    <add key="aspnet:uselegacysynchronizationcontext" value="false" />
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>
```
Poznámka:

Tuto vlastnost můžete také nastavit v události "Page_Load" v případě, že chcete povolit nepotvrzující ověřování pouze pro některé stránky.
Otevřete CustomerDetails.aspx a stisknutím klávesy F5 spusťte webovou aplikaci.
Stisknutím klávesy F12 otevřete vývojářské nástroje IE. Po otevření vývojářských nástrojů vyberte kartu skriptu. V nabídce vyberte CustomerDetails.aspx a poznamenejte si, že skripty potřebné ke spuštění jQuery na stránce byly načteny do prohlížeče z místního webu.

Načtení javascriptových souborů jQuery přímo z místního serveru IIS
Zavřete prohlížeč a vraťte se do sady Visual Studio. Znovu otevřete soubor Site.Master a vyhledejte ScriptManager. Přidejte vlastnost EnableCdn atributu s hodnotou True. Tím se vynutí načtení jQuery z online adresy URL, nikoli z adresy URL místního webu.
Otevřete CustomerDetails.aspx v sadě Visual Studio. Stisknutím klávesy F5 spusťte web. Po otevření Internet Exploreru otevřete vývojářské nástroje stisknutím klávesy F12. Vyberte kartu Skript a pak se podívejte na rozevírací seznam. Všimněte si, že soubory jQuery JavaScript se už nenačítají z místního webu, ale spíše z online jQuery CDN.

Načtení javascriptových souborů jQuery z CDN
Znovu otevřete zdrojový kód stránky HTML pomocí možnosti Zobrazit zdroj v prohlížeči. Všimněte si, že povolením nepotvrzujícího ověření ASP.NET nahradil vložený kód JavaScriptu atributy data - *.

Nerušivý ověřovací kód

Poznámka:

V tomto příkladu jste viděli, jak se souhrn ověřování s datovými poznámkami zjednodušil na několik řádků HTML a JavaScript. Dříve bez nepotvrzujícího ověřování se tím více ověřovacích ovládacích prvků, které přidáte, zvýší tím větší ověřovací kód JavaScriptu.

Úkol 2 – ověřování modelu pomocí datových poznámek

ASP.NET 4.5 zavádí ověřování datových poznámek pro webové formuláře. Místo ověřování jednotlivých vstupů teď můžete definovat omezení ve třídách modelu a používat je ve všech webových aplikacích. V této části se dozvíte, jak používat datové poznámky k ověřování nového nebo editačního formuláře zákazníka.

Otevřete CustomerDetail.aspx stránku. Všimněte si, že křestní jméno a druhé jméno zákazníka v oddílech EditItemTemplate a InsertItemTemplate se ověřuje pomocí ovládacích prvků RequiredFieldValidator. Každý validátor je přidružený k určité podmínce, takže musíte zahrnout tolik validátorů jako podmínky, které chcete zkontrolovat.
Přidáním datových poznámek ověřte třídu modelu Zákazník. Otevřete Customer.cs třídu ve složce Model a ozdobte každou vlastnost pomocí atributů datových poznámek.

(Fragment kódu – Web Forms Lab - Ex02 - Datové poznámky)
```
namespace WebFormsLab.Model
{
  using System.Collections.Generic;
  using System.ComponentModel.DataAnnotations;

  public class Customer
  {
     [Key]
     public int Id { get; set; }

     [Required]
     public string FirstName { get; set; }

     [Required]
     public string LastName { get; set; }

     [Range(0, 130)]
     public int Age { get; set; }

     public Address Address { get; set; }

     [Phone]
     public string DaytimePhone { get; set; }

     [EmailAddress, StringLength(256)]
     public string EmailAddress { get; set; }
  }
}
```
Poznámka:

Rozhraní .NET Framework 4.5 rozšířilo stávající kolekci datových poznámek. Toto jsou některé datové poznámky, které můžete použít: [CreditCard], [Phone], [EmailAddress], [Range], [Compare], [Url], [FileExtensions], [Required], [Key], [RegularExpression].

Příklady použití:

[Klíč]: Určuje, že atribut je jedinečný identifikátor.

[Range(0.4; 0.5; ErrorMessage="{Write an error message}"]: Double range

[EmailAddress(ErrorMessage="Neplatný e-mail"), MaxLength(56)]: Dvě poznámky na stejném řádku.

Můžete také definovat vlastní chybové zprávy v rámci každého atributu.

Otevřete CustomerDetails.aspx a odeberte všechny RequiredFieldValidators pro pole křestního jména a příjmení v částech EditItemTemplate a InsertItemTemplate ovládacího prvku FormView.

<EditItemTemplate>
  <fieldset>
     <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p>
     <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' />
        &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" />
    </p>

     <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p>
     <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' />
          &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" />
    </p>
  ...
<InsertItemTemplate>        
 <fieldset>
   <p><asp:Label runat="server" AssociatedControlID="firstName">First Name: </asp:Label></p>
   <p><asp:TextBox runat="server" ID="firstName" Text='<%#: BindItem.FirstName %>' />           
     &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="firstName" ErrorMessage="Please enter a value for First Name" ForeColor="Red" />
    </p>

   <p><asp:Label runat="server" AssociatedControlID="lastName">Last Name: </asp:Label></p>                
    <p><asp:TextBox runat="server" ID="lastName" Text='<%#: BindItem.LastName %>' />
     &nbsp;<asp:RequiredFieldValidator runat="server" ControlToValidate="lastName" ErrorMessage="Please enter a value for Last Name" ForeColor="Red" />
    </p>
  ...

Poznámka:

Jednou z výhod použití datových poznámek je, že logika ověřování není na stránkách vaší aplikace duplikovaná. Definujete ho jednou v modelu a použijete ho na všech stránkách aplikace, které manipulují s daty.

Otevřete CustomerDetails.aspx kódem a vyhledejte metodu SaveCustomer. Tato metoda se volá při vložení nového zákazníka a obdrží parametr Customer z hodnot ovládacího prvku FormView. Když dojde k mapování mezi ovládacími prvky stránky a objektem parametru, ASP.NET spustí ověření modelu pro všechny atributy datových poznámek a vyplní slovník ModelState zjištěnými chybami, pokud existuje.

ModelState.IsValid vrátí hodnotu true pouze v případě, že jsou všechna pole v modelu po ověření platná.
```
public void SaveCustomer(Customer customer) 
{
    if (this.ModelState.IsValid)
    { 
        using (var db = new ProductsContext())
        {
            ...
```
Na konec stránky CustomerDetails přidejte ovládací prvek ValidationSummary, který zobrazí seznam chyb modelu.
```
</fieldset>
    </InsertItemTemplate>
  </asp:FormView>

  <asp:ValidationSummary runat="server" ShowModelStateErrors="true" 
       ForeColor="Red" HeaderText="Please check the following errors:"/>
</asp:Content>
```
ShowModelStateErrors je nová vlastnost v ValidationSummary ovládacího prvku, který při nastavení na hodnotu true zobrazí ovládací prvek chyby ze slovníku ModelState. Tyto chyby pocházejí z ověření datových poznámek.
Stisknutím klávesy F5 spusťte webovou aplikaci. Vyplňte formulář některými chybnými hodnotami a kliknutím na Uložit spusťte ověření. Všimněte si souhrnu chyb v dolní části.

Ověřování pomocí datových poznámek

Úloha 3 – Zpracování chyb vlastní databáze pomocí modelu ModelState

V předchozí verzi webových formulářů může zpracování chyb databáze, jako je příliš dlouhý řetězec nebo porušení jedinečného klíče, zahrnovat vyvolání výjimek v kódu úložiště a následné zpracování výjimek v kódu za účelem zobrazení chyby. K provedení něčeho relativně jednoduchého je potřeba velké množství kódu.

Ve webových formulářích 4.5 lze objekt ModelState použít k zobrazení chyb na stránce, a to buď z modelu, nebo z databáze, konzistentně.

V této úloze přidáte kód pro správné zpracování výjimek databáze a zobrazíte příslušné zprávy uživateli pomocí objektu ModelState.

Zatímco aplikace je stále spuštěná, zkuste aktualizovat název kategorie pomocí duplicitní hodnoty.

Aktualizace kategorie s duplicitním názvem

Všimněte si, že je vyvolán výjimka z důvodu omezení "unique" sloupce CategoryName .

Výjimka pro názvy duplicitních kategorií
Zastavte ladění. V souboru Products.aspx.cs kódem aktualizujte metodu UpdateCategory tak, aby zpracovávala výjimky vyvolané databází. Metoda SaveChanges() volání a přidání chyby do objektu ModelState.

Nová metoda TryUpdateModel aktualizuje objekt kategorie načtený z databáze pomocí dat formuláře poskytovaných uživatelem.

(Fragment kódu – Web Forms Lab – Ex02 – Chyby popisovače UpdateCategory)
```
public void UpdateCategory(int categoryId)
{
  var category = this.db.Categories.Find(categoryId);

  this.TryUpdateModel(category);

  if (this.ModelState.IsValid)
  {
    try
    {
      this.db.SaveChanges();
    }
    catch (DbUpdateException)
    {
      var message = string.Format("A category with the name {0} already exists.", category.CategoryName);
      this.ModelState.AddModelError("CategoryName", message);
    }
  }
}
```
Poznámka:

V ideálním případě byste museli identifikovat příčinu DbUpdateException a zkontrolovat, jestli je původní příčinou porušení jedinečného omezení klíče.

Otevřete Products.aspx a přidejte ovládací prvek ValidationSummary pod kategorie GridView, aby se zobrazil seznam chyb modelu.

<asp:GridView ID="categoriesGrid" runat="server"
  ...
</asp:GridView>

<asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowModelStateErrors="true" />

<h3>Products</h3>

Spusťte web a přejděte na stránku Produkty. Pokuste se aktualizovat název kategorie pomocí duplicitní hodnoty.

Všimněte si, že výjimka byla zpracována a chybová zpráva se zobrazí v ovládacím prvku ValidationSummary .

Chyba duplicitní kategorie

Úkol 4 – Ověření požadavku ve webových formulářích ASP.NET 4.5

Funkce ověřování požadavků v ASP.NET poskytuje určitou úroveň výchozí ochrany před útoky na skriptování mezi weby (XSS). V předchozích verzích ASP.NET bylo ve výchozím nastavení povoleno ověření požadavku a bylo možné ho zakázat jenom pro celou stránku. S novou verzí ASP.NET webových formulářů teď můžete zakázat ověření požadavku pro jeden ovládací prvek, provést opožděné ověření žádosti nebo získat přístup k neověřeným datům žádosti (buďte opatrní, pokud ano!).

Stisknutím kombinace kláves Ctrl+F5 spusťte web bez ladění a přejděte na stránku Produkty. Vyberte kategorii a potom klikněte na odkaz Upravit u některého z produktů.
Zadejte popis obsahující potenciálně nebezpečný obsah, například značky HTML. Všimněte si výjimky vyvolané ověřením požadavku.

Úprava produktu s potenciálně nebezpečným obsahem

Výjimka vyvolaná kvůli ověření požadavku
Zavřete stránku a stisknutím shift +F5 v sadě Visual Studio zastavte ladění.
Otevřete ProductDetails.aspx stránku a vyhledejte textové pole popisu.
Přidejte novou Vlastnost ValidateRequestMode do TextBoxu a nastavte její hodnotu na Disabled.

Nový atribut ValidateRequestMode umožňuje v každém ovládacím prvku zakázat podrobné ověření požadavku. To je užitečné, když chcete použít vstup, který může přijímat kód HTML, ale chcete zachovat ověřování pro zbytek stránky.
```
<p>
  <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" 
            Cols="60" Rows="8" Text='<%# BindItem.Description %>' 
    ValidateRequestMode="Disabled" />
</p>
```
Stisknutím klávesy F5 spusťte webovou aplikaci. Znovu otevřete stránku upravit produkt a vyplňte popis produktu včetně značek HTML. Všimněte si, že teď můžete do popisu přidat obsah HTML.

Ověření požadavku je pro popis produktu zakázané.

Poznámka:

V produkční aplikaci byste měli upravit kód HTML zadaný uživatelem, aby se zajistilo, že jsou zadány pouze bezpečné značky HTML (například neexistují žádné <značky skriptu> ). K tomu můžete použít knihovnu Microsoft Web Protection Library.
Znovu upravte produkt. Do pole Název zadejte kód HTML a klikněte na Uložit. Všimněte si, že ověření požadavku je pro pole Popis zakázané a zbývající pole se stále ověřují proti potenciálně nebezpečnému obsahu.

Ve zbývajících polích je povolené ověření požadavku.

ASP.NET webových formulářů 4.5 obsahuje nový režim ověřování požadavků, který umožňuje ověřování požadavků lazily. Pokud je u ověřovacího režimu požadavku nastavená hodnota 4.5, aktivuje se ověření požadavku na část kódu Request.Form["key"] ASP.NET 4.5 ověření požadavku pouze pro tento konkrétní prvek v kolekci formulářů.

Kromě toho ASP.NET 4.5 teď zahrnuje základní kódovací rutiny z knihovny Microsoft Anti-XSS v4.0. Rutiny kódování Anti-XSS jsou implementovány novým typem AntiXssEncoder nalezeným v novém oboru názvů System.Web.Security.AntiXss. Když je parametr encoderType nakonfigurovaný tak, aby používal AntiXssEncoder, veškeré kódování výstupu v rámci ASP.NET automaticky používá nové rutiny kódování.
ASP.NET ověření požadavku 4.5 podporuje také neověřený přístup k žádostem o data. ASP.NET 4.5 přidá novou vlastnost kolekce do objektu HttpRequest s názvem Unvalidated. Když přejdete na HttpRequest.Unvalidated , máte přístup ke všem běžným částem dat požadavků, včetně formulářů, řetězců dotazů, souborů cookie, adres URL atd.

Request.Unvalidated – objekt

Poznámka:

Používejte prosím vlastnost HttpRequest.Unvalidated s opatrností! Ujistěte se, že u nezpracovaných dat požadavku pečlivě provádíte vlastní ověření, abyste zajistili, že nebezpečný text není zaokrouhlený a nevykreslí se zpět nespektěným zákazníkům.

Cvičení 3: Asynchronní zpracování stránek ve webových formulářích ASP.NET

V tomto cvičení se seznámíte s novými funkcemi asynchronního zpracování stránek ve webových formulářích ASP.NET.

Úkol 1 – aktualizace stránky s podrobnostmi o produktu pro nahrání a zobrazení obrázků

V této úloze aktualizujete stránku s podrobnostmi o produktu, aby uživatel mohl zadat adresu URL obrázku produktu a zobrazit ji v zobrazení jen pro čtení. Místní kopii zadané image vytvoříte tak, že ji stáhnete synchronně. V další úloze aktualizujete tuto implementaci, aby fungovala asynchronně.

Otevřete Visual Studio 2012 a načtěte řešení Begin umístěné ve složce Source\Ex3-Async\Begin ze složky tohoto testovacího prostředí. Případně můžete pokračovat v práci na stávajícím řešení z předchozích cvičení.
1. Pokud jste otevřeli poskytnuté řešení Begin , budete si muset před pokračováním stáhnout některé chybějící balíčky NuGet. Uděláte to tak, že v Průzkumník řešení kliknete na projekt WebFormsLab a vyberete Spravovat balíčky NuGet.
2. V dialogovém okně Spravovat balíčky NuGet klikněte na Obnovit , aby se stáhly chybějící balíčky.
3. Nakonec řešení sestavíte kliknutím na Sestavit | řešení.
  
  Poznámka:
  
  Jednou z výhod použití NuGetu je, že nemusíte dodávat všechny knihovny v projektu, což snižuje velikost projektu. Pomocí Nástrojů NuGet Power Tools zadáte verze balíčků v souboru Packages.config, budete moci stáhnout všechny požadované knihovny při prvním spuštění projektu. Proto budete muset tyto kroky spustit po otevření existujícího řešení z tohoto testovacího prostředí.

Otevřete zdroj stránky ProductDetails.aspx a přidejte pole do ItemTemplate formuláře a zobrazte obrázek produktu.

<ItemTemplate>
     <fieldset>
          <p><b><asp:Label ID="Label2" runat="server" AssociatedControlID="itemProductName">Name:</asp:Label></b></p>
          <p><asp:Label runat="server" ID="itemProductName" Text='<%#: Item.ProductName %>' /></p>
          <p><b><asp:Label ID="Label3" runat="server" AssociatedControlID="itemDescription">Description (HTML):</asp:Label></b></p>
          <p><asp:Label runat="server" ID="itemDescription" Text='<%# Item.Description %>' /></p>
          <p><b><asp:Label ID="Label4" runat="server" AssociatedControlID="itemUnitPrice">Price:</asp:Label></b></p>
          <p><asp:Label runat="server" ID="itemUnitPrice" Text='<%#: Item.UnitPrice %>' /></p>

          <p><b><asp:Label ID="Label5" runat="server" AssociatedControlID="itemUnitPrice">Image:</asp:Label></b></p>
          <p>
                <img src="<%# string.IsNullOrEmpty(Item.ImagePath) ? "/Images/noimage.jpg" : 
                Item.ImagePath %>" alt="Image" />
          </p>

          <br />
          <p>
                <asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Edit" />&nbsp;
                <asp:HyperLink NavigateUrl="~/Products.aspx" Text="Back" runat="server" />
          </p>
     </fieldset>
</ItemTemplate>

Přidejte pole pro zadání adresy URL obrázku v EditTemplate objektu FormView.

<fieldset>
     <p><asp:Label ID="Label2" runat="server" AssociatedControlID="ProductName">Name:</asp:Label></p>
     <p><asp:TextBox runat="server" ID="ProductName" Text='<%#: BindItem.ProductName %>' /></p>
     <p><asp:Label ID="Label3" runat="server" AssociatedControlID="Description">Description (HTML):</asp:Label></p>
     <p>
          <asp:TextBox runat="server" ID="Description" TextMode="MultiLine" Cols="60" Rows="8" Text='<%# BindItem.Description %>'
                ValidateRequestMode="Disabled" />
     </p>
     <p><asp:Label ID="Label4" runat="server" AssociatedControlID="UnitPrice">Price:</asp:Label></p>
     <p><asp:TextBox runat="server" ID="UnitPrice" Text='<%#: BindItem.UnitPrice %>' /></p>

     <p><asp:Label ID="Label1" runat="server" AssociatedControlID="ImagePath">Image URL:</asp:Label></p>
     <p><asp:TextBox runat="server" ID="ImagePath" Text='<%#:  BindItem.ImagePath %>' /></p>

     <br />
     <p>
          <asp:Button runat="server" CommandName="Update" Text="Save" />
          <asp:Button runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" />
     </p>
</fieldset>

Otevřete soubor ProductDetails.aspx.cs kódu a přidejte následující direktivy oboru názvů.

(Fragment kódu – Web Forms Lab – Ex03 – Obory názvů)
```
using System.IO;
using System.Net;
using System.Web;
```

Vytvořte metodu UpdateProductImage pro ukládání vzdálených imagí do místní složky Obrázky a aktualizujte entitu produktu novou hodnotou umístění image.

(Fragment kódu – Web Forms Lab – Ex03 – UpdateProductImage)

private void UpdateProductImage(Product product)
{
    string imageUrl = product.ImagePath;

    if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
    {
        product.ImagePath = string.Format(
                                 "/Images/{0}{1}", 
                                 product.ProductId, 
                                 Path.GetExtension(imageUrl));

        using (var wc = new WebClient())
        {
            wc.DownloadFile(imageUrl, Server.MapPath(product.ImagePath));
        }
    }
}

Aktualizujte metodu UpdateProduct tak, aby volala metodu UpdateProductImage .

(Fragment kódu – Web Forms Lab – Ex03 – Volání UpdateProductImage)

public void UpdateProduct(int productId)
{
    var product = this.db.Products.Find(productId);

    this.TryUpdateModel(product);

    this.UpdateProductImage(product);

    if (this.ModelState.IsValid)
    {
        this.db.SaveChanges();
    }
}

Spusťte aplikaci a pokuste se nahrát image produktu.

Nastavení obrázku pro produkt

Úkol 2 – Přidání asynchronního zpracování na stránku s podrobnostmi o produktu

V této úloze aktualizujete stránku s podrobnostmi o produktu, aby fungovala asynchronně. Pomocí ASP.NET asynchronního zpracování stránky 4.5 vylepšíte dlouhotrvající úlohu – proces stahování obrázku.

Asynchronní metody ve webových aplikacích lze použít k optimalizaci způsobu, jakým se používají fondy vláken ASP.NET. Ve ASP.NET existuje omezený počet vláken ve fondu vláken pro účast v žádostech, takže pokud jsou všechna vlákna zaneprázdněna, ASP.NET začne zamítat nové požadavky, odesílá chybové zprávy aplikace a zpřístupňuje váš web.

Časově náročné operace na vašem webu jsou skvělými kandidáty pro asynchronní programování, protože zabírají přiřazené vlákno po dlouhou dobu. To zahrnuje dlouhotrvající požadavky, stránky s mnoha různými prvky a stránkami, které vyžadují offline operace, jako je dotazování databáze nebo přístup k externímu webovému serveru. Výhodou je, že pokud používáte asynchronní metody pro tyto operace, zatímco stránka zpracovává, vlákno se uvolní a vrátí do fondu vláken a lze jej použít k účasti na nové žádosti o stránku. To znamená, že stránka začne zpracovávat v jednom vlákně z fondu vláken a po dokončení asynchronního zpracování může dokončit zpracování v jiném vlákně.

Otevřete ProductDetails.aspx stránku. Přidejte atribut Async v elementu Page a nastavte ho na true. Tento atribut informuje ASP.NET, aby implementovali rozhraní IHttpAsyncHandler.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="ProductDetails.aspx.cs" Inherits="WebFormsLab.ProductDetails"
    Async="true" %>

Přidejte popisek v dolní části stránky, aby se zobrazily podrobnosti o vláknech, na kterých je stránka spuštěná.

<EmptyDataTemplate>Product not found</EmptyDataTemplate>
  </asp:FormView>

  <asp:Label ID="threadsMessageLabel" runat="server" />
</asp:Content>

Otevřete ProductDetails.aspx.cs a přidejte následující direktivy oboru názvů.

(Fragment kódu – Web Forms Lab – Ex03 – Obory názvů 2)
```
using System.Web.UI;
using System.Threading;
```
Upravte metodu UpdateProductImage tak, aby se image stáhla pomocí asynchronní úlohy. Metodu WebClient DownloadFile nahradíte metodou DownloadFileTaskAsync a zahrnete klíčové slovo await .

(Fragment kódu – Web Forms Lab – Ex03 – UpdateProductImage Async)
```
private void UpdateProductImage(Product product)
{
    string imageUrl = product.ImagePath;

    if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
    {
        product.ImagePath = string.Format(
            "/Images/{0}{1}", 
            product.ProductId, 
            Path.GetExtension(imageUrl));

        this.RegisterAsyncTask(new PageAsyncTask(async (t) =>
        {
            using (var wc = new WebClient())
            {
                await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath));
            }
        }));
    }
}
```
RegisterAsyncTask zaregistruje novou stránku asynchronní úlohu, která se má spustit v jiném vlákně. Obdrží výraz lambda s úlohou (t), která se má spustit. Klíčové slovo await v DownloadFileTaskAsync metoda převede zbytek metody na zpětné volání, které je vyvoláno asynchronně po dokončení Metody DownloadFileTaskAsync . ASP.NET obnoví provádění metody tak, že automaticky zachová všechny původní hodnoty požadavku HTTP. Nový asynchronní programovací model v .NET 4.5 umožňuje psát asynchronní kód, který vypadá velmi podobně jako synchronní kód, a nechat kompilátor zpracovat komplikace funkcí zpětného volání nebo kódu pokračování.

Poznámka:

RegisterAsyncTask a PageAsyncTask už byly k dispozici od verze .NET 2.0. Klíčové slovo await je nové z asynchronního programovacího modelu .NET 4.5 a lze jej použít společně s novými metodami TaskAsync z objektu .NET WebClient.

Přidejte kód pro zobrazení vláken, na kterých byl kód spuštěn a dokončen. Uděláte to tak, že aktualizujete metodu UpdateProductImage následujícím kódem.

(Fragment kódu – Web Forms Lab – Ex03 – Zobrazení vláken)

private void UpdateProductImage(Product product)
{
  string imageUrl = product.ImagePath;

  if (!string.IsNullOrEmpty(imageUrl) && !VirtualPathUtility.IsAbsolute(imageUrl))
  {
    product.ImagePath = string.Format(
         "/Images/{0}{1}", 
         product.ProductId, 
         Path.GetExtension(imageUrl));

    this.RegisterAsyncTask(new PageAsyncTask(async (t) =>
    {
      var startThread = Thread.CurrentThread.ManagedThreadId;

      using (var wc = new WebClient())
      {
        await wc.DownloadFileTaskAsync(imageUrl, this.Server.MapPath(product.ImagePath));
      }

      var endThread = Thread.CurrentThread.ManagedThreadId;

      this.threadsMessageLabel.Text = string.Format("Started on thread: {0}<br /> Finished on thread: {1}", startThread, endThread);
    }));
  }
}

Otevřete soubor Web.config webu. Přidejte následující proměnnou appSetting.
```
<add key="aspnet:UseTaskFriendlySynchronizationContext" value="true"/>
```
Stisknutím klávesy F5 spusťte aplikaci a nahrajte obrázek produktu. Všimněte si ID vláken, ve kterých se kód spustil a dokončil, se může lišit. Důvodem je to, že asynchronní úlohy běží na samostatném vlákně od fondu vláken ASP.NET. Po dokončení úlohy ASP.NET úkol vrátí zpět do fronty a přiřadí všechna dostupná vlákna.

Asynchronní stahování obrázku

Poznámka:

Kromě toho můžete tuto aplikaci nasadit do Azure podle dodatku B: Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu.

Shrnutí

V tomto praktickém cvičení byly vyřešeny a demonstrovány následující koncepty:

Použití výrazů datové vazby silného typu
Použití nových funkcí vazby modelu ve webových formulářích
Použití zprostředkovatelů hodnot k mapování dat stránky na metody kódu
Použití datových poznámek k ověření vstupu uživatele
Využití nerušivého ověřování na straně klienta pomocí jQuery ve webových formulářích
Implementace podrobného ověřování požadavků
Implementace asynchronního zpracování stránek ve webových formulářích

Příloha A: Instalace sady Visual Studio Express 2012 pro web

Microsoft Visual Studio Express 2012 pro web nebo jinou verzi Expressu můžete nainstalovat pomocí instalačního programu Webová platforma Microsoft. Následující pokyny vás provedou postupem potřebným k instalaci sady Visual Studio Express 2012 pro web pomocí instalačního programu Webová platforma Microsoft.

Přejděte na [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Pokud už máte nainstalovaný instalační program webové platformy, můžete ho také otevřít a vyhledat produkt Visual Studio Express 2012 pro web pomocí sady Azure SDK.
Klikněte na Nainstalovat. Pokud nemáte instalační program webové platformy, budete přesměrováni na jeho první stažení a instalaci.
Po otevření instalačního programu webové platformy spusťte instalaci kliknutím na nainstalovat .

Instalace sady Visual Studio Express
Přečtěte si všechny licence a podmínky produktů a pokračujte kliknutím na Přijmout .

Přijetí licenčních podmínek
Počkejte, až se proces stahování a instalace dokončí.

Průběh instalace
Po dokončení instalace klepněte na tlačítko Dokončit.

Instalace byla dokončena.
Kliknutím na tlačítko Ukončit zavřete instalační program webové platformy.
Pokud chcete otevřít Visual Studio Express pro web, přejděte na úvodní obrazovku a začněte psát "VS Express" a potom klikněte na dlaždici VS Express pro web.

Dlaždice VS Express pro web

Příloha B: Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu

V tomto dodatku se dozvíte, jak vytvořit nový web z webu Azure Portal a publikovat aplikaci, kterou jste získali v testovacím prostředí, a využít tak funkci publikování nasazení webu, kterou poskytuje Azure.

Úkol 1 – Vytvoření nového webu z webu Azure Portal

Přejděte na portál pro správu Azure a přihlaste se pomocí přihlašovacích údajů Microsoftu přidružených k vašemu předplatnému.

Poznámka:

S Azure můžete zdarma hostovat 10 ASP.NET weby a pak škálovat s rostoucím provozem. Tady se můžete zaregistrovat.

Přihlaste se k portálu.
Na panelu příkazů klikněte na Nový .

Vytvoření nového webu
Klikněte na výpočetní | web. Pak vyberte možnost Rychlé vytvoření . Zadejte dostupnou adresu URL nového webu a klikněte na vytvořit web.

Poznámka:

Azure je hostitelem webové aplikace spuštěné v cloudu, kterou můžete řídit a spravovat. Možnost Rychlé vytvoření umožňuje nasadit dokončenou webovou aplikaci do Azure mimo portál. Nezahrnuje kroky pro nastavení databáze.

Vytvoření nového webu pomocí rychlého vytvoření
Počkejte na vytvoření nového webu .
Po vytvoření webu klikněte na odkaz pod sloupcem ADRESY URL . Zkontrolujte, jestli nový web funguje.

Přechod na nový web

Spuštěný web
Vraťte se na portál a kliknutím na název webu ve sloupci Název zobrazte stránky pro správu.

Otevření stránek pro správu webu
Na stránce Řídicí panel v části Rychlý přehled klikněte na odkaz Stáhnout profil publikování.

Poznámka:

Profil publikování obsahuje všechny informace potřebné k publikování webové aplikace do Azure pro každou povolenou metodu publikování. Profil publikování obsahuje adresy URL, přihlašovací údaje uživatele a databázové řetězce potřebné pro připojení ke každému koncovému bodu, pro který je povolená metoda publikování. Microsoft WebMatrix 2, Microsoft Visual Studio Express pro web a Microsoft Visual Studio 2012 podporují profily publikování pro čtení pro automatizaci konfigurace těchto programů pro publikování webových aplikací do Azure.

Stažení profilu publikování webu
Stáhněte soubor profilu publikování do známého umístění. Dále v tomto cvičení se dozvíte, jak pomocí tohoto souboru publikovat webovou aplikaci do Azure ze sady Visual Studio.

Uložení souboru profilu publikování

Úloha 2 – Konfigurace databázového serveru

Pokud vaše aplikace využívá databáze SQL Serveru, budete muset vytvořit server služby SQL Database. Pokud chcete nasadit jednoduchou aplikaci, která nepoužívá SQL Server, můžete tuto úlohu přeskočit.

K uložení aplikační databáze budete potřebovat server služby SQL Database. Servery SLUŽBY SQL Database můžete zobrazit z vašeho předplatného na portálu pro správu Azure na řídicím panelu serveru sql Databases | Server | . Pokud server nemáte vytvořený, můžete ho vytvořit pomocí tlačítka Přidat na panelu příkazů. Poznamenejte si název serveru a adresu URL, přihlašovací jméno a heslo správce, protože je budete používat v dalších úlohách. Databázi ještě nevytvořte, protože bude vytvořena v pozdější fázi.

Řídicí panel serveru SLUŽBY SQL Database
V další úloze otestujete připojení k databázi ze sady Visual Studio, z tohoto důvodu musíte do seznamu povolených IP adres serveru zahrnout svou místní IP adresu. Uděláte to tak, že kliknete na Konfigurovat, vyberete IP adresu z aktuální IP adresy klienta a vložíte ji do textových polí Počáteční IP adresa a Koncová IP adresa a kliknete na tlačítko.

Přidání IP adresy klienta
Po přidání IP adresy klienta do seznamu povolených IP adres klikněte na Uložit a potvrďte změny.

Potvrdit změny

Úloha 3 – Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu

Vraťte se k řešení ASP.NET MVC 4. V Průzkumník řešení klikněte pravým tlačítkem myši na projekt webu a vyberte Publikovat.

Publikování webu
Importujte profil publikování, který jste uložili v prvním úkolu.

Import profilu publikování
Klikněte na Ověřit připojení. Po dokončení ověření klikněte na tlačítko Další.

Poznámka:

Ověření se dokončí, jakmile se vedle tlačítka Ověřit připojení zobrazí zelené zaškrtnutí.

Ověřování připojení
Na stránce Nastavení klikněte v části Databáze na tlačítko vedle textového pole připojení k databázi (tj. DefaultConnection).

Konfigurace nasazení webu
Připojení k databázi nakonfigurujte následujícím způsobem:
- Do pole Název serveru zadejte adresu URL serveru služby SQL Database pomocí předpony tcp:
- Do pole Uživatelské jméno zadejte přihlašovací jméno správce serveru.
- Do pole Heslo zadejte přihlašovací heslo správce serveru.
- Zadejte nový název databáze.
  
  Konfigurace cílového připojovací řetězec
Pak klikněte na OK. Po zobrazení výzvy k vytvoření databáze klepněte na tlačítko Ano.

Vytvoření databáze
Připojovací řetězec, které použijete pro připojení ke službě SQL Database v Azure, se zobrazí v textovém poli Výchozí připojení. Pak klikněte na tlačítko Další.

Připojovací řetězec odkazující na SLUŽBU SQL Database
Na stránce Náhled klikněte na Publikovat.

Publikování webové aplikace
Po dokončení procesu publikování se ve výchozím prohlížeči otevře publikovaný web.

Příloha C: Použití fragmentů kódu

S fragmenty kódu máte veškerý kód, který potřebujete na dosah ruky. Dokument testovacího prostředí vám přesně řekne, kdy je můžete použít, jak je znázorněno na následujícím obrázku.

Použití fragmentů kódu sady Visual Studio k vložení kódu do projektu

Použití fragmentů kódu sady Visual Studio k vložení kódu do projektu

Přidání fragmentu kódu pomocí klávesnice (jenom C#)

Umístěte kurzor na místo, kam chcete vložit kód.
Začněte psát název fragmentu kódu (bez mezer nebo pomlček).
Sledujte, jak IntelliSense zobrazuje odpovídající názvy fragmentů kódu.
Vyberte správný fragment kódu (nebo pokračujte v psaní, dokud nebude vybrán název celého fragmentu kódu).
Dvojím stisknutím klávesy Tab vložte fragment kódu do umístění kurzoru.

Začněte psát název fragmentu kódu.

Začněte psát název fragmentu kódu.

Stisknutím klávesy Tab vyberte zvýrazněný fragment kódu.

Stisknutím klávesy Tab vyberte zvýrazněný fragment kódu.

Znovu stiskněte klávesu Tab a fragment kódu se rozbalí.

Znovu stiskněte klávesu Tab a fragment kódu se rozbalí.

Pokud chcete přidat fragment kódu pomocí myši (C#, Visual Basic a XML) 1. Klikněte pravým tlačítkem na místo, kam chcete vložit fragment kódu.

Vyberte Vložit fragment kódu následovaný mými fragmenty kódu.
Kliknutím na něj vyberte příslušný fragment kódu ze seznamu.

Klikněte pravým tlačítkem na místo, kam chcete vložit fragment kódu, a vyberte Vložit fragment kódu.

Klikněte pravým tlačítkem na místo, kam chcete vložit fragment kódu, a vyberte Vložit fragment kódu.

Výběr relevantního fragmentu ze seznamu kliknutím na něj

Výběr relevantního fragmentu ze seznamu kliknutím na něj

Váš názor

Byla tato stránka užitečná?

Last updated on 2024-07-16

Sdílet prostřednictvím

Novinky webových formulářů v ASP.NET 4.5

Cíle

Požadavky

Nastavení

Cvičení

Cvičení 1: Vazba modelu ve webových formulářích ASP.NET

Úkol 1 – použití datových vazeb se silnými typy

Úkol 2 – Představení vazby modelu ve webových formulářích

Úkol 3 – Zprostředkovatelé hodnot v vazbě modelu

Úkol 4 – Použití vazby modelu pro filtrování

Úloha 5 – Použití vazby modelu pro operace aktualizace

Cvičení 2: Ověření dat

Úkol 1 – nerušivé ověření

Úkol 2 – ověřování modelu pomocí datových poznámek

Úloha 3 – Zpracování chyb vlastní databáze pomocí modelu ModelState

Úkol 4 – Ověření požadavku ve webových formulářích ASP.NET 4.5

Cvičení 3: Asynchronní zpracování stránek ve webových formulářích ASP.NET

Úkol 1 – aktualizace stránky s podrobnostmi o produktu pro nahrání a zobrazení obrázků

Úkol 2 – Přidání asynchronního zpracování na stránku s podrobnostmi o produktu

Shrnutí

Příloha A: Instalace sady Visual Studio Express 2012 pro web

Příloha B: Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu

Úkol 1 – Vytvoření nového webu z webu Azure Portal

Úloha 2 – Konfigurace databázového serveru

Úloha 3 – Publikování aplikace ASP.NET MVC 4 pomocí nasazení webu

Příloha C: Použití fragmentů kódu

Váš názor

Další materiály