Přejít k navigační liště

Zdroják » Různé » Představení ASP.NET Dynamic Data

Představení ASP.NET Dynamic Data

Články Různé

RAD je zaklínadlo dnešního vývoje. Vychází z myšlenky: čím je vývoj kratší, tím je levnější. To se ale často projeví na kvalitě. Proto se potkáváme s „instantními“ řešeními, se kterými lze udělat aplikaci rychle a mít jistotu, že bude kvalitní a bezpečná. ASP.NET Dynamic Data jsou takovým řešením pro ASP.NET.

ASP.NET Dynamic Data jsou součástí .NET Frameworku 3.5 SP1 a slouží k rychlému vytvoření webové aplikace či její části, typicky administrace, na základě objektového modelu databáze. Aplikace se v podstatě generuje dynamicky z jednotlivých „stavebních kamenů“, které můžete libovolně měnit a přidávat. Výchozí struktura vytvořené aplikace vypadá následovně:

Struktura aplikace

Adresář DynamicData obsahuje ony „stavební kameny“, v podadresáři FieldTemplates najdete uživatelské ovládací prvky pro zobrazování a editování různých datových typů z databáze. Přiřazení datového typu – FieldTemplate se dělá automaticky, nebo můžete přiřazení vynutit sami. Samozřejmě si můžete vytvořit také vlastní ovládací prvky. Podadresář PageTemplates obsahuje šablony pro různé typy zobrazení dat z databáze na základě činnosti (zobrazení, editace, vkládání…) a opět je můžete libovolně měnit a rozšiřovat.

Postup vytvoření webu využívajícího ASP.NET Dynamic Data

Pro vytvoření webu budete potřebovat nástroj Visual Web Developer 2008 SP1 a současně musíte mít nainstalovaný SQL Server 2008 Express. Na serveru MSTV.cz najdete postup instalace VWD a SQL Serveru 2008 ve formě screencastu. Jakmile budete mít obě technologie nainstalované, můžete začít se samotným vytvářením webu postaveného na ASP.NET Dynamics Data:

  1. Vytvořte nový projekt a jako typ projektu zvolte Web – Dynamic Data Web Application. Projekt typu Dynamic Data Entities Web Application je v podstatě to samé jako Dynamic Data Web Application, jen se jako objektový model používá ADO.NET Entities místo LINQ to SQL.
    Založení projektu
  2. Vytvořte objektový model LINQ to SQL z databáze, kterou chcete použít. Do projektu přidáte nový prvek LINQ to SQL Classes a z okna Server Explorer přetáhněte jednotlivé tabulky databáze do okna designéru.
    Tabulky databáze
  3. Přeložte projekt, aby se aktualizovaly nově vytvořené objekty.
  4. V souboru Global.asax.cs v metodě RegisterRoutes zaregistrujete svůj objektový model a povolte zobrazení všech tabulek vlastností ScaffoldAllTables = true. Později si ukážeme, jak povolit zobrazení jen některých tabulek.
    model.RegisterContext(typeof(NorthwindDataContext), new ContextConfiguration() { ScaffoldAllTables = true }); 
  5. Tím je aplikace ve výchozím nastavení hotová a můžete ji spustit.
    Hotová aplikace

Jak vybrat tabulky a sloupce pro zobrazení

Výběr tabulek

Pokud chcete zobrazit jen některé tabulky, případně jen některé sloupce z tabulek, je třeba upravit objektový model, který jsme vygenerovali pomocí LINQ to SQL. Pokud byste změnili přímo vygenerovaný kód, v ukázce v souboru Northwind.desig­ner.cs, tak byste při případném regenerování modelu o své úpravy přišli. Proto jsou všechny třídy vytvořeny jako partial. U třídy a metod označených jako partial můžete jejich definici rozdělit do více souborů. Typické použití je u automaticky generovaného kódu, kdy jednu část třídy generuje vývojové prostředí a případné změny a rozšíření uživatel definuje v souboru jiném. V další ukázce povolíme jen zobrazení tabulky Products, která je v objektovém modelu vytvořena jako objekt Product.

  1. Vypněte zobrazení všech tabulek v souboru Global.asax.cs nastavením vlastnosti  ScaffoldAllTables = false.
  2. Přidejte do projektu novou třídu s názvem Product a označte ji jako Partial.
    public partial class Product
    {
    } 
  3. Třídě dejte atribut ScaffoldTable(true) z jmenného prostoru System.Componen­tModel.DataAn­notations. Tím povolíte zobrazení tabulky. I když jsme povolili jen jednu tabulku, tak budete vidět a mít možnost využívat také informace z propojených tabulek, např. při editaci budete mít dostupný seznam kategorií produktů.
    Nastavení produktu

Pokud chcete zobrazit jen některá pole, musíte vytvořit třídu, která bude definovat práci s vlastnostmi objektu, které představují jednotlivá pole databáze.

Výběr sloupců

  1. Do projektu přidejte třídu, kterou pojmenujete např. ProductMetadata a třídě Product přidejte atribut MetadataType.
    [ScaffoldTable(true)]
    [MetadataType(typeof(ProductMetadata))]
    public partial class Product
    {
    }
     
    public class ProductMetadata
    {
    } 
  2. Do třídy ProductMetadata přidáte veřejné vlastnosti, které odpovídají veřejným vlastnostem objektu Product a u nich nastavíte příslušné atributy. Jako datový typ můžete použít object. Kód pro zakázání zobrazení ProductId bude vypadat:
    [ScaffoldColumn(false)]
    public object ProductID; 

Formátování výstupu a kontrola vstupních dat

Formátování dat a jejich ověřování se dělá také pomocí atributů.

UnitPrice
[DisplayFormat(DataFormatString = "{0:c}")]
public object UnitPrice; 
UnitPrice
[Range(0, 100, ErrorMessage="Hodnota pro pole {0} musí být v rozmezí {1} - {2}.")]
public object ReorderLevel; 
Úprava položek produktu

Další možnosti validace najdete v dokumentaci, včetně možnosti napsat si validátory vlastní.

Vlastní editory

Pro editaci některých dat si možná budete chtít vytvořit vlastní objekty pro zobrazování a editaci. Tyto objekty se označují jako Field Templates a jedná se o uživatelské ovládací prvky (User Controls). Název ovládacího prvku, který je určen pro editaci, musí končit _Edit. Ukážeme si to na jednoduchém příkladě, kdy budeme chtít při editaci celého čísla použít ovládací prvek Slider, který je součástí AJAX Control Toolkitu. AJAX Control Toolkit je open source projekt uvolněný pod Ms-PL licencí.

  1. Stáhněte si AJAX Control Toolkit. Bude nám stačit „DllOnly“ distribuce.
  2. Obsah balíčku rozbalte do libovolného adresáře. Umístění později neměňte.
  3. Přidejte novou záložku do panelu Toolbox a pojmenujte ji AJAX Control Toolkit.
    Přidání záložky
  4. Do nově vytvořené skupiny přidejte ovládací prvky z AJAX Control Toolkit. Opět klikněte pravým tlačítkem myši na nově vytvořenou záložku a vyberte Choose Items…
    Výběr položky
  5. Pomocí tlačítka Browse… najděte knihovnu AjaxControlTo­olkit.dll a pak klikněte na OK.
    Přidání komponent
  6. Do adresáře FieldTemplates přidejte nový objekt Dynamic Data Field.
    Přidání dynamic data field
  7. Záložka AJAX Control Toolkit na Panelu Toolbox bude nyní obsahovat ovládací prvky z knihovny AjaxControlTo­olkit.dll. Pokud chcete prvek použít, stačí ho myší přetáhnout do okna editoru.
    Panel s prvky AJAX Control Toolkitu
  8. Do složky FieldTemplates přidejte nový ovládací prvek založený na Dynamic Data Field šabloně.
  9. Visual Studio vytvoří dva ovládací prvky. Jeden pro zobrazení a jeden pro editaci.
    Vytvořené 2 ovládací prvky
  10. My budeme potřebovat jen ten pro editaci – IntegerSlider_E­dit.ascx. Ovládací prvek IntegerSlider.ascx odstraníme.
  11. Otevřete soubor IntegerSlider_E­dit.ascx a přetažením do něj vložte ovládací prvek SliderExtender. Tím zajistíte zkopírování knihovny AjaxControlTo­olkit.dll do adresáře bin ve vašem projektu a její registraci. Obsah souboru IntegerSlider_E­dit.ascx dále upravte na:
    <%@ Control Language="C#" CodeBehind="IntegerSlider_Edit.ascx.cs" Inherits="DynamicData101.DynamicData.FieldTemplates.IntegerSlider_EditField" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
    
    <!-- Tento TextBox je napojen na databazi, ale nebude videt, aby hodnota nesla menit primo -->
    <asp:TextBox ID="TextBox1" runat="server"
                        Text='<%# FieldValueEditString %>'
                        CssClass="droplist"></asp:TextBox>
    <!-- Zde uvidite hodnotu nastavenou pomoci SliderExtender -->
    <asp:Label ID="Label1" runat="server"></asp:Label>
    <!-- Posuvnik, rozsah se v udalosti Page_Load nastavi podle atributu Range. -->
    <cc1:SliderExtender ID="SliderExtender1" runat="server"
                        TargetControlID="TextBox1"
                        BoundControlID="Label1"
                        Minimum="-100"
                        Maximum="100">
    </cc1:SliderExtender>
    <!-- Pripadny validator  nastaveny pomoci atributu -->
    <asp:DynamicValidator runat="server" ID="DynamicValidator1"
                        CssClass="droplist"
                        ControlToValidate="TextBox1"
                        Display="Dynamic" /> 
  12. Otevřete soubor IntegerSlider_E­dit.ascx.cs a změňte metodu Page_Load:
    using System;
    using System.Collections.Specialized;
    using System.Linq;
    using System.Web.UI;
    using System.ComponentModel.DataAnnotations;
     
    namespace DynamicData101.DynamicData.FieldTemplates
    {
        public partial class IntegerSlider_EditField : System.Web.DynamicData.FieldTemplateUserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                // Pokud ma pole nastaven atribut Range, tak z nej prevezmeme hodnoty
                // pro rozsah ovladaciho prvku SliderExtender
                var metadata = MetadataAttributes.OfType<RangeAttribute>().FirstOrDefault();
                if (metadata != null)
                {
                    SliderExtender1.Minimum = Convert.ToInt32(metadata.Minimum);
                    SliderExtender1.Maximum = Convert.ToInt32(metadata.Maximum);
                }
     
                TextBox1.ToolTip = Column.Description;
                SetUpValidator(DynamicValidator1);
            }
     
            protected override void ExtractValues(IOrderedDictionary dictionary)
            {
                dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text);
            }
     
            public override Control DataControl
            {
                get
                {
                    return TextBox1;
                }
            }
        }
    } 
  13. Tím máme nový editor hotový a nyní je potřeba vynutit jeho použití. To má na starost atribut UIHint, a proto musíme upravit třídu ProductMetadata. I když jsme vytvořili jen ovládací prvek pro editaci, pro zobrazení se použije výchozí ovládací prvek pro daný datový typ.
    [Range(0, 100, ErrorMessage="Hodnota pro pole {0} musí být v rozmezí {1} - {2}.")]
    [UIHint("IntegerSlider")]
    public object ReorderLevel; 
    Úprava položek produktu

Pokud byste chtěli u některých tabulek sami navrhnout, jak se mají zobrazovat nebo editovat data, místo automaticky generovaného rozhraní stačí přidat novou .aspx stránku do adresáře PageTemplates, kterou postavíte na Site.master a upravíte směrování požadavků v souboru Global.asax.cs. Systém směrování požadavku v ASP.NET Dynamic Data je identický s ASP.NET MVC.

Zdrojový kód

K dispozici ke stažení máte zdrojový kód příkladu z článku: DynamicData (ZIP 759090 bytů).

Závěr

Nová verze ASP.NET Dynamic Data bude součástí připravovaného .NET Frameworku 4.0 a bude zejména vylepšovat práci s vazbou M:N a 1:1. Z mého pohledu jsou ASP.NET Dynamic Data skvělá věc pro vytváření administrátorského rozhraní pro webové aplikace, kde strohý design nevadí. Sami je tak používáme na projektu MSTV.cz.


Autorem článku je Štěpán Bechynský, specialista pro vývojové nástroje ve společnosti Microsoft v České republice. Informace pro vývojáře také najdete na blogu odborníků z českého Microsoftu.

Používáte ASP.NET Dynamic Data?

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.