Hlavní funkce webové stránky ASP.NET 2

  • Článek

od Microsoftu

Tento článek obsahuje přehled hlavních nových funkcí v ASP.NET Web Pages 2 RC, jednoduché webové programovací rozhraní, které je součástí aplikace Microsoft WebMatrix 2 RC.

Co je součástí:

Poznámka

V tomto tématu se předpokládá, že používáte WebMatrix pro práci s kódem ASP.NET Web Pages 2. Stejně jako u webových stránek 1 však můžete weby s webovými stránkami 2 vytvářet také pomocí sady Visual Studio, což poskytuje vylepšené funkce IntelliSense a ladění. Pokud chcete pracovat s webovými stránkami v sadě Visual Studio, musíte nejdřív nainstalovat Visual Studio 2010 SP1, Visual Web Developer Express 2010 SP1 nebo Visual Studio 11 Beta. Pak nainstalujte ASP.NET MVC 4 Beta, který obsahuje šablony a nástroje pro vytváření aplikací ASP.NET MVC 4 a Web Pages 2 v sadě Visual Studio.

Poslední aktualizace: 18. června 2012

Instalace nástroje WebMatrix

K instalaci webových stránek můžete použít Instalace webové platformy Microsoft, což je bezplatná aplikace, která usnadňuje instalaci a konfiguraci webových technologií. Nainstalujete webMatrix 2 Beta, který obsahuje webové stránky 2 Beta.

  1. Přejděte na stránku instalace, kde najdete nejnovější verzi Instalačního programu webové platformy:

    https://go.microsoft.com/fwlink/?LinkId=226883

    Poznámka

    Pokud už máte webMatrix 1 nainstalovaný, tato instalace ho aktualizuje na WebMatrix 2 Beta. Weby vytvořené pomocí verze 1 nebo 2 můžete spouštět na stejném počítači. Další informace najdete v části Souběžné spouštění aplikací webových stránek.

  2. Zvolte Nainstalovat.

    Pokud používáte Internet Explorer, přejděte k dalšímu kroku. Pokud používáte jiný prohlížeč, jako je Mozilla Firefox nebo Google Chrome, zobrazí se výzva k uložení Webmatrix.exe souboru do počítače. Uložte soubor a kliknutím na něj spusťte instalační program.

  3. Spusťte instalační program a zvolte tlačítko Nainstalovat . Tím se nainstalují webMatrix a webové stránky.

Nové a vylepšené funkce

Změny pro verzi RC (červen 2012)

Verze RC vydaná v červnu 2012 obsahuje několik změn oproti aktualizaci beta verze vydané v březnu 2012. Jedná se o tyto změny:

Změny beta verze (únor 2012)

Beta verze vydaná v únoru 2012 obsahuje jen pár změn oproti beta verzi vydané v prosinci 2011. Jedná se o tyto změny:

  • Razor teď podporuje podmíněné atributy. Pokud v elementu HTML nastavíte atribut na hodnotu, která se v kódu serveru přeloží na false nebo null, ASP.NET atribut nevykreslí vůbec. Představte si například následující kód pro zaškrtávací políčko:

    <input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />

    Pokud se hodnota přeloží checked1 na false nebo , nullchecked atribut se nevykreslí. To je zásadní změna.

  • Metoda Validation.GetHtml byla přejmenována na Validation.For. To je zásadní změna; Validation.GetHtml nebude fungovat v beta verzi.

  • Teď můžete do kódu zahrnout ~ operátor , který bude odkazovat na kořen webu, aniž byste museli použít Href funkci . (To znamená, že analyzátor Razor teď dokáže najít a vyřešit ~ operátor bez nutnosti explicitního volání metody . Href) Metoda Href stále funguje, takže se nejedná o zásadní změnu.

    Pokud jste například dříve měli revize podobné tomuto:

    <a href="@Href("~/Default.cshtml")">Home</a>

    Teď můžete použít značky takto:

    <a href="~/Default.cshtml">Home</a>

  • Pomocná Scripts rutina pro správu prostředků (prostředků) byla nahrazena pomocníkem Assets , který má mírně odlišné metody, například následující:

    • Pro Scripts.Addpoužijte Assets.AddScript

    • Pro Scripts.GetScriptTagspoužijte Assets.GetScripts

      To je zásadní změna; třída Scripts není k dispozici v beta verzi. Příklady kódu v tomto dokumentu, které používají správu prostředků, byly touto změnou aktualizovány.

Použití nových a aktualizovaných šablon webů

Šablona úvodního webu byla aktualizována tak, aby se ve výchozím nastavení spouštěla na webových stránkách 2. Zahrnuje také následující nové funkce:

  • Vykreslování stránek, které je vhodné pro mobilní zařízení. Úvodní web nabízí vylepšené vykreslování stránek na menších obrazovkách, včetně obrazovek mobilních zařízení, pomocí stylů CSS a @media selektoru.
  • Vylepšené možnosti členství a ověřování Uživatelům můžete umožnit, aby se k vašemu webu přihlašovali pomocí svých účtů z jiných sociálních sítí, jako jsou Twitter, Facebook a Windows Live. Další informace najdete v části Povolení přihlášení z Facebooku a jiných webů pomocí OAuth a OpenID .
  • Elementy HTML5.

Nová šablona Osobní web umožňuje vytvořit web, který obsahuje osobní blog, stránku s fotkami a stránku Twitteru. Web na základě šablony Osobní web můžete přizpůsobit následujícím způsobem:

  • Vzhled webu můžete změnit úpravou souboru rozložení (_SiteLayout.cshtml) a souboru stylů (Site.css).
  • Nainstalujte balíčky NuGet, které do webu přidají funkce. Informace o instalaci balíčků, včetně knihovny webových pomocných rutin ASP.NET, najdete v kurzu o instalaci pomocných rutin.

K šabloně Osobní web se dostanete tak, že na obrazovce WebMatrix Quick Start zvolíteŠablony.

topseven-personalsite-1

V dialogovém okně Šablony zvolte šablonu Osobní web .

topseven-personalsite-2

Cílová stránka šablony Osobní web umožňuje sledovat odkazy pro nastavení blogu, stránky Twitteru a stránky s fotkami.

topseven-personalsite-3

Ověřování vstupu uživatele

Na webových stránkách 1 slouží k ověření uživatelského vstupu v odeslaných formulářích System.Web.WebPages.Html.ModelState třída . (To je znázorněno v několika vzorcích kódu v kurzu Web Pages 1 s názvem Práce s daty.) Tento přístup můžete stále používat ve webových stránkách 2. Webové stránky 2 však také nabízejí vylepšené nástroje pro ověřování vstupu uživatele:

  • Nové třídy ověřování, včetně System.Web.WebPages.ValidationHelper a System.Web.WebPages.Validator, umožňují provádět výkonné ověřovací úlohy s několika řádky kódu.
  • Volitelně můžete použít ověření na straně klienta, které uživateli poskytne okamžitou zpětnou vazbu, aniž by bylo nutné provést odezvu na server, aby bylo možné zkontrolovat chyby ověření. (Z bezpečnostních důvodů se ověření provádí na serveru i v případě, že kontroly byly provedeny v klientovi předem.)

Pokud chcete používat nové funkce ověřování, postupujte takto:

V kódu stránky zaregistrujte prvek, který se má ověřit pomocí metod pomocné rutiny: Validation.RequireField, Validation.RequireFields (pro registraci více požadovaných Validation elementů) nebo Validation.Add. Metoda Add umožňuje zadat další typy ověřovacích kontrol, jako je kontrola datových typů, porovnávání položek v různých polích, kontroly délky řetězců a vzory (pomocí regulárních výrazů). Tady je několik příkladů:

Validation.RequireField("text1");
Validation.RequireField("text1", "The text1 field is required");
Validation.RequireFields("text1", "text2", "text3");

Validation.Add("text1", Validation.StringLength(5));
Validation.Add("textDate", Validation.DateTime("Enter a date"));
Validation.Add("textCount", Validation.Integer("Enter a number"));
Validation.Add("textCount",
Validation.Range(1, 10, "Enter a value between 1 and 10"));

Pokud chcete zobrazit chybu specifickou pro pole, zavolejte Html.ValidationMessage kód kódu pro každý ověřovaný prvek:

<input type="text" name="course"
value="@Request["course"]" />
@Html.ValidationMessage("course")

Pokud chcete zobrazit souhrn (<ul> seznam) všech chyb na stránce, Html.ValidationSummary v kódu:

@Html.ValidationSummary()

Tento postup stačí k implementaci ověření na straně serveru. Pokud chcete přidat ověření na straně klienta, proveďte navíc následující kroky.

Do oddílu <head> webové stránky přidejte následující odkazy na soubor skriptu. První dva skripty odkazují na vzdálené soubory na serveru sítě pro doručování obsahu (CDN). Třetí odkaz odkazuje na soubor místního skriptu. Produkční aplikace by měly implementovat náhradní řešení, když cdn není k dispozici. Otestujte náhradní řešení.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Nejjednodušší způsob, jak získat místní kopii knihovnyjquery.validate.unobtrusive.min.js , je vytvořit nový web webových stránek založený na jedné ze šablon webu (například úvodní web). Web vytvořený šablonou obsahuje jquery.validate.unobtrusive.js soubor do složky Scripts, ze které ho můžete zkopírovat na svůj web.

Pokud váš web používá k řízení rozložení stránky _SiteLayout stránku, můžete do této stránky zahrnout tyto odkazy na skripty, aby bylo ověření dostupné pro všechny stránky obsahu. Pokud chcete provést ověření pouze na konkrétních stránkách, můžete pomocí správce prostředků zaregistrovat skripty pouze na těchto stránkách. Provedete to tak, že zavoláte Assets.AddScript(path) na stránce, kterou chcete ověřit, a odkažte na každý soubor skriptu. Pak přidejte volání na Assets.GetScripts stránce _SiteLayout , aby se vygenerovaly registrované <script> značky. Další informace najdete v části Registrace skriptů ve Správci prostředků.

V kódu pro jednotlivé prvky zavolejte metodu Validation.For . Tato metoda generuje atributy, které jQuery může připojit, aby se zajistilo ověření na straně klienta. Příklad:

<input type="text" name="course"
value="@Request["course"]"
@Validation.For("course")
/>
@Html.ValidationMessage("course")

Následující příklad ukazuje stránku, která ověřuje vstup uživatele ve formuláři. Pokud chcete tento ověřovací kód spustit a otestovat, postupujte takto:

  1. Vytvořte nový web pomocí jedné ze šablon webu WebMatrix 2, která obsahuje složku Skripty , například šablonu Úvodní web .
  2. Na novém webu vytvořte novou stránku .cshtml a nahraďte její obsah následujícím kódem.
  3. Spusťte stránku v prohlížeči. Pokud chcete zobrazit vliv na ověření, zadejte platné a neplatné hodnoty. Například nechte povinné pole prázdné nebo zadejte písmeno do pole Kredity .
@{
// Specify what fields users must fill in.
Validation.RequireFields("course", "professorname", "credits");
// Add validation criteria.  Here, require that input to Credits is an integer.
Validation.Add("credits", Validator.Integer());

if (IsPost)  {
// Wrap the postback code with a validation check.
if (Validation.IsValid()) {
    var course = Request["course"];
    var professorName = Request["professorname"];
    var credits = Request["credits"];
    // Display valid input values.
    <text>
        You entered: <br />
        Class: @course <br />
        Professor: @professorName <br />
        Credits: @credits <br />
    </text>
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing Validation in ASP.NET Web Pages version 2</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js"></script>
<script  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<script src="@Href("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
</head>
<body>
<form method="post" action="">
<!-- Display a summary message about any validation issues. -->
@Html.ValidationSummary()
<fieldset>
  <legend>Add Class</legend>
<div>
  <label for="Course">Class:</label>
  <!-- Validation.For("course") adds validation attributes to the input element. -->
  <input type="text" name="Course" value="@Request["course"]"  @Validation.For("course") />

  <!-- Display a field-specific message about validation issues. -->
  @Html.ValidationMessage("course")
</div>

<div>
  <label for="ProfessorName">Professor:</label>
  <input type="text" name="ProfessorName" value="@Request["professorname"]"
      @Validation.For("professorname") />
  @Html.ValidationMessage("professorname")
</div>

<div>
  <label for="Credits">Credits:</label>
  <input type="text" name="Credits" value="@Request["credits"]" @Validation.For("credits") />
  @Html.ValidationMessage("credits")
</div>

<div>
  <label>&nbsp;</label>
  <input type="submit" value="Submit" class="submit" />
</div>
  </fieldset>
</form>
</body>
</html>

Tady je stránka, na které uživatel odešle platný vstup:

topSeven-valid-1

Tady je stránka, když ji uživatel odešle s povinným polem, které zůstává prázdné:

topSeven-valid-2

Tady je stránka, když ji uživatel odešle s něčím jiným než celé číslo v poli Kredity :

topSeven-valid-3

Další informace najdete v následujících blogových příspěvcích:

Registrace skriptů pomocí Správce prostředků

Správce prostředků je nová funkce, kterou můžete použít v kódu serveru k registraci a vykreslení klientských skriptů. Tato funkce je užitečná, když pracujete s kódem z více souborů (jako jsou stránky rozložení, stránky obsahu, pomocné rutiny atd.), které se za běhu zkombinují do jedné stránky. Správce prostředků koordinuje zdrojové soubory, aby zajistil správné a efektivní odkazování na soubory skriptů na vykreslené stránce bez ohledu na to, ze kterých souborů kódu jsou volána nebo kolikrát jsou volána. Správce prostředků také vykresluje značky <script> na správném místě, aby se stránka rychle načetla (bez stahování skriptů při vykreslování) a aby se zabránilo chybám, ke kterým může dojít při zavolání skriptů před dokončením vykreslování.

Předpokládejme například, že vytvoříte vlastní pomocnou rutinu, která volá soubor JavaScriptu, a tuto pomoc zavoláte na třech různých místech v kódu stránky obsahu. Pokud k registraci volání skriptu v pomocné rutině nepoužijete správce prostředků, zobrazí se na vykreslené stránce tři různé <script> značky, které všechny ukazují na stejný soubor skriptu. Navíc v závislosti na tom, kam <script> jsou značky vloženy na vykreslené stránce, může dojít k chybám, pokud se skript pokusí o přístup k určitým prvkům stránky před úplným načtením stránky. Pokud k registraci skriptu použijete správce prostředků, vyhnete se těmto problémům.

Skript můžete zaregistrovat ve správci prostředků takto:

  • V kódu, který potřebuje odkazovat na skript, zavolejte metodu Assets.AddScript .

  • Na stránce _SiteLayout zavolejte metodu Assets.GetScripts , která vykreslí značky <script> .

    Poznámka

    V elementu Assets.GetScriptsstránky _SiteLayout vložte volání metody jako úplně poslední položku<body>. To pomáhá rychleji načítat stránku a vyhnout se chybám skriptů.

Následující příklad ukazuje, jak funguje správce prostředků. Kód obsahuje následující položky:

  • Vlastní pomocná rutina s názvem MakeNote. Tato pomocná rutina vykreslí řetězec uvnitř pole tak, že kolem něj zabalí div prvek se stylem ohraničení a přidá do něj text "Note:". Pomocná rutina také volá soubor JavaScriptu, který přidává do poznámky chování za běhu. Místo odkazu na skript pomocí <script> značky pomocník skript zaregistruje voláním Assets.AddScript .
  • Soubor JavaScriptu. Jedná se o soubor, který volá pomocná rutina a během mouseover události dočasně zvětší velikost písma položek poznámek.
  • Stránka obsahu, která odkazuje na _SiteLayout stránku, vykreslí nějaký obsah v textu a pak zavolá pomocníka MakeNote .
  • Stránka _SiteLayout. Tato stránka poskytuje společné záhlaví a strukturu rozložení stránky. Zahrnuje také volání Assets.GetScripts, což je způsob, jakým správce prostředků vykresluje volání skriptů na stránce.

Spuštění ukázky:

  1. Vytvořte prázdný web Webové stránky 2. K tomu můžete použít šablonu Prázdný web WebMatrix.
  2. Na webu vytvořte složku s názvem Scripts .
  3. Ve složce Scripts vytvořte soubor s názvem Test.js, zkopírujte do něj obsahTest.js z příkladu a soubor uložte.
  4. Na webu vytvořte složku s názvem App_Code .
  5. Ve složce App_Code vytvořte soubor s názvem Helpers.cshtml, zkopírujte do něj ukázkový kód a uložte ho do složky s názvem App_Code v kořenové složce.
  6. V kořenové složce webu vytvořte soubor s názvem _SiteLayout.cshtml, zkopírujte do něj příklad a soubor uložte.
  7. V kořenovém adresáři webu vytvořte soubor s názvem ContentPage.cshtml, přidejte ukázkový kód a uložte ho.
  8. Spusťte ContentPage v prohlížeči. Řetězec, který jste předali MakeNote pomocné rutině, se zobrazí jako poznámka v rámečku.
  9. Předejte na poznámku ukazatel myši. Skript dočasně zvětšuje velikost písma poznámky.
  10. Zobrazí zdroj vykreslené stránky. Vzhledem k tomu, kam jste umístili Assets.GetScriptsvolání , je vykreslená <script> značka, která volá Test.js , úplně poslední položkou v textu stránky.

Test.js

function UpdateNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "150%";
}
function ReturnNoteStyle(id) {
var theNote = document.getElementById(id);
theNote.style.fontSize = "inherit";
}

Helpers.cshtml

@helper MakeNote(string content, string noteid) {
Assets.AddScript("~/Scripts/Test.js");

<div id="@noteid" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;"
 onmouseover="UpdateNoteStyle('@noteid')" onmouseout="ReturnNoteStyle('@noteid')">
  <p>
  <strong>Note</strong>&nbsp;&nbsp; @content
   </p>
</div>
}

_SiteLayout.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<header>
    <div class="content-wrapper">
        <h1>Contoso Ltd.</h1>
    </div>
</header>
<div id="body">
    <section class="content-wrapper main-content clear-fix">
        @RenderBody()
    </section>
</div>
@Assets.GetScripts()
</body>
</html>

ContentPage.cshtml

@{
Layout = "~/_SiteLayout.cshtml";
}
<p>
Nullam scelerisque facilisis placerat. Fusce a augue
erat, malesuada euismod dui.
</p>
@Helpers.MakeNote("Latin is fun to translate.", "note1")

Následující snímek obrazovky ukazuje ContentPage.cshtml v prohlížeči, když podržíte ukazatel myši na poznámku:

topSeven-resmgr-1

Povolení přihlášení z Facebooku a jiných webů pomocí OAuth a OpenID

Webové stránky 2 poskytují rozšířené možnosti členství a ověřování. Hlavním vylepšením je, že existují noví poskytovatelé OAuth a OpenID . Pomocí těchto poskytovatelů můžete uživatelům umožnit, aby se k vašemu webu přihlásili pomocí svých stávajících přihlašovacích údajů ze služeb Facebook, Twitter, Windows Live, Google a Yahoo. Pokud se například chtějí uživatelé přihlásit pomocí účtu Služby Facebook, stačí vybrat ikonu Facebooku, která je přesměruje na přihlašovací stránku Facebooku, kde zadají své informace o uživateli. Přihlašovací údaje k Facebooku pak můžou přidružit ke svému účtu na vašem webu. Související vylepšení funkcí členství webových stránek spočívá v tom, že uživatelé můžou přidružit více přihlášení (včetně přihlášení ze sociálních sítí) k jednomu účtu na vašem webu.

Tento obrázek ukazuje přihlašovací stránku ze šablony úvodního webu , kde uživatel může zvolit ikonu Facebooku, Twitteru nebo Windows Live a povolit přihlášení pomocí externího účtu:

topSeven-oauth-1

Členství v OAuth a OpenID můžete povolit pomocí několika řádků kódu. Metody a vlastnosti, které používáte pro práci s poskytovateli OAuth a OpenID, jsou ve WebMatrix.Security.OAuthWebSecurity třídě .

Místo použití kódu k povolení přihlášení z jiných webů je ale doporučeným způsobem, jak začít s novými poskytovateli, použít novou šablonu úvodního webu , která je součástí služby WebMatrix 2 Beta. Šablona úvodního webu obsahuje úplnou infrastrukturu členství, včetně přihlašovací stránky, databáze členství a veškerého kódu, který potřebujete k tomu, aby se uživatelé mohli k vašemu webu přihlásit pomocí místních přihlašovacích údajů nebo z jiného webu.

Povolení přihlášení pomocí zprostředkovatelů OAuth a OpenID

Tato část obsahuje příklad, jak umožnit uživatelům přihlášení z externích webů (Facebook, Twitter, Windows Live, Google nebo Yahoo) na web, který je založený na šabloně Úvodní web . Po vytvoření úvodního webu to uděláte (podrobnosti následují):

  • Pro weby, které používají poskytovatele OAuth (Facebook, Twitter a Windows Live), vytvořte aplikaci na externím webu. Tím získáte klíče aplikace, které budete potřebovat k vyvolání funkce přihlášení pro tyto weby. Pro weby, které používají poskytovatele OpenID (Google, Yahoo), nemusíte vytvářet aplikaci. Pro všechny tyto weby musíte mít účet, abyste se mohli přihlásit a vytvářet vývojářské aplikace.

    Poznámka

    Aplikace Windows Live přijímají jenom živou adresu URL pro pracovní web, takže pro testování přihlášení nemůžete použít adresu URL místního webu.

  • Upravte na webu několik souborů, abyste mohli zadat příslušného zprostředkovatele ověřování a odeslat přihlášení k webu, který chcete použít.

Povolení přihlášení ke službám Google a Yahoo:

  1. Na svém webu upravte stránku _AppStart.cshtml a přidejte následující dva řádky kódu do bloku kódu Razor za volání WebSecurity.InitializeDatabaseConnection metody. Tento kód umožňuje poskytovatelům Google i Yahoo OpenID.

    OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Yahoo);

  2. Na stránce ~/Account/Login.cshtml odeberte komentáře z následujícího <fieldset> bloku značek na konci stránky. Pokud chcete zrušit komentář kódu, odeberte @* znaky, které před blokem následují a následují ho <fieldset> . Výsledný blok kódu vypadá takto:

    <fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

  3. <input> Přidejte prvek pro poskytovatele Google nebo Yahoo do <fieldset> skupiny na stránce ~/Account/Login.cshtml. Aktualizovaná <fieldset> skupina s <input> prvky pro Google i Yahoo vypadá jako v následujícím příkladu:

    <fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
<input type="submit" name="provider" id="yahoo" value="Yahoo" title="Log in using your Yahoo account." />
<input type="submit" name="provider" id="google" value="Google" title="Log in using your Google account." />
</fieldset>

  4. Na stránce ~/Account/AssociateServiceAccount.cshtml přidejte <input> do <fieldset> skupiny poblíž konce souboru prvky pro Google nebo Yahoo. Můžete zkopírovat stejné <input> prvky, které jste právě přidali do oddílu <fieldset> na stránce ~/Account/Login.cshtml .

    Stránku ~/Account/AssociateServiceAccount.cshtml v šabloně úvodního webu můžete použít, pokud chcete vytvořit stránku, na které můžou uživatelé přidružit více přihlášení z jiných webů k jednomu účtu na vašem webu.

Nyní můžete otestovat přihlášení Google a Yahoo.

  1. Spusťte stránku default.cshtml vašeho webu a zvolte tlačítko Přihlásit se .

  2. Na stránce Login (Přihlášení ) v části Use another service to log in (Použít jinou službu pro přihlášení) zvolte tlačítko Odeslat Google neboYahoo . V tomto příkladu se používá přihlášení Google.

    Webová stránka přesměruje požadavek na přihlašovací stránku Google.

    Snímek obrazovky znázorňující přesměrování webové stránky na přihlašovací stránku Google

  3. Zadejte přihlašovací údaje pro existující účet Google.

  4. Pokud se vás Google zeptá, jestli chcete localhost povolit používání informací z účtu, klikněte na Povolit.

    Kód používá token Google k ověření uživatele a pak se vrátí na tuto stránku na vašem webu. Tato stránka umožňuje uživatelům přidružit své přihlašovací údaje Google k existujícímu účtu na vašem webu nebo si na vašem webu zaregistrovat nový účet, ke kterým přidruží externí přihlášení.

    Snímek obrazovky se stránkou registrace

  5. Zvolte tlačítko Přidružit . Prohlížeč se vrátí na domovskou stránku vaší aplikace.

    Snímek obrazovky s domovskou stránkou aplikace

    Snímek obrazovky s jinou verzí domovské stránky aplikace

Povolení přihlášení k Facebooku:

  1. Přejděte na web pro vývojáře na Facebooku (přihlaste se, pokud ještě nejste přihlášení).

  2. Zvolte tlačítko Vytvořit novou aplikaci a pak podle pokynů pojmenujte a vytvořte novou aplikaci.

  3. V části Vyberte, jak se bude vaše aplikace integrovat s Facebookem, zvolte část Web .

  4. Do pole Adresa URL webu zadejte adresu URL vašeho webu (například http://www.example.com). Pole Domain (Doména) je volitelné. Můžete ho použít k zajištění ověřování pro celou doménu (například example.com).

    Poznámka

    Pokud používáte web na místním počítači s adresou URL ( http://localhost:12345 kde číslo je číslo místního portu), můžete tuto hodnotu přidat do pole Adresa URL webu pro účely testování webu. Kdykoli se ale změní číslo portu vašeho místního webu, budete muset aktualizovat pole Adresa URL webu vaší aplikace.

  5. Zvolte tlačítko Uložit změny .

  6. Znovu zvolte kartu Aplikace a pak zobrazte úvodní stránku aplikace.

  7. Zkopírujte hodnoty ID aplikace a Tajný kód aplikace pro vaši aplikaci a vložte je do dočasného textového souboru. Tyto hodnoty předáte poskytovateli Facebooku v kódu webu.

  8. Ukončete web pro vývojáře na Facebooku.

Teď na svém webu provedete změny na dvou stránkách, aby se uživatelé mohli k webu přihlásit pomocí svých facebookových účtů.

  1. Na svém webu upravte stránku _AppStart.cshtml a zrušte komentář kódu pro poskytovatele Facebook OAuth. Nekomentovaný blok kódu vypadá takto:

    OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Facebook,
consumerKey: "",   // for Facebook, consumerKey is called AppID in the SDK
consumerSecret: "");

  2. Zkopírujte hodnotu ID aplikace z aplikace Facebook jako hodnotu parametru consumerKey (v uvozovkách).

  3. Zkopírujte hodnotu Tajný kód aplikace z aplikace Facebook jako hodnotu parametru consumerSecret .

  4. Uložte soubor a zavřete ho.

  5. Upravte stránku ~/Account/Login.cshtml a odeberte komentáře z <fieldset> bloku na konci stránky. Pokud chcete zrušit komentář kódu, odeberte @* znaky, které před blokem následují a následují ho <fieldset> . Blok kódu s odebranými komentáři vypadá takto:

    <fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

  6. Uložte soubor a zavřete ho.

Teď můžete otestovat přihlášení k Facebooku.

  1. Spusťte stránku default.cshtml webu a zvolte tlačítko Přihlásit.

  2. Na stránce Login (Přihlášení ) v části Use another service to log in (Použít jinou službu pro přihlášení ) zvolte ikonu Facebook .

    Webová stránka přesměruje požadavek na přihlašovací stránku Facebooku.

    Snímek obrazovky se stránkou pro registraci

  3. Přihlaste se k účtu na Facebooku.

    Kód vás ověří pomocí tokenu Facebooku a pak se vrátí na stránku, kde můžete přidružit přihlašovací údaje k Facebooku k přihlášení vašeho webu. Vaše uživatelské jméno nebo e-mailová adresa se vyplní do pole Email ve formuláři.

    Snímek obrazovky znázorňující pole s uživatelským jménem nebo e-mailem na registrační stránce

  4. Zvolte tlačítko Přidružit .

    Prohlížeč se vrátí na domovskou stránku a jste přihlášeni.

    Snímek obrazovky ukazuje, jak se prohlížeč vrací na domovskou stránku.

Povolení přihlášení k Twitteru:

  1. Přejděte na web pro vývojáře twitteru.

  2. Zvolte odkaz Vytvořit aplikaci a přihlaste se k webu.

  3. Ve formuláři Vytvořit aplikaci vyplňte pole Název a Popis .

  4. Do pole WebSite zadejte adresu URL vašeho webu (například http://www.example.com).

    Poznámka

    Pokud testujete svůj web místně (pomocí adresy URL, jako je http://localhost:12345), twitter nemusí tuto adresu URL přijmout. Možná ale budete moct použít IP adresu zpětné místní smyčky (například http://127.0.0.1:12345). To zjednodušuje proces místního testování aplikace. Pokaždé, když se ale změní číslo portu místního webu, budete muset aktualizovat pole WebSite vaší aplikace.

  5. Do pole Adresa URL zpětného volání zadejte adresu URL stránky na vašem webu, na kterou se mají uživatelé po přihlášení k Twitteru vrátit. Pokud chcete například odeslat uživatele na domovskou stránku úvodního webu (který rozpozná jejich stav přihlášení), zadejte stejnou adresu URL, kterou jste zadali do pole WebSite .

  6. Přijměte podmínky a zvolte tlačítko Vytvořit aplikaci Na Twitteru .

  7. Na cílové stránce Moje aplikace zvolte aplikaci, kterou jste vytvořili.

  8. Na kartě Podrobnosti se posuňte dolů a zvolte tlačítko Vytvořit přístupový token .

  9. Na kartě Podrobnosti zkopírujte hodnoty Klíč příjemce a Tajný klíč příjemce pro vaši aplikaci a vložte je do dočasného textového souboru. Tyto hodnoty předáte poskytovateli Twitteru v kódu webu.

  10. Ukončete web Twitteru.

Teď na svém webu provedete změny na dvou stránkách, aby se uživatelé mohli k webu přihlásit pomocí svých twitterových účtů.

  1. Na svém webu upravte stránku _AppStart.cshtml a odkomentujte kód poskytovatele Twitter OAuth. Nekomentovaný blok kódu vypadá takto:

    OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");

  2. Zkopírujte hodnotu Spotřebitelského klíče z aplikace Twitter jako hodnotu parametru consumerKey (v uvozovkách).

  3. Zkopírujte hodnotu Tajný klíč spotřebitele z aplikace Twitter jako hodnotu parametru consumerSecret .

  4. Uložte soubor a zavřete ho.

  5. Upravte stránku ~/Account/Login.cshtml a odeberte komentáře z <fieldset> bloku na konci stránky. Pokud chcete zrušit komentář kódu, odeberte @* znaky, které před blokem následují a následují ho <fieldset> . Blok kódu s odebranými komentáři vypadá takto:

    <fieldset>
<legend>Log in using another service</legend>
<input type="submit" name="provider" id="facebook" value="Facebook" title="Log in using your Facebook account." />
<input type="submit" name="provider" id="twitter" value="Twitter" title="Log in using your Twitter account." />
<input type="submit" name="provider" id="windowsLive" value="WindowsLive" title="Log in using your Windows Live account." />
</fieldset>

  6. Uložte soubor a zavřete ho.

Teď můžete otestovat přihlášení k Twitteru.

  1. Spusťte stránku default.cshtml vašeho webu a zvolte tlačítko Přihlásit se .

  2. Na stránce Login (Přihlášení ) v části Use another service to log in (Přihlášení pomocí jiné služby ) zvolte ikonu Twitteru .

    Webová stránka přesměruje požadavek na přihlašovací stránku Twitteru pro aplikaci, kterou jste vytvořili.

    Snímek obrazovky znázorňující přesměrování webové stránky na přihlašovací stránku Twitteru

  3. Přihlaste se k účtu Na Twitteru.

  4. Kód použije token Twitteru k ověření uživatele a pak vás vrátí na stránku, kde můžete přidružit své přihlašovací údaje k účtu vašeho webu. Do pole Email formuláře se vyplní vaše jméno nebo e-mailová adresa.

    Snímek obrazovky s vyplněným jménem nebo e-mailovou adresou ve formuláři

  5. Zvolte tlačítko Přidružit .

    Prohlížeč se vrátí na domovskou stránku a jste přihlášeni.

    Snímek obrazovky znázorňující návrat prohlížeče na domovskou stránku a přihlášeného uživatele

Přidání map pomocí pomocné rutiny Mapy

Webové stránky 2 obsahují doplňky do knihovny pomocných webových aplikací ASP.NET, což je balíček doplňků pro web webové stránky. Jedním z nich je komponenta mapování poskytovaná Microsoft.Web.Helpers.Maps třídou . Třídu můžete použít Maps ke generování map založených buď na adrese, nebo na sadě souřadnic zeměpisné délky a šířky. Třída Maps vám umožní volat přímo do oblíbených mapových modulů, včetně Bing, Google, MapQuest a Yahoo.

Chcete-li použít novou Maps třídu na webu, musíte nejprve nainstalovat verzi 2 knihovny webových pomocných rutin. Chcete-li to provést, přejděte k pokynům pro instalaci aktuálně vydané verze knihovny webových pomocných rutin ASP.NET a nainstalujte verzi 2.

Postup přidání mapování na stránku je stejný bez ohledu na to, který z mapových modulů zavoláte. Stačí přidat odkaz na soubor JavaScriptu na stránku mapování a pak přidat volání, které vykreslí značky <script> na stránce. Pak na stránce mapování zavolejte mapový modul, který chcete použít.

Následující příklad ukazuje, jak vytvořit stránku, která vykresluje mapu na základě adresy, a další stránku, která vykreslí mapu na základě souřadnic zeměpisné délky a šířky. Příklad mapování adresy používá Mapy Google a příklad mapování souřadnic používá Mapy Bing. Všimněte si následujících prvků v kódu:

  • Volání metody Assets.AddScript v horní části dvou stránek mapování. Tato metoda přidá odkaz na souborjquery-1.6.2.min.js , který je součástí šablony úvodního webu a který vyžaduje Maps třída .
  • Volání Assets.GetScripts metody v souboru rozložení. Tato metoda vykreslí <script> značku na dvou stránkách mapování.
  • Volání @Maps.GetGoogleHtml metod a @Maps.GetBingHtml na stránkách mapování. Pokud chcete namapovat adresu, musíte předat řetězec adresy. Pokud chcete mapovat souřadnice, musíte předat souřadnice zeměpisné délky a šířky. Pro modul Mapy Bing musíte také předat klíč (který získáte zdarma registrací na webu Mapy Bing Developers). Metody pro ostatní mapové moduly fungují podobným způsobem (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

Vytvoření stránek mapování:

  1. Vytvořte web založený na šabloně úvodního webu .

  2. V kořenovém adresáři webu vytvořte soubor MapAddress.cshtml . Tato stránka vygeneruje mapu na základě adresy, kterou jí předáte.

  3. Zkopírujte do souboru následující kód a přepíšete existující obsah.

    @{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map an Address:</h3>
<form method="post" action="" id="coordinates" style="width: 320px">
<fieldset>
  <div>
    <label for="address">Address:</label>
    <input style="width: 300px" type="text"  name="address"  value="@Request["address"]"/>
    <input type="submit" value="Map It!" />
   </div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theAddress = Request["address"];
@Maps.GetGoogleHtml(theAddress,
    width: "800",
    height: "800")
}
</div>

  4. V kořenovém adresáři webu vytvořte soubor s názvem _MapLayout.cshtml . Tato stránka bude stránkou rozložení pro tyto dvě stránky mapování.

  5. Zkopírujte do souboru následující kód a přepíšete existující obsah.

    <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />

<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 1em;
        left: 3em;
        width: 18em;
    }
    #content {
        margin-top: 10em;
        margin-left: 3em;
    }
</style>
</head>
<body>
  @RenderBody()

  @*
Call the Assets helper to render tags for the Maps helper. For
releases after Web Pages 2 Beta, call Assets.GetScripts().
  *@
  @Assets.GetScripts()
</body>
</html>

  6. V kořenovém adresáři webu vytvořte soubor MapCoordinates.cshtml . Tato stránka vygeneruje mapu na základě sady souřadnic, které jí předáte.

  7. Zkopírujte do souboru následující kód a přepíšete existující obsah.

    @{
Layout = "~/_MapLayout.cshtml";
Assets.AddScript("~/Scripts/jquery-1.6.2.min.js");
}

<div id="navigation">
<h3>Map a set of coordinates:</h3>
<form method="post" action="" id="coordinates">
<fieldset>
<div>
    <label for="latitude">Latitude:&nbsp;&nbsp;&nbsp;</label>
    <input type="text"  name="latitude" value="@Request["latitude"]"/>
</div>
<div>
    <label for="longitude">Longitude:</label>
    <input type="text" name="longitude" value="@Request["longitude"]"/>
</div>
<div>
    <input type="submit" value="Map It!" />
</div>
</fieldset>
</form>
</div>
<div id="content">
@if(IsPost) {
var theLatitude = Request["latitude"];
var theLongitude = Request["longitude"];
@Maps.GetBingHtml("Ag6C5Ci9VUGz9AIhQyJ7YNwGraanqwy5-V3LK1qGDpdEVPV-MUPBryG18ELoC6g6",
    "",
    theLatitude,
    theLongitude,
    width: "800",
    height: "800")
}
</div>

Testování stránek mapování:

  1. Spusťte soubor MapAddress.cshtml stránky.

  2. Zadejte úplný řetězec adresy, včetně ulice, státu nebo provincie a PSČ, a pak zvolte tlačítko Map It . Stránka vykreslí mapu z Map Google:

    topseven-maphelper-1

  3. Najde sadu souřadnic zeměpisné šířky a délky pro konkrétní místo.

  4. Spusťte stránku MapCoordinates.cshtml. Zadejte souřadnice a pak zvolte tlačítko MapOvat . Stránka vykreslí mapu z Mapy Bing:

    topseven-maphelper-2

Souběžné spouštění aplikací webových stránek

Webová stránka 2 přidává možnost spouštět aplikace vedle sebe. To vám umožní dál spouštět aplikace webové stránky 1, vytvářet nové aplikace Webových stránek 2 a spouštět je všechny na stejném počítači.

Při instalaci webové stránky 2 Beta se službou WebMatrix byste měli pamatovat na některé věci:

  • Ve výchozím nastavení budou existující aplikace webových stránek ve vašem počítači spuštěny jako aplikace verze 2. (Sestavení pro verzi 2 se instalují v GAC a budou použita automaticky.)

  • Pokud chcete web spustit pomocí webových stránek verze 1 (místo výchozího, jako v předchozím bodě), můžete web nakonfigurovat tak, aby to udělal. Pokud váš web ještě nemá soubor web.config v kořenovém adresáři webu, vytvořte nový, zkopírujte do něj následující kód XML a přepište stávající obsah. Pokud web již obsahuje souborweb.config , přidejte <appSettings> do oddílu prvek podobný následujícímu <configuration> .

    <?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>

    - Pokud v souboru web.config nezadáte verzi, nasadí se lokalita jako lokalita verze 2. (Sestavení verze 2 se zkopírují do složky bin v nasazené lokalitě.)

  • Nové aplikace, které vytvoříte pomocí šablon webů ve webové matici verze 2 Beta, zahrnují sestavení webových stránek verze 2 ve složce bin webu.

Obecně platí, že vždy můžete určit, jakou verzi webových stránek použít s vaším webem, pomocí nuGetu nainstalovat příslušná sestavení do složky bin webu. Pokud chcete balíčky najít, navštivte NuGet.org.

Vykreslování stránek pro mobilní zařízení

Webové stránky 2 umožňují vytvářet vlastní displeje pro vykreslování obsahu na mobilních nebo jiných zařízeních.

Obor System.Web.WebPages názvů obsahuje následující třídy, které umožňují pracovat s režimy zobrazení: DefaultDisplayMode, DisplayInfoa DisplayModes. Tyto třídy můžete použít přímo a napsat kód, který vykreslí správný výstup pro konkrétní zařízení.

Alternativně můžete vytvořit stránky specifické pro zařízení pomocí vzoru pojmenování souborů, například: FileName.Mobile.cshtml. Můžete například vytvořit dvě verze stránky, jednu s názvem MyFile.cshtml a druhou s názvem MyFile.Mobile.cshtml. Když mobilní zařízení za běhu požádá o soubor MyFile.cshtml, webové stránky vykreslí obsah z souboru MyFile.Mobile.cshtml. Jinak se soubor MyFile.cshtml vykreslí.

Následující příklad ukazuje, jak povolit mobilní vykreslování přidáním stránky obsahu pro mobilní zařízení. Page1.cshtml obsahuje obsah a navigační boční panel. Page1.Mobile.cshtml obsahuje stejný obsah, ale vynechá boční panel.

Sestavení a spuštění ukázky kódu:

  1. Na webu webové stránky vytvořte soubor s názvem Page1.cshtml a zkopírujte do něj obsah Page1.cshtml z příkladu.

  2. Vytvořte soubor s názvem Page1.Mobile.cshtml a zkopírujte do něj obsah Page1.Mobile.cshtml z příkladu. Všimněte si, že mobilní verze stránky vynechá navigační oddíl pro lepší vykreslování na menší obrazovce.

  3. Spusťte desktopový prohlížeč a přejděte na Page1.cshtml.

  4. Spusťte mobilní prohlížeč (nebo emulátor mobilního zařízení) a přejděte na Page1.cshtml. Všimněte si, že tentokrát webové stránky vykreslí mobilní verzi stránky.

    Poznámka

    K testování mobilních stránek můžete použít simulátor mobilního zařízení, který běží na stolním počítači. Tento nástroj umožňuje testovat webové stránky tak, jak by vypadaly na mobilních zařízeních (obvykle s mnohem menší oblastí zobrazení). Jedním z příkladů simulátoru je doplněk User Agent Switcher pro Mozilla Firefox, který umožňuje emulovat různé mobilní prohlížeče z desktopové verze Firefoxu.

Stránka1.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #navigation {
        position: absolute;
        top: 0;
        left: 0;
        width: 10em;
    }
    #content {
    margin-left: 13em;
        margin-right: 10em;
    }
</style>
</head>
<body>
<div id="navigation">
    <h3>Related Sites</h3>
    <ul>
        <li><a href="http://www.adventure-works.com/">Adventure Works</a></li>
        <li><a href="http://www.contoso.com/">Contoso, Ltd</a></li>
        <li><a href="http://www.treyresearch.net/">Trey Research</a></li>
    </ul>
</div>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

Page1.Mobile.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    #content {
    margin-left: 2em;
        margin-right: 5em;
    }
</style>
</head>
<body>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    labore et dolore magna aliquyam erat, sed diam voluptua. </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
    dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
    et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</body>
</html>

Page1.cshtml vykreslený v desktopovém prohlížeči:

topseven-displaymodes-1

Page1.Mobile.cshtml se zobrazuje v zobrazení simulátoru Apple iPhone v prohlížeči Firefox. I když je požadavek na Page1.cshtml, aplikace vykreslí Page1.Mobile.cshtml.

topseven-displaymodes-2

Další materiály

prostředky ASP.NET webových stránek 1

Poznámka

Většina programovacích prostředků a prostředků rozhraní API webových stránek 1 se stále vztahuje na webové stránky 2.

WebMatrix – zdroje informací