Najważniejsze funkcje na stronach sieci Web ASP.NET 2

Artykuł
06/16/2023

Ten artykuł zawiera omówienie najważniejszych nowych funkcji w ASP.NET Web Pages 2 RC, uproszczonej struktury programowania internetowego dołączonej do programu Microsoft WebMatrix 2 RC.

Co zawiera:

Instalowanie programu WebMatrix

Nowe i ulepszone funkcje

Zmiany w wersji RC

Zmiany wersji beta

Korzystanie z nowych i zaktualizowanych szablonów witryn

Weryfikowanie danych wejściowych użytkownika

Włączanie logowania z serwisu Facebook i innych witryn przy użyciu protokołu OAuth i OpenID

Dodawanie map przy użyciu pomocnika maps

Uruchamianie aplikacji stron internetowych obok siebie

Renderowanie stron dla urządzeń przenośnych

Dodatkowe zasoby

Uwaga

W tym temacie założono, że używasz programu WebMatrix do pracy z kodem ASP.NET Web Pages 2. Jednak podobnie jak w przypadku stron sieci Web 1, można również tworzyć witryny sieci Web Pages 2 przy użyciu programu Visual Studio, co zapewnia ulepszone możliwości i debugowanie funkcji IntelliSense. Aby pracować ze stronami sieci Web w programie Visual Studio, należy najpierw zainstalować program Visual Studio 2010 SP1, Visual Web Developer Express 2010 SP1 lub Visual Studio 11 Beta. Następnie zainstaluj ASP.NET MVC 4 Beta, która zawiera szablony i narzędzia do tworzenia aplikacji ASP.NET MVC 4 i Web Pages 2 w programie Visual Studio.

Ostatnia aktualizacja: 18 czerwca 2012 r.

Instalowanie programu WebMatrix

Aby zainstalować strony sieci Web, możesz użyć Instalator platformy Microsoft Web, czyli bezpłatnej aplikacji, która ułatwia instalowanie i konfigurowanie technologii związanych z internetem. Zainstalujesz program WebMatrix 2 Beta, który zawiera strony sieci Web 2 Beta.

Przejdź do strony instalacji najnowszej wersji Instalatora platformy sieci Web:

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

Uwaga

Jeśli masz już zainstalowany program WebMatrix 1, ta instalacja aktualizuje ją do programu WebMatrix 2 Beta. Możesz uruchamiać witryny internetowe utworzone przy użyciu wersji 1 lub 2 na tym samym komputerze. Aby uzyskać więcej informacji, zobacz sekcję Dotyczącą uruchamiania aplikacji stron internetowych obok siebie.
Wybierz pozycję Zainstaluj teraz.

Jeśli używasz programu Internet Explorer, przejdź do następnego kroku. Jeśli używasz innej przeglądarki, takiej jak Mozilla Firefox lub Google Chrome, zostanie wyświetlony monit o zapisanie pliku Webmatrix.exe na komputerze. Zapisz plik, a następnie kliknij go, aby uruchomić instalatora.
Uruchom instalatora i wybierz przycisk Zainstaluj . Spowoduje to zainstalowanie programu WebMatrix i stron sieci Web.

Nowe i rozszerzone funkcje

Zmiany wersji RC (czerwiec 2012 r.)

Wersja RC w czerwcu 2012 r. zawiera kilka zmian z odświeżania wersji beta wydanej w marcu 2012 roku. Te zmiany są następujące:

Metoda Validation.AddFormError została dodana do Validation pomocnika. Jest to przydatne, jeśli przeprowadzasz walidację ręcznie (na przykład weryfikujesz wartość przekazywaną w ciągu zapytania) i chcesz dodać komunikat o błędzie, który może być wyświetlany przez metodę Html.ValidationSummary . Aby uzyskać więcej informacji, zobacz sekcję Weryfikowanie danych, które nie pochodzą bezpośrednio od użytkowników w weryfikowaniu danych wejściowych użytkownika w witrynach ASP.NET stron internetowych (Razor).
Funkcje tworzenia pakietów i minification zostały usunięte z podstawowych zestawów ASP.NET Web Pages 2. W związku z tym Assets pomocnik wymieniony w dalszej części tego dokumentu nie jest dostępny. Zamiast tego należy zainstalować pakiet NuGet optymalizacji ASP.NET . Aby uzyskać więcej informacji, zobacz Bundling and Minifying Assets in an ASP.NET Web Pages (Razor) Site (Bundling and Minifying Assets in an ASP.NET Web Pages (Razor) Site (Łączenie i minimalizowanie zasobów w witrynie ASP.NET Web Pages (Razor).
Dodano dodatkowe zestawy do obsługi ASP.NET Web Pages 2. Jedynym zauważalnym skutkiem tej zmiany jest to, że po utworzeniu lokacji lub wdrożeniu lokacji u dostawcy hostingu może być widocznych więcej zestawów w folderze bin witryny.

Zmiany wersji beta (luty 2012 r.)

Wersja beta wydana w lutym 2012 r. zawiera tylko kilka zmian z wersji beta wydanej w grudniu 2011 r. Te zmiany są następujące:

Platforma Razor obsługuje teraz atrybuty warunkowe. W elemecie HTML, jeśli ustawisz atrybut na wartość rozpoznawaną w kodzie serwera lub falsenull, ASP.NET w ogóle nie renderuje atrybutu. Załóżmy na przykład, że masz następujące znaczniki dla pola wyboru:
```
<input type="checkbox"
name="check1"
value="check1"
checked="@checked1" />
```
Jeśli wartość rozpoznawana checked1 na false lub do null, checked atrybut nie jest renderowany. Jest to zmiana powodująca niezgodność.
Nazwa Validation.GetHtml metody została zmieniona na Validation.For. Jest to zmiana powodująca niezgodność; Validation.GetHtml nie będzie działać w wersji beta.
Teraz możesz dołączyć operator do ~ znaczników, aby odwołać się do katalogu głównego witryny bez korzystania z Href funkcji. (Oznacza to, że analizator Razor może teraz znaleźć i rozpoznać ~ operator bez konieczności jawnego wywołania metody do Href.) Metoda Href nadal działa, więc nie jest to zmiana powodująca niezgodność.

Jeśli na przykład wcześniej adiustacja była podobna do następującej:

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

Teraz możesz użyć znaczników w następujący sposób:

<a href="~/Default.cshtml">Home</a>
Pomocnik Scripts do zarządzania zasobami (zasobami) został zastąpiony Assets pomocnikiem, który ma nieco inne metody, takie jak:
- W przypadku Scripts.Addprogramu użyj polecenia Assets.AddScript
- W przypadku Scripts.GetScriptTagsprogramu użyj polecenia Assets.GetScripts
  
  Jest to zmiana powodująca niezgodność; klasa Scripts nie jest dostępna w wersji beta. Przykłady kodu w tym dokumencie, które używają zarządzania zasobami, zostały zaktualizowane o tę zmianę.

Korzystanie z nowych i zaktualizowanych szablonów witryn

Szablon witryny początkowej został zaktualizowany tak, aby był on domyślnie uruchamiany na stronach sieci Web 2. Obejmuje ona również następujące nowe funkcje:

Renderowanie stron przyjaznych dla urządzeń przenośnych. Dzięki użyciu stylów CSS i @media selektora witryna startowa zapewnia ulepszone renderowanie stron na mniejszych ekranach, w tym ekranach urządzeń przenośnych.
Ulepszone opcje członkostwa i uwierzytelniania. Możesz zezwolić użytkownikom na logowanie się do witryny przy użyciu kont z innych witryn sieci społecznościowych, takich jak Twitter, Facebook i Windows Live. Aby uzyskać więcej informacji, zobacz sekcję Włączanie logowania z serwisu Facebook i innych witryn przy użyciu protokołu OAuth i OpenID .
Elementy HTML5.

Nowy szablon witryny osobistej umożliwia utworzenie witryny internetowej zawierającej osobisty blog, stronę zdjęć i stronę usługi Twitter. Witrynę można dostosować na podstawie szablonu witryny osobistej , wykonując następujące czynności:

Zmień wygląd witryny, edytując plik układu (_SiteLayout.cshtml) i plik stylów (Site.css).
Zainstaluj pakiety NuGet, które dodają funkcje do witryny. Aby uzyskać informacje o sposobie instalowania pakietów, w tym biblioteki ASP.NET Web Helpers Library, zobacz samouczek dotyczący instalowania pomocników.

Aby uzyskać dostęp do szablonu witryny osobistej , wybierz pozycję Szablony na ekranie Szybki start programu WebMatrix.

W oknie dialogowym Szablony wybierz szablon Witryny osobistej .

Strona docelowa szablonu witryny osobistej umożliwia śledzenie linków do konfigurowania strony bloga, strony twitterowej i zdjęć.

Weryfikowanie danych wejściowych użytkownika

Na stronach sieci Web 1, aby zweryfikować dane wejściowe użytkownika w przesłanych formularzach, należy użyć System.Web.WebPages.Html.ModelState klasy . (Przedstawiono to w kilku przykładach kodu w samouczku web Pages 1 zatytułowanym Praca z danymi). Nadal można użyć tego podejścia w witrynie Web Pages 2. Jednak strony sieci Web 2 oferują również ulepszone narzędzia do weryfikowania danych wejściowych użytkownika:

Nowe klasy walidacji, w tym System.Web.WebPages.ValidationHelper i System.Web.WebPages.Validator, umożliwiają wykonywanie zaawansowanych zadań weryfikacji za pomocą kilku wierszy kodu.
Opcjonalnie walidacja po stronie klienta, która zapewnia natychmiastową opinię użytkownikowi, zamiast wymagać rundy na serwerze w celu sprawdzenia błędów weryfikacji. (Ze względów bezpieczeństwa walidacja jest wykonywana na serwerze, nawet jeśli kontrole zostały wcześniej wykonane w kliencie).

Aby użyć nowych funkcji weryfikacji, wykonaj następujące czynności:

W kodzie strony zarejestruj element, który ma zostać zweryfikowany przy użyciu metod Validation pomocnika: Validation.RequireField, Validation.RequireFields (w celu zarejestrowania wielu elementów, które mają być wymagane) lub Validation.Add. Metoda Add umożliwia określenie innych typów kontroli poprawności, takich jak sprawdzanie typu danych, porównywanie wpisów w różnych polach, sprawdzanie długości ciągu i wzorce (przy użyciu wyrażeń regularnych). Oto kilka przykładów:

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"));

Aby wyświetlić błąd specyficzny dla pola, wywołaj Html.ValidationMessage metodę narzutu dla każdego weryfikowanego elementu:

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

Aby wyświetlić podsumowanie (<ul> listę) wszystkich błędów na stronie, Html.ValidationSummary w znacznikach:

@Html.ValidationSummary()

Te kroki są wystarczające do zaimplementowania weryfikacji po stronie serwera. Jeśli chcesz dodać weryfikację po stronie klienta, wykonaj następujące czynności.

Dodaj następujące odwołania do pliku skryptu w <head> sekcji strony internetowej. Dwa pierwsze skrypty odwołują się do plików zdalnych na serwerze sieci dostarczania zawartości (CDN). Trzecie odwołanie wskazuje na lokalny plik skryptu. Aplikacje produkcyjne powinny implementować rezerwę, gdy sieć CDN jest niedostępna. Przetestuj rezerwę.

<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>

Najprostszym sposobem uzyskania lokalnej kopii biblioteki jquery.validate.unobtrusive.min.js jest utworzenie nowej witryny stron sieci Web na podstawie jednego z szablonów witryny (takich jak witryna startowa). Witryna utworzona przez szablon zawiera plik jquery.validate.unobtrusive.js w folderze Scripts, z którego można skopiować go do witryny.

Jeśli witryna internetowa używa strony _SiteLayout do sterowania układem strony, możesz dołączyć te odwołania do skryptów na tej stronie, aby walidacja jest dostępna dla wszystkich stron zawartości. Jeśli chcesz przeprowadzić walidację tylko na określonych stronach, możesz użyć menedżera zasobów do zarejestrowania skryptów tylko na tych stronach. W tym celu wywołaj metodę Assets.AddScript(path) na stronie, którą chcesz zweryfikować i odwołać się do każdego z plików skryptów. Następnie dodaj wywołanie metody na Assets.GetScripts stronie _SiteLayout w celu renderowania zarejestrowanych <script> tagów. Aby uzyskać więcej informacji, zobacz sekcję Rejestrowanie skryptów za pomocą menedżera zasobów.

W znacznikach dla pojedynczego elementu wywołaj metodę Validation.For . Ta metoda emituje atrybuty, które jQuery może podłączyć w celu zapewnienia weryfikacji po stronie klienta. Na przykład:

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

Poniższy przykład przedstawia stronę, która weryfikuje dane wejściowe użytkownika w formularzu. Aby uruchomić i przetestować ten kod weryfikacyjny, wykonaj następujące czynności:

Utwórz nową witrynę sieci Web przy użyciu jednego z szablonów witryn programu WebMatrix 2, który zawiera folder Skrypty , taki jak szablon witryny początkowej .
W nowej witrynie utwórz nową stronę cshtml i zastąp zawartość strony następującym kodem.
Uruchom stronę w przeglądarce. Wprowadź prawidłowe i nieprawidłowe wartości, aby zobaczyć wpływ na walidację. Na przykład pozostaw pole wymagane puste lub wprowadź literę w polu Środki .

@{
// 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>

Oto strona przesyłana przez użytkownika prawidłowych danych wejściowych:

Oto strona przesyłana przez użytkownika z polem wymaganym pozostawionych puste:

Oto strona przesyłana przez użytkownika z wartością inną niż liczba całkowita w polu Środki :

Aby uzyskać więcej informacji, zobacz następujące wpisy w blogu:

Zaktualizowano walidację w programie Web Pages w wersji 2 Podstawy dodawania walidacji przy użyciu Validation pomocnika (tylko po stronie serwera)
Zaktualizowano walidację w programie Web Pages w wersji 2, część 2 Dodawanie weryfikacji po stronie klienta.
Zaktualizowano walidację w programie Web Pages w wersji 2, część 3 Błędy walidacji formatowania.

Rejestrowanie skryptów przy użyciu menedżera zasobów

Menedżer zasobów to nowa funkcja, której można użyć w kodzie serwera do rejestrowania i renderowania skryptów klienta. Ta funkcja jest przydatna podczas pracy z kodem z wielu plików (takich jak strony układu, strony zawartości, pomocnicy itp.), które są łączone w jedną stronę w czasie wykonywania. Menedżer zasobów koordynuje pliki źródłowe, aby upewnić się, że pliki skryptów są prawidłowo i wydajnie przywoływane na renderowanej stronie, niezależnie od tego, z których plików kodu są wywoływane lub ile razy są wywoływane. Menedżer zasobów renderuje <script> również tagi w odpowiednim miejscu, aby strona mogła szybko ładować (bez pobierania skryptów podczas renderowania) i uniknąć błędów, które mogą wystąpić, jeśli skrypty są wywoływane przed ukończeniem renderowania.

Załóżmy na przykład, że tworzysz niestandardowy pomocnik, który wywołuje plik JavaScript, i wywołujesz ten pomocnik w trzech różnych miejscach w kodzie strony zawartości. Jeśli nie używasz menedżera zasobów do rejestrowania wywołań skryptów w pomocniku, trzy różne <script> tagi wskazujące ten sam plik skryptu będą wyświetlane na renderowanej stronie. Ponadto w zależności od tego, gdzie <script> tagi są wstawiane na renderowanej stronie, mogą wystąpić błędy, jeśli skrypt próbuje uzyskać dostęp do niektórych elementów strony przed pełnym załadowaniem strony. Jeśli używasz menedżera zasobów do zarejestrowania skryptu, należy uniknąć tych problemów.

Możesz zarejestrować skrypt w menedżerze zasobów, wykonując następujące czynności:

W kodzie, który musi odwoływać się do skryptu, wywołaj metodę Assets.AddScript .
Na stronie _SiteLayout wywołaj metodę Assets.GetScripts w celu renderowania <script> tagów.

Uwaga

Umieść wywołania jako Assets.GetScripts ostatni element w <body> elemencie strony _SiteLayout . Ułatwia to szybsze ładowanie strony i pomaga uniknąć błędów skryptów.

W poniższym przykładzie pokazano, jak działa menedżer zasobów. Kod zawiera następujące elementy:

Niestandardowy pomocnik o nazwie MakeNote. Ten pomocnik renderuje ciąg wewnątrz pola, opakowując div wokół niego element stylizowany obramowaniem i dodając do niego znak "Uwaga:". Pomocnik wywołuje również plik JavaScript, który dodaje zachowanie w czasie wykonywania do notatki. Zamiast odwoływać się do skryptu za pomocą tagu <script> , pomocnik rejestruje skrypt przez wywołanie metody Assets.AddScript .
Plik JavaScript. Jest to plik wywoływany przez pomocnika i tymczasowo zwiększa rozmiar czcionki elementów notatek mouseover podczas zdarzenia.
Strona zawartości, która odwołuje się do strony _SiteLayout , renderuje część zawartości w treści, a następnie wywołuje MakeNote pomocnika.
Strona _SiteLayout . Ta strona zawiera wspólny nagłówek i strukturę układu strony. Zawiera również wywołanie elementu Assets.GetScripts, które jest sposobem renderowania wywołań skryptów przez menedżera zasobów na stronie.

Aby uruchomić przykład:

Utwórz pustą witrynę sieci Web Pages 2. W tym celu możesz użyć szablonu Pustej witryny programu WebMatrix.
Utwórz folder o nazwie Scripts w witrynie.
W folderze Scripts utwórz plik o nazwie Test.js, skopiuj do niego zawartość Test.js z przykładu i zapisz plik.
Utwórz folder o nazwie App_Code w witrynie.
W folderze App_Code utwórz plik o nazwie Helpers.cshtml, skopiuj do niego przykładowy kod i zapisz go w folderze o nazwie App_Code w folderze głównym.
W folderze głównym witryny utwórz plik o nazwie _SiteLayout.cshtml, skopiuj do niego przykład i zapisz plik.
W katalogu głównym witryny utwórz plik o nazwie ContentPage.cshtml, dodaj przykładowy kod i zapisz go.
Uruchom aplikację ContentPage w przeglądarce. Ciąg przekazany do MakeNote pomocnika jest renderowany jako notatka skrzynkowa.
Przekaż wskaźnik myszy nad notatką. Skrypt tymczasowo zwiększa rozmiar czcionki notatki.
Wyświetl źródło renderowanej strony. Ze względu na miejsce, w którym umieszczono wywołanie Assets.GetScriptsmetody , renderowany <script> tag wywołujący Test.js jest ostatnim elementem w treści strony.

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")

Poniższy zrzut ekranu przedstawia plik ContentPage.cshtml w przeglądarce podczas trzymania wskaźnika myszy nad uwagą:

Włączanie logowania z serwisu Facebook i innych witryn przy użyciu protokołu OAuth i OpenID

Strony sieci Web 2 udostępniają rozszerzone opcje członkostwa i uwierzytelniania. Głównym ulepszeniem jest to, że istnieją nowi dostawcy OAuth i OpenID . Korzystając z tych dostawców, możesz zezwolić użytkownikom na logowanie się do witryny przy użyciu istniejących poświadczeń z serwisów Facebook, Twitter, Windows Live, Google i Yahoo. Na przykład aby zalogować się przy użyciu konta w serwisie Facebook, użytkownicy mogą po prostu wybrać ikonę serwisu Facebook, która przekierowuje ich do strony logowania do serwisu Facebook, na której wprowadza informacje o użytkowniku. Następnie mogą skojarzyć identyfikator logowania serwisu Facebook ze swoim kontem w Twojej witrynie. Powiązane ulepszenie funkcji członkostwa stron sieci Web polega na tym, że użytkownicy mogą skojarzyć wiele logowań (w tym identyfikatorów logowania z witryn sieci społecznościowych) za pomocą jednego konta w witrynie internetowej.

Na tej ilustracji przedstawiono stronę logowania z szablonu witryny startowej , na której użytkownik może wybrać ikonę Facebook, Twitter lub Windows Live, aby włączyć logowanie przy użyciu konta zewnętrznego:

Możesz włączyć członkostwo OAuth i OpenID przy użyciu zaledwie kilku wierszy kodu. Metody i właściwości używane do pracy z dostawcami OAuth i OpenID są w WebMatrix.Security.OAuthWebSecurity klasie .

Jednak zamiast używać kodu w celu umożliwienia logowania z innych witryn, zalecanym sposobem rozpoczęcia pracy z nowymi dostawcami jest użycie nowego szablonu witryny początkowej dołączonego do programu WebMatrix 2 Beta. Szablon witryny początkowej zawiera pełną infrastrukturę członkostwa, wraz ze stroną logowania, bazą danych członkostwa i całym kodem, który należy umożliwić użytkownikom logowanie się do witryny przy użyciu poświadczeń lokalnych lub tych z innej witryny.

Jak włączyć logowania przy użyciu dostawców OAuth i OpenID

Ta sekcja zawiera przykład sposobu zezwalania użytkownikom na logowanie się z witryn zewnętrznych (Facebook, Twitter, Windows Live, Google lub Yahoo) do witryny opartej na szablonie witryny początkowej . Po utworzeniu witryny początkowej należy to zrobić (postępuj zgodnie z poniższymi szczegółami):

W przypadku witryn korzystających z dostawcy OAuth (Facebook, Twitter i Windows Live) utwórz aplikację w witrynie zewnętrznej. Dzięki temu klucze aplikacji będą potrzebne do wywołania funkcji logowania dla tych witryn. W przypadku witryn korzystających z dostawcy OpenID (Google, Yahoo) nie trzeba tworzyć aplikacji. W przypadku wszystkich tych witryn musisz mieć konto, aby zalogować się i utworzyć aplikacje dla deweloperów.

Uwaga

Aplikacje systemu Windows Live akceptują tylko adres URL na żywo dla działającej witryny internetowej, więc nie można użyć lokalnego adresu URL witryny internetowej do testowania identyfikatorów logowania.
Edytuj kilka plików w witrynie internetowej, aby określić odpowiedniego dostawcę uwierzytelniania i przesłać identyfikator logowania do witryny, której chcesz użyć.

Aby włączyć logowania Google i Yahoo:

W witrynie internetowej zmodyfikuj stronę _AppStart.cshtml i dodaj następujące dwa wiersze kodu w bloku kodu Razor po wywołaniu WebSecurity.InitializeDatabaseConnection metody . Ten kod umożliwia zarówno dostawcom Google, jak i Yahoo OpenID.
```
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Google);
OAuthWebSecurity.RegisterOpenIDClient(BuiltInOpenIDClient.Yahoo);
```

Na stronie ~/Account/Login.cshtml usuń komentarze z następującego <fieldset> bloku znaczników na końcu strony. Aby usunąć komentarz kodu, usuń @* znaki, które poprzedzają i postępuj zgodnie z blokiem <fieldset> . Wynikowy blok kodu wygląda następująco:

<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>

<input> Dodaj element dla dostawcy Google lub Yahoo do <fieldset> grupy na stronie ~/Account/Login.cshtml. Zaktualizowana <fieldset> grupa z elementami <input> zarówno Google, jak i Yahoo wygląda jak w poniższym przykładzie:

<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>

Na stronie ~/Account/AssociateServiceAccount.cshtml dodaj <input> elementy dla google lub Yahoo do <fieldset> grupy w pobliżu końca pliku. Możesz skopiować te same <input> elementy, które właśnie zostały dodane do <fieldset> sekcji na stronie ~/Account/Login.cshtml .

Strona ~/Account/AssociateServiceAccount.cshtml w szablonie witryny początkowej może być używana, jeśli chcesz utworzyć stronę, na której użytkownicy mogą skojarzyć wiele logowań z innych witryn za pomocą jednego konta w witrynie internetowej.

Teraz możesz przetestować logowania Google i Yahoo.

Uruchom stronę default.cshtml witryny i wybierz przycisk Zaloguj .
Na stronie Logowanie w sekcji Użyj innej usługi do zalogowania wybierz przycisk Prześlij Google lub Yahoo . W tym przykładzie użyto identyfikatora logowania Google.

Strona internetowa przekierowuje żądanie do strony logowania Google.
Wprowadź poświadczenia dla istniejącego konta Google.
Jeśli google pyta, czy chcesz zezwolić localhost na korzystanie z informacji z konta, kliknij przycisk Zezwalaj.

Kod używa tokenu Google do uwierzytelniania użytkownika, a następnie wraca do tej strony w witrynie internetowej. Ta strona umożliwia użytkownikom skojarzenie logowania Google z istniejącym kontem w witrynie internetowej lub zarejestrowanie nowego konta w witrynie w celu skojarzenia logowania zewnętrznego.
Wybierz przycisk Skojarz . Przeglądarka powraca do strony głównej aplikacji.

Aby włączyć logowania do serwisu Facebook:

Przejdź do witryny deweloperów serwisu Facebook (zaloguj się, jeśli jeszcze się nie zalogowano).
Wybierz przycisk Utwórz nową aplikację , a następnie postępuj zgodnie z monitami, aby nazwać i utworzyć nową aplikację.
W sekcji Wybierz sposób integracji aplikacji z Facebookiem wybierz sekcję Witryna internetowa .
Wypełnij pole Adres URL witryny przy użyciu adresu URL witryny (na przykład http://www.example.com). Pole Domena jest opcjonalne; Można go użyć do zapewnienia uwierzytelniania dla całej domeny (na przykład example.com).

Uwaga

Jeśli uruchamiasz witrynę na komputerze lokalnym z adresem URL, takim jak http://localhost:12345 (gdzie numer jest numerem portu lokalnego), możesz dodać tę wartość do pola Adres URL witryny na potrzeby testowania witryny. Jednak w dowolnym momencie zmiany numeru portu witryny lokalnej należy zaktualizować pole Adres URL witryny aplikacji.
Wybierz przycisk Zapisz zmiany .
Wybierz ponownie kartę Aplikacje , a następnie wyświetl stronę początkową aplikacji.
Skopiuj wartości Identyfikator aplikacji i Wpis tajny aplikacji i wklej je do tymczasowego pliku tekstowego. Te wartości zostaną przekazane do dostawcy serwisu Facebook w kodzie witryny internetowej.
Zamknij witrynę dla deweloperów serwisu Facebook.

Teraz wprowadzisz zmiany na dwóch stronach w witrynie internetowej, aby użytkownicy mogli logować się do witryny przy użyciu ich kont na Facebooku.

W witrynie internetowej zmodyfikuj stronę _AppStart.cshtml i usuń komentarz kodu dostawcy OAuth usługi Facebook. Blok kodu bez komentarza wygląda następująco:

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

Skopiuj wartość Identyfikator aplikacji z aplikacji Facebook jako wartość consumerKey parametru (wewnątrz cudzysłowu).
Skopiuj wartość wpisu tajnego aplikacji z aplikacji Facebook jako wartość parametru consumerSecret .
Zapisz i zamknij plik.

Edytuj stronę ~/Account/Login.cshtml i usuń komentarze z <fieldset> bloku w pobliżu końca strony. Aby usunąć komentarz kodu, usuń @* znaki, które poprzedzają i postępuj zgodnie z blokiem <fieldset> . Blok kodu z usuniętymi komentarzami wygląda następująco:

<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>

Zapisz i zamknij plik.

Teraz możesz przetestować logowanie do serwisu Facebook.

Uruchom stronę default.cshtml witryny i wybierz przycisk Zaloguj .
Na stronie Logowanie w sekcji Użyj innej usługi do zalogowania wybierz ikonę Serwisu Facebook .

Strona internetowa przekierowuje żądanie do strony logowania do serwisu Facebook.
Zaloguj się do konta na Facebooku.

Kod używa tokenu serwisu Facebook do uwierzytelnienia Użytkownika, a następnie wraca do strony, na której możesz skojarzyć swoje logowanie do serwisu Facebook przy użyciu logowania do witryny. Nazwa użytkownika lub adres e-mail są wypełnione w polu Email w formularzu.
Wybierz przycisk Skojarz .

Przeglądarka powraca do strony głównej i jest zalogowana.

Aby włączyć logowania do usługi Twitter:

Przejdź do witryny deweloperów usługi Twitter.
Wybierz link Utwórz aplikację , a następnie zaloguj się do witryny.
W formularzu Tworzenie aplikacji wypełnij pola Nazwa i Opis .
W polu Witryna sieci Web wprowadź adres URL witryny (na przykład http://www.example.com).

Uwaga

Jeśli testujesz witrynę lokalnie (przy użyciu adresu URL takiego jak http://localhost:12345), usługa Twitter może nie zaakceptować adresu URL. Można jednak użyć lokalnego adresu IP sprzężenia zwrotnego (na przykład http://127.0.0.1:12345). Upraszcza to proces testowania aplikacji lokalnie. Jednak za każdym razem, gdy numer portu witryny lokalnej ulegnie zmianie, należy zaktualizować pole Witryny sieci Web aplikacji.
W polu Adres URL wywołania zwrotnego wprowadź adres URL strony w witrynie internetowej, do której użytkownicy mają powrócić po zalogowaniu się do usługi Twitter. Aby na przykład wysłać użytkowników do strony głównej witryny początkowej (która rozpozna ich stan logowania), wprowadź ten sam adres URL wprowadzony w polu WebSite .
Zaakceptuj warunki i wybierz przycisk Utwórz aplikację usługi Twitter .
Na stronie docelowej Moje aplikacje wybierz utworzoną aplikację.
Na karcie Szczegóły przewiń do dołu i wybierz przycisk Utwórz mój token dostępu .
Na karcie Szczegóły skopiuj wartości Klucz konsumenta i Klucz tajny konsumenta dla aplikacji i wklej je do tymczasowego pliku tekstowego. Te wartości zostaną przekazane do dostawcy usługi Twitter w kodzie witryny internetowej.
Zamknij witrynę usługi Twitter.

Teraz wprowadzisz zmiany na dwóch stronach w witrynie internetowej, aby użytkownicy mogli logować się do witryny przy użyciu kont twitterowych.

W witrynie internetowej zmodyfikuj stronę _AppStart.cshtml i usuń komentarz kodu dla dostawcy protokołu OAuth usługi Twitter. Blok kodu bez komentarza wygląda następująco:
```
OAuthWebSecurity.RegisterOAuthClient(
BuiltInOAuthClient.Twitter,
consumerKey: "",
consumerSecret: "");
```
Skopiuj wartość Klucz konsumenta z aplikacji Twitter jako wartość consumerKey parametru (wewnątrz cudzysłowu).
Skopiuj wartość Klucz tajny odbiorcy z aplikacji Twitter jako wartość parametru consumerSecret .
Zapisz i zamknij plik.

<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>

Zapisz i zamknij plik.

Teraz możesz przetestować logowanie do usługi Twitter.

Uruchom stronę default.cshtml witryny i wybierz przycisk Zaloguj .
Na stronie Logowanie w sekcji Użyj innej usługi do zalogowania wybierz ikonę Twitter .

Strona internetowa przekierowuje żądanie do strony logowania w usłudze Twitter dla utworzonej aplikacji.
Zaloguj się na koncie usługi Twitter.
Kod używa tokenu twitter do uwierzytelnienia użytkownika, a następnie zwraca Cię do strony, na której można skojarzyć identyfikator logowania z kontem witryny internetowej. Twoje imię i nazwisko lub adres e-mail są wypełniane w polu Email w formularzu.
Wybierz przycisk Skojarz .

Przeglądarka powraca do strony głównej i jest zalogowana.

Dodawanie map przy użyciu pomocnika maps

Strony sieci Web 2 zawierają dodatki do biblioteki pomocników sieci Web ASP.NET, która jest pakietem dodatków dla witryny stron sieci Web. Jednym z nich jest składnik mapowania dostarczony przez klasę Microsoft.Web.Helpers.Maps . Za pomocą Maps klasy można generować mapy na podstawie adresu lub zestawu współrzędnych długości i szerokości geograficznej. Klasa Maps umożliwia bezpośrednie wywołanie do popularnych aparatów map, w tym Bing, Google, MapQuest i Yahoo.

Aby użyć nowej Maps klasy w witrynie internetowej, musisz najpierw zainstalować wersję 2 biblioteki pomocników sieci Web. W tym celu przejdź do instrukcji dotyczących instalowania obecnie wydanej wersji biblioteki ASP.NET Web Helpers Library i zainstaluj wersję 2.

Kroki dodawania mapowania do strony są takie same niezależnie od tego, które aparaty mapy są wywoływane. Wystarczy dodać odwołanie do pliku JavaScript na stronie mapowania, a następnie dodać wywołanie, które renderuje <script> tagi na stronie. Następnie na stronie mapowania wywołaj aparat mapy, którego chcesz użyć.

W poniższym przykładzie pokazano, jak utworzyć stronę, która renderuje mapę na podstawie adresu, oraz inną stronę, która renderuje mapę na podstawie współrzędnych długości geograficznej i szerokości geograficznej. Przykład mapowania adresów używa map Google Maps, a przykład mapowania współrzędnych używa Mapy Bing. Zwróć uwagę na następujące elementy w kodzie:

Wywołanie metody w Assets.AddScript górnej części dwóch stron mapowania. Ta metoda dodaje odwołanie do pliku jquery-1.6.2.min.js dołączonego do szablonu witryny początkowej i jest to wymagane przez klasę Maps .
Wywołanie Assets.GetScripts metody w pliku układu. Ta metoda renderuje <script> tag na dwóch stronach mapowania.
Wywołanie metody @Maps.GetGoogleHtml i @Maps.GetBingHtml na stronach mapowania. Aby zamapować adres, musisz przekazać ciąg adresu. Aby mapować współrzędne, należy przekazać współrzędne geograficzne i współrzędne geograficzne. W przypadku aparatu Mapy Bing należy również przekazać klucz (który można uzyskać bezpłatnie, tworząc konto w witrynie Mapy Bing Developers). Metody innych aparatów map działają w podobny sposób (@Maps.GetYahooHtml, @Maps.GetMapQuestHtml).

Aby utworzyć strony mapowania:

Utwórz witrynę internetową na podstawie szablonu witryny początkowej .
Utwórz plik o nazwie MapAddress.cshtml w katalogu głównym witryny. Ta strona wygeneruje mapę na podstawie przekazanego do niego adresu.

Skopiuj następujący kod do pliku, zastępując istniejącą zawartość.

@{
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>

Utwórz plik o nazwie _MapLayout.cshtml w katalogu głównym witryny. Ta strona będzie stroną układu dla dwóch stron mapowania.

Skopiuj następujący kod do pliku, zastępując istniejącą zawartość.

<!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>

Utwórz plik o nazwie MapCoordinates.cshtml w katalogu głównym witryny. Ta strona wygeneruje mapę na podstawie zestawu współrzędnych przekazywanych do niej.

Skopiuj następujący kod do pliku, zastępując istniejącą zawartość.

@{
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>

Aby przetestować strony mapowania:

Uruchom stronę MapAddress.cshtml .
Wprowadź pełny ciąg adresu, w tym adres ulicy, stan lub prowincję i kod pocztowy, a następnie wybierz przycisk Mapuj. Strona renderuje mapę z map Google:
Znajdź zestaw współrzędnych szerokości i długości geograficznej dla określonej lokalizacji.
Uruchom stronę MapCoordinates.cshtml. Wprowadź współrzędne, a następnie wybierz przycisk Mapuj. Strona renderuje mapę z Mapy Bing:

Uruchamianie aplikacji stron internetowych obok siebie

Strony sieci Web 2 umożliwiają równoległe uruchamianie aplikacji. Dzięki temu można nadal uruchamiać aplikacje stron sieci Web 1, tworzyć nowe aplikacje stron sieci Web 2 i uruchamiać wszystkie z nich na tym samym komputerze.

Poniżej przedstawiono kilka kwestii, które należy pamiętać podczas instalowania programu Web Pages 2 Beta za pomocą programu WebMatrix:

Domyślnie istniejące aplikacje stron sieci Web będą działać jako aplikacje w wersji 2 na komputerze. (Zestawy dla wersji 2 są instalowane w usłudze GAC i będą używane automatycznie).
Jeśli chcesz uruchomić witrynę przy użyciu stron sieci Web w wersji 1 (zamiast domyślnej, tak jak w poprzednim punkcie), możesz skonfigurować tę witrynę. Jeśli witryna nie ma jeszcze pliku web.config w katalogu głównym witryny, utwórz nowy plik i skopiuj do niego następujący kod XML, zastępując istniejącą zawartość. Jeśli witryna zawiera już plik web.config , dodaj <appSettings> element podobny do poniższego do <configuration> sekcji.
```
<?xml version="1.0"?>
<configuration>
<appSettings>
<add key="webPages:Version" value="1.0"/>
</appSettings>
</configuration>
```
"- Jeśli nie określisz wersji w pliku web.config , lokacja zostanie wdrożona jako lokacja w wersji 2. (Zestawy w wersji 2 są kopiowane do folderu bin w wdrożonej lokacji).
Nowe aplikacje tworzone przy użyciu szablonów witryn w macierzy sieci Web w wersji 2 Beta obejmują zestawy stron sieci Web w wersji 2 w folderze bin witryny.

Ogólnie rzecz biorąc, zawsze można kontrolować, która wersja stron sieci Web ma być używana z witryną przy użyciu narzędzia NuGet, aby zainstalować odpowiednie zestawy w folderze bin witryny. Aby znaleźć pakiety, odwiedź stronę NuGet.org.

Renderowanie stron dla urządzeń przenośnych

Strony sieci Web 2 umożliwiają tworzenie niestandardowych wyświetlaczy do renderowania zawartości na urządzeniach przenośnych lub innych urządzeniach.

System.Web.WebPages Przestrzeń nazw zawiera następujące klasy, które umożliwiają pracę z trybami wyświetlania: DefaultDisplayMode, DisplayInfoi DisplayModes. Możesz użyć tych klas bezpośrednio i napisać kod, który renderuje odpowiednie dane wyjściowe dla określonych urządzeń.

Alternatywnie można utworzyć strony specyficzne dla urządzenia przy użyciu wzorca nazewnictwa plików w następujący sposób: FileName.Mobile.cshtml. Można na przykład utworzyć dwie wersje strony o nazwie MyFile.cshtml i jedną o nazwie MyFile.Mobile.cshtml. W czasie wykonywania, gdy urządzenie przenośne żąda pliku MyFile.cshtml, strony sieci Web renderuje zawartość z pliku MyFile.Mobile.cshtml. W przeciwnym razie plik MyFile.cshtml jest renderowany.

W poniższym przykładzie pokazano, jak włączyć renderowanie mobilne przez dodanie strony zawartości dla urządzeń przenośnych. Page1.cshtml zawiera zawartość oraz pasek boczny nawigacji. Page1.Mobile.cshtml zawiera tę samą zawartość, ale pomija pasek boczny.

Aby skompilować i uruchomić przykładowy kod:

W witrynie stron sieci Web utwórz plik o nazwie Page1.cshtml i skopiuj do niego zawartość Page1.cshtml z przykładu.
Utwórz plik o nazwie Page1.Mobile.cshtml i skopiuj do niego zawartość Page1.Mobile.cshtml z przykładu. Zwróć uwagę, że wersja mobilna strony pomija sekcję nawigacji w celu lepszego renderowania na mniejszym ekranie.
Uruchom przeglądarkę klasyczną i przejdź do strony Page1.cshtml.
Uruchom przeglądarkę mobilną (lub emulator urządzenia przenośnego) i przejdź do strony Page1.cshtml. Zwróć uwagę, że tym razem strony sieci Web renderuje wersję mobilną strony.

Uwaga

Aby przetestować strony mobilne, możesz użyć symulatora urządzenia przenośnego działającego na komputerze stacjonarnym. To narzędzie pozwala przetestować strony internetowe tak, jak będą wyglądać na urządzeniach przenośnych (zazwyczaj z znacznie mniejszym obszarem wyświetlania). Jednym z przykładów symulatora jest dodatek przełącznika agenta użytkownika dla Mozilla Firefox, który umożliwia emulację różnych przeglądarek mobilnych z klasycznej wersji Firefox.

Page1.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>

Plik Page1.cshtml renderowany w przeglądarce klasycznej:

Page1.Mobile.cshtml wyświetlany w widoku symulatora apple iPhone w przeglądarce Firefox. Mimo że żądanie ma wartość Page1.cshtml, aplikacja renderuje plik Page1.Mobile.cshtml.

Dodatkowe zasoby

zasoby ASP.NET Web Pages 1

Uwaga

Większość zasobów programowania i interfejsu API stron sieci Web 1 nadal ma zastosowanie do stron sieci Web 2.

Wprowadzenie do programowania ASP.NET Stron internetowych

Zasoby programu WebMatrix

Witryna programu Microsoft WebMatrix
Rozpoczynanie tworzenia aplikacji internetowych za pomocą programu Microsoft WebMatrix (obejmuje aplikację web Pages o pełnej długości)

Udostępnij za pośrednictwem

Najważniejsze funkcje na stronach sieci Web ASP.NET 2

Instalowanie programu WebMatrix

Nowe i rozszerzone funkcje

Zmiany wersji RC (czerwiec 2012 r.)

Zmiany wersji beta (luty 2012 r.)

Korzystanie z nowych i zaktualizowanych szablonów witryn

Weryfikowanie danych wejściowych użytkownika

Rejestrowanie skryptów przy użyciu menedżera zasobów

Włączanie logowania z serwisu Facebook i innych witryn przy użyciu protokołu OAuth i OpenID

Jak włączyć logowania przy użyciu dostawców OAuth i OpenID

Dodawanie map przy użyciu pomocnika maps

Uruchamianie aplikacji stron internetowych obok siebie

Renderowanie stron dla urządzeń przenośnych

Dodatkowe zasoby

zasoby ASP.NET Web Pages 1

Zasoby programu WebMatrix

Opinia

Dodatkowe zasoby