jQuery a Visual Studio 2008 SP1

Jedna z připravovaných novinek pro vývoj webových aplikací v .NET je ASP.NET MVC Framework, který si popíšeme o něco dále, jehož část bude postavena právě na jQuery. Visual Studio 2008, včetně „free“ verze, má velmi dobrou podporu práce s JavaScriptem, jako je doplňování kódu (Intellisence), práce s dokumentací k vlastním javascriptovým funkcím a ladění.

Co dělá doplňování kódu a k čemu je ladění je asi všem jasné. Co ale umí funkce, kterou jsem nazval „práce s dokumentací“? Více asi napoví následující screenshot:

Další ukázka:

A ještě jedna:

To, co přibylo nově k jQuery jako výsledek spolupráce se společností Microsoft a umožnilo tak lepší integraci do Visual Studia 2008, je právě dokumentace. Jak ji získat, si popíšeme dále. Dokumentaci k vlastním Javascriptovým knihovnám a funkcím můžete vytvářet dvěma způsoby.

Dokumentace ve stejném souboru jako JavaScript

Dokumentace pro JavaScript, tak aby jí rozumělo Visual Studio 2008, resp. mohlo z ní vytěžit maximum, odpovídá syntaxi pro generování dokumentace v .NET. Okomentujte javascriptovou funkci takto:

Pak ji bude používat i doplňování kódu:

Tento způsob má jednu nevýhodu. Javascriptová knihovna může přidáním dokumentace velmi nabýt na objemu, což je nežádoucí. Proto přibyla novinka, která umožňuje vkládat dokumentaci do samostatného souboru.

Samostatný soubor s dokumentací

Dokumentací se ukládá do souboru, který musí být pojmenován podle následující konvence:

Javascriptová knihovna: jquery.js
Dokumentace: jquery-vsdoc.js nebo jquery.debug.js

Visual Studio 2008 po přidání javascriptové knihovny do HTML stránky pomocí značky <script> začne automaticky hledat dokumentaci podle popsané konvence ve stejném adresáři, jako je javascriptová knihovna. Abyste mohli využívat dokumentaci k javascriptovým knihovnám, která je umístěna v samostatném souboru, musíte si doinstalovat patch pro Visual Studio 2008 SP1. Tento patch je určen i pro Visual Web Developer 2008 SP1.

Jak nastavit Visual Studio 2008 SP1, aby pracovalo s dokumentací jQuery?

1. Nainstalujte patch pro práci s dokumentací v samostatném souboru
2. Stáhněte si jQuery pro vývojáře
3. Stáhněte si dokumentaci k jQuery
4. Knihovnu i dokumentaci přidejte do webového projektu ve Visual Studiu 2008 SP1

Lehký úvod do ASP.NET MVC

Návrhový vzor MVC (Model – View – Controller) byl poprvé formálně popsán v roce 1979. V poslední době zájem o tento návrhový vzor vzrostl zejména kvůli frameworku Ruby on Rails, i když je hojně využívaný i v jiných frameworcích mnohem déle. ASP.NET MVC je implementací MVC pro ASP.NET a bude součástí připravovaného .NET Frameworku 4. Zatím je možné si stáhnout ASP.NET MVC Beta a doinstalovat do ASP.NET 3.5 SP1. Po instalaci ASP.NET MVC se rozšíří nabídka šablon pro vytvoření webového projektu o položku ASP.NET MVC Wev Application:

Pokud ASP.NET MVC Beta doinstalujete do vyšší verze Visual Studia 2008 SP1 než Express (zdarma), tak vám průvodce umožní rovnou vytvořit projekt pro Unit testy:

Pokud se podíváte do vytvořené struktury adresářů, najdete v adresáři Script knihovnu jQuery, ale bez souboru s dokumentací, který není ve verzi Beta obsažen a je třeba si ho zkopírovat do příslušného adresáře. Jako datový zdroj použijeme Entity Data Model, který přidáme do adresáře Model. Do adresáře Controllers přidáme novou třídu, která dědí po objektu Controller:

Pozor na pojmenování třídy. Text před slovem Controller v názvu třídy se bude používat v URL. Vygenerovaná třída bude obsahovat metodu Index, která se bude volat při zadání následujícího URL: http://…/Products/. To nám zatím fungovat nebude, protože v těle metody je volání výjimky NotImplemente­dException, protože nemáme připravené View. Do těla metody dejte jen příkaz pro návrat příslušného View:

public class ProductsController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
} 

Nyní je potřeba vytvořit View:

Zatím vytvoříme View, které nebude pracovat s daty, nepoužijeme tedy Model:

V adresáři Views teď najdete adresář Products (koresponduje se jménem vytvořeného Controller) a v něm najdete soubor Index.aspx, jehož jméno koresponduje s akcí:

Do třídy ProductsController si přidáme novou akci, která bude zobrazovat seznam všech produktů:

public ActionResult List()
{
    Models.NorthwindEntities db = new Models.NorthwindEntities();
    return View(db.Products.OrderBy(p => p.ProductName));
} 

Dále přidáme View, který bude zobrazovat seznam produktů. Toto View bude přebírat seznam produktů, proto ho vytvoříme silně typové:

Nově vygenerované View bude požadovat jako parametr kolekci produktů (List.aspx.cs):

Vykreslení seznamu produktů můžete udělat přímo v List.aspx:

Takto vytvořený seznam je pak dostupný na URL http://…/Produc­ts/List.

Přidání jQuery

Knihovna jQuery je v projektu již zahrnuta. Odkaz na tuto knihovnu je potřeba přidat do souboru Site.master, který určuje vzhled celé webové aplikace. Tím bude jQuery dostupné v rámci všech stránek webu:

Použití ve stránce:

Pokud bychom chtěli zobrazit detailní informaci o produktu na samostatné stránce, stačí vytvořit novou akci pro Controller, která bude přejímat parametr:

public ActionResult Detail(int productId)
{
    Models.NorthwindEntities db = new Models.NorthwindEntities();
    return View(db.Products.First(p => p.ProductID == productId));
} 

Opět vytvoříme silně typové View, které bude vyžadovat informaci o jednom produktu:

Zobrazení dat bude mít na starost soubor Detail.aspx:

Provázání mezi seznamem produktů a detailem provedeme pomocí objektu Html (typ HtmlHelper) a metody ActionLink:

...
<td><%= Html.ActionLink(p.ProductName, "Detail", new RouteValueDictionary() {{"id", p.ProductID}} )%></td>
... 

Tím vygenerujeme požadované URL, např. http://…/Produc­ts/Detail/38.

Standardně je předdefinována syntaxe pro URL ve tvaru {controller}/{ac­tion}/e₁₃. Pokud bychom chtěli předat více parametrů nebo URL nějak upravit, je třeba nadefinovat novou „cestu“ v metodě RegisterRoutes v souboru Global.asax.cs. Pokud bych tedy chtěl volat detail produktu pomocí URL http://…/Product/2, musím vytvořit novou cestu, která se bude zpracovávat dřív, než cesta pojmenovaná Default:

routes.MapRoute(
  "Product",
  "Product/e_13",
  new { controller = "Products", action = "Detail"}
); 

Obdobně budete postupovat v případě, kdy by akce v Controller vyžadovala více parametrů.

Závěr

Podporu pro jQuery, resp. práci s JavaScriptem ve Visual Studiu 2008 SP1 můžete samozřejmě používat jak na projektech, které ASP.NET využívají, tak na těch, které ASP.NET nevyužívají. Celý projekt probíraný v článku si můžete stáhnout: MVC aplikace (ZIP 400012 bytů).

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.