Co nowego w platformie ASP.NET i w programowaniu dla Internetu w programie Visual Studio 2012

Autor: Web Camps Team

Nowa wersja programu Visual Studio wprowadza szereg ulepszeń skoncentrowanych na ulepszaniu środowiska i wydajności podczas pracy z technologiami internetowymi. Edytory Visual Studio dla CSS, JavaScript i HTML zostały całkowicie przebudowane, aby uwzględnić wiele najbardziej pożądanych funkcji, takich jak IntelliSense i automatyczne wcięcia. Jeśli chodzi o wydajność, łączenie i minimalizowanie są teraz zintegrowane jako wbudowane funkcje, aby łatwo skrócić czas ładowania strony.

Program Visual Studio umożliwia pracę z najnowszymi technologiami witryny internetowej. Możesz użyć fragmentów kodu CSS3 w wielu przeglądarkach, aby upewnić się, że witryna działa niezależnie od platformy klienta, a jednocześnie korzystać z nowych elementów i funkcji HTML5.

Pisanie i profilowanie kodu JavaScript powinno być łatwiejsze w przypadku tej wersji programu Visual Studio. Listy funkcji IntelliSense, zintegrowana dokumentacja XML i funkcje nawigacji są teraz dostępne dla kodu JavaScript. Teraz masz katalog JavaScript na wyciągnięcie ręki. Ponadto możesz sprawdzić zgodność ecMAScript5 ze skryptami i wykrywać błędy składni na wczesnym etapie.

Na koniec ta wersja programu Visual Studio implementuje wbudowane tworzenie pakietów i minimalizowanie. Pliki skryptów i arkusze stylów zostaną spakowane i skompresowane, dzięki czemu witryna będzie działać szybciej.

W tym laboratorium przedstawiono ulepszenia i nowe funkcje opisane wcześniej przez zastosowanie drobnych zmian w przykładowej aplikacji internetowej udostępnionej w folderze Source.

Cele

W tym praktycznym laboratorium dowiesz się, jak wykonywać następujące działania:

Korzystanie z nowych funkcji i ulepszeń w edytorze CSS
Korzystanie z nowych funkcji i ulepszeń w edytorze HTML
Korzystanie z nowych funkcji i ulepszeń w edytorze Języka JavaScript
Konfigurowanie i używanie grupowania i minimalizowania

Wymagania wstępne

Microsoft Visual Studio Express 2012 for Web lub superior (przeczytaj dodatek A , aby uzyskać instrukcje dotyczące sposobu jego instalowania).
Windows PowerShell (w przypadku skryptów instalacji — już zainstalowanych w systemach Windows 8 i Windows Server 2008 R2)
Internet Explorer 10 — lub zgodna przeglądarka HTML5

Ćwiczenia

To laboratorium praktyczne obejmuje następujące ćwiczenia:

Ćwiczenie 1. Co nowego w edytorze CSS
Ćwiczenie 2. Co nowego w edytorze HTML
Ćwiczenie 3. Co nowego w edytorze Języka JavaScript
Ćwiczenie 4. Pakietowanie i minifikacja

Szacowany czas ukończenia tego laboratorium: 60 minut.

Ćwiczenie 1. Co nowego w edytorze CSS

Deweloperzy sieci Web powinni zapoznać się z wieloma trudnościami związanymi z edytowaniem arkuszy CSS. Jednym z największych problemów ze stylem CSS jest zgodność między przeglądarkami. Często zdarza się, że po zastosowaniu stylów do witryny zauważysz, że wygląda inaczej, jeśli otworzysz go w innej przeglądarce lub urządzeniu. W związku z tym możesz poświęcić dużo czasu na naprawę tych problemów wizualnych, aby zdać sobie sprawę, że gdy w końcu będzie działać w jednej przeglądarce, pojawia się błąd w innych.

Program Visual Studio zawiera teraz funkcje, które ułatwiają deweloperom efektywne uzyskiwanie dostępu do arkuszy stylów CSS, pracę i organizowanie ich. W tym ćwiczeniu poznasz nowe funkcje efektywnej organizacji i edycji, a także fragmenty kodu CSS3 na potrzeby zgodności między przeglądarkami.

Zadanie 1 — nowe funkcje edytora

W tym zadaniu odkryjesz nowe funkcje edytora CSS. Ten nowy edytor pomoże zwiększyć produktywność dzięki wykorzystaniu nowego inteligentnego wcięcia, ulepszonych komentarzy kodu i rozszerzonej listy IntelliSense.

Uruchom program Visual Studio i otwórz rozwiązanie WhatsNewASPNET.sln znajdujące się w folderze Source\WhatsNewASPNET tego laboratorium.
W Eksplorator rozwiązań otwórz plik Site.css znajdujący się w folderze Style. Upewnij się, że narzędzia edytora tekstu są widoczne na pasku narzędzi. W tym celu wybierz opcję menu Wyświetl | paski narzędzi i zaznacz opcje Edytor tekstu. Zauważysz, że od czasu nowej wersji, przycisk Komentarz ( ) i przycisk Usuń komentarz ( ) są również dostępne dla edytora CSS.

Włączanie edytora i narzędzi CSS
Przewiń kod i wybierz dowolną definicję klasy CSS. Kliknij przycisk Komentarz ( ), aby skomentować wybrane wiersze. Następnie kliknij przycisk Usuń komentarz ( ), aby cofnąć zmiany.
Kliknij przycisk Zwiń () i Rozwiń () znajdujący się na lewym marginesie tekstu. Zwróć uwagę, że teraz możesz ukryć style, których nie używasz do wyświetlania czystszego widoku.

Zwijanie klas CSS
Upewnij się, że funkcja inteligentnego wcięcia jest włączona. Wybierz opcję menu Narzędzia | Opcje, a następnie wybierz na stronie Edytor tekstu | CSS | Formatowanie w lewym panelu ekranu. Zaznacz opcję Wcięcie hierarchiczne.

Włączanie wcięcia hierarchicznego
Znajdź definicję klasy głównej (.main) i dołącz styl do elementów div. Zauważysz, że kod jest wyrównywany automatycznie, co ułatwia użytkownikom natychmiastowe znajdowanie klas nadrzędnych.

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
Wyrównanie hierarchiczne w CSS
Wewnątrz .main div klasy, znajdź kursor na końcu border: 0px; a następnie naciśnij Enter, aby wyświetlić listę funkcji IntelliSense. Zacznij wpisywać na początku i zwróć uwagę, jak lista jest filtrowana podczas wpisywania. Na liście zostaną wyświetlone elementy zawierające górną część słowa (w poprzednich wersjach programu Visual Studio lista jest filtrowana według elementów rozpoczynających się od terminu).

Ulepszenia funkcji IntelliSense w arkuszach CSS

Zadanie 2 — selektor kolorów

W tym zadaniu odnajdziesz nowy selektor kolorów CSS zintegrowany z funkcją IntelliSense programu Visual Studio.

W Site.css znajdź definicję klasy nagłówka (.header) i umieść kursor obok atrybutu kolor tła między znakami ":" i "#" w tym wierszu kodu .

Lokalizowanie kursora
Usuń dwukropek (:) i zapisz go ponownie, aby wyświetlić selektor kolorów. Zwróć uwagę, że pierwsze widoczne kolory to najczęściej używane kolory witryny. Jeśli klikniesz biały kolor, jego kod koloru HTML (#fff) zastąpi bieżący kod koloru w arkuszu stylów.

Selektor kolorów
Naciśnij przycisk Rozwiń ( ) na selektorze kolorów, aby wyświetlić gradient kolorów, a następnie przeciągnij kursor gradientu, aby wybrać inny kolor. Następnie kliknij przycisk Eyedropper i wybierz dowolny kolor na ekranie. Zwróć uwagę, że wartość koloru tła zmienia się dynamicznie podczas przenoszenia kursora.

Gradient selektora kolorów
W suwaku Nieprzezroczystość przesuń selektor do środka paska, aby zmniejszyć nieprzezroczystość. Zwróć uwagę, że wartość koloru tła zmienia teraz skalę na RGBA.

Nieprzezroczystość selektora kolorów

Uwaga

Definicja koloru RGBA (Czerwony, Zielony, Niebieski, Alfa) w css3 umożliwia zdefiniowanie wartości nieprzezroczystości koloru dla pojedynczego elementu. W przeciwieństwie do nieprzezroczystości — podobne kolory RGBA atrybutu - CSS są również zgodne z najnowszymi przeglądarkami.

Zadanie 3 — fragmenty kodu zgodne z css

W tym zadaniu dowiesz się, jak używać fragmentów kodu CSS3 zgodnego z przeglądarką w celu zaimplementowania niektórych funkcji w witrynie internetowej.

W pliku Site.css znajdź definicję klasy CSS nagłówka (.header) i umieść kursor poniżej /*border radius*/ symbol zastępczy, aby dodać nowy fragment kodu. Naciśnij Enter, aby wyświetlić listę IntelliSense i wpisz radius, aby filtrować listę. Wybierz opcję border-radius z listy, dwukrotnie klikając, a następnie naciśnij klawisz TAB, aby wstawić fragment kodu. Następnie wpisz rozmiar promienia w pikselach i naciśnij Enter. Na przykład wpisz 15 pikseli.

Atrybuty CSS3 dodane przez fragment kodu będą renderować zaokrąglone obramowania w większości przeglądarek zgodnych z HTML5, w tym w przeglądarkach WebKit i Mozilla.

Używanie fragmentu border-radius

Zastosuj te same fragmenty kodu obramowania w stylu strony (.page).

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

Naciśnij F5 , aby uruchomić rozwiązanie. Zwróć uwagę, że każda strona ma teraz zaokrąglone obramowania.

Zaokrąglone rogi
Zamknij przeglądarkę i wróć do programu Visual Studio.
Otwórz plik Custom.css znajdujący się w folderze Styles i umieść kursor wewnątrz definicji klasy div.images ul li img.
Naciśnij Enter, aby wyświetlić listę funkcji IntelliSense, wpisz box-shadow i naciśnij TAB dwukrotnie, aby wstawić domyślny fragment kodu wewnątrz definicji klasy. Ustaw wartości cienia na 10px 10px 5px #888. Następnie wpisz promień obramowania i wstaw fragment kodu. Wpisz 15 pikseli , aby ustawić rozmiar promienia i naciśnij ENTER.

Zaokrąglone rogi z cieniem

Uwaga

W tej chwili atrybut cienia jest wstawiany z odpowiednim prefiksem (moz, webkit, o) do obsługi przeglądarek Mozilla i Webkit (Chrome, Safari, Konkeror).
Utwórz nową klasę div.images ul li img:hover poniżej definicji klasy div.images ul li img i umieść kursor w nawiasach kwadratowych .

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

Wpisz przekształcenie i naciśnij dwukrotnie TAB , aby wstawić fragment przekształcenia. Następnie wprowadź rotate(-15deg), aby zmienić kąt obrotu, gdy wskaźnik myszy znajduje się na obrazach.

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Naciśnij F5 , aby uruchomić rozwiązanie i przejść do strony CSS3. Zwróć uwagę, że obrazy mają zaokrąglone rogi i cienie ramek. Umieść kursor myszy na obrazach i obserwuj ich obracanie.

Przekształć wycinek kodu obracający obraz

Uwaga

Jeśli używasz programu Internet Explorer 10 i nie widzisz cieni, upewnij się, że tryb dokumentu jest ustawiony na standardy IE10. Naciśnij F12, aby otworzyć narzędzia deweloperskie programu Internet Explorer, a następnie kliknij opcję Tryb dokumentu, aby zmienić standardy programu IE10.

Ćwiczenie 2. Co nowego w edytorze HTML

Program Visual Studio ma ulepszony edytor HTML. Niektóre ulepszenia zawarte w tej wersji to inteligentne wcięcia w dokumentach HTML, fragmentach kodu HTML5, dopasowywaniu tagów startowych i końcowych HTML oraz sprawdzaniu poprawności kodu HTML. Podczas tego ćwiczenia zobaczysz, jak te zmiany poprawiają twoje umiejętności podczas pracy z kodem strony internetowej.

Podobnie jak edytor CSS, ulepszono również edytor HTML. Większość tych ulepszeń to małe, które ułatwiają życie deweloperów sieci Web. Niektóre z tych ulepszeń są takie jak więcej fragmentów kodu dla kodu HTML5, inteligentne wcięcia, dopasowywanie tagów początkowych i końcowych podczas edytowania i walidacji przeznaczonych dla dokumentu HTML DOCTYPE.

Zadanie 1 — ulepszona weryfikacja typu DOCTYPE

Edytor HTML ma teraz możliwość sprawdzenia typu DOCTYPE strony, mimo że definicja może znajdować się na stronie wzorcowej. W zależności od typu DOCTYPE strony, edytor HTML zweryfikuje poprawność według odpowiedniego zestawu reguł i przefiltruje listę IntelliSense, uwzględniając elementy DOCTYPE.

W tym zadaniu zmienisz typ DOCTYPE strony, aby zobaczyć, jak zmienia się zachowanie edytora HTML.

Jeśli jeszcze nie otwarto, uruchom program Visual Studio i otwórz rozwiązanie WhatsNewASPNET.sln znajdujące się w folderze Source\WhatsNewASPNET tego laboratorium.
Otwórz stronę Site.Master.
Zwróć uwagę na pasek narzędzi "Docelowy schemat dla weryfikacji". Sposób działania edytora HTML (Walidacja, IntelliSense itp.) zostanie prawidłowo zmieniony tak, aby pasował do wybranego dokumentu.

Używanie Doctype na pasku narzędziowym do edycji kodu źródłowego HTML
Zmień schemat docelowy na HTML 4.01.

Zmienianie typu dokumentu na pasku narzędzi do edycji źródła HTML
Umieść kursor pod elementem treści i zacznij wpisywać nazwę elementu HTML5 (na przykład wideo). Zwróć uwagę, że element nie jest dostępny na liście IntelliSense.

Elementy HTML5, których nie ma na liście
Cofnij zmiany w Schemacie docelowym dla weryfikacji, wybierając z listy rozwijanej opcję DOCTYPE: XHTML5.

Resetuj typ dokumentu na pasku narzędzi do edycji źródła HTML
Umieść kursor pod elementem treści i ponownie zacznij wpisywać element HTML5 (na przykład wideo). Zwróć uwagę, że elementy HTML5 są teraz dostępne na liście IntelliSense.

Elementy HTML5, które są wyświetlane

Zadanie 2 — automatyczna aktualizacja tagów rozpoczęcia/zakończenia

Program Visual Studio aktualizuje teraz tagi otwierania lub zamykania html edytowanego elementu, aby dopasować je do siebie. Ta nowa funkcja poprawi produktywność podczas edytowania tagów HTML.

Na stronie Default.aspx dodaj element H3 o tytule (na przykład Visual Studio 2012 Rocks!).

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

Zmień tag H3 i wpisz H2 lub H1.

Zwróć uwagę, że tag końcowy jest automatycznie aktualizowany. Możesz również zmodyfikować tag końcowy, aby zobaczyć, że tag początkowy aktualizuje się odpowiednio.

Automatyczna aktualizacja tagu końcowego

Zadanie 3 — nowe fragmenty kodu HTML5

Program Visual Studio zawiera teraz kilka fragmentów kodu HTML5. W tym zadaniu użyjesz niektórych z tych fragmentów kodu.

Dodaj nowy folder o nazwie audio do katalogu głównego folderu witryny sieci Web. Otwórz Eksploratora Windows i skopiuj dowolny plik audio do folderu audio rozwiązania WhatsNewASPNET.sln.
Na stronie Default.aspx znajdź kursor w obszarze Web11 Rocks!! Nagłówek. Wpisz dźwięk i naciśnij TAB.

Nowy edytor HTML zawiera fragmenty kodu dla zawartości HTML5. Pamiętaj, aby użyć odpowiedniej definicji DOCTYPE, aby włączyć fragmenty kodu HTML5.

Wstawianie fragmentów kodu HTML5

Zaktualizuj źródło audio, aby wskazywało istniejący plik audio.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

Uwaga

Musisz dodać plik audio do rozwiązania.

Naciśnij F5 , aby uruchomić witrynę i odtworzyć dźwięk.

Uruchamianie kontrolki dźwięku

Uwaga

Możesz również wypróbować więcej fragmentów kodu zawartych w programie Visual Studio, takich jak wideo, rysunek itp.
Teraz spróbuj wstawić kontrolkę w jakiejś części strony. Na przykład spróbuj wstawić kontrolkę GridView, ale zamiast wpisywać< polecenie Gri, zacznij wpisywać GV<. Zwróć uwagę, że na liście funkcji IntelliSense jest wyświetlana kontrolka asp:GridView .

Funkcja IntelliSense w edytorze HTML udostępnia teraz wyszukiwanie z użyciem wielkich liter oraz częściowe dopasowanie (znajdowanie wszystkich elementów zawierających ten termin).

Wstawianie GridView za pomocą list IntelliSense

Jeśli wpiszesz <grid, uzyskasz wszystkie elementy zgodne z tym terminem, ale program Visual Studio zaproponuje kontrolkę GridView.

Wstawianie GridView z listami IntelliSense i częściowym dopasowywaniem

Zadanie 4 . Tagi inteligentne edytora HTML

Kolejną poprawą edytora HTML jest funkcja tagów inteligentnych. Tagi inteligentne ułatwiają wykonywanie typowych lub powtarzających się zadań programistycznych na podstawie kontroli. Ta funkcja była już dostępna w projektancie HTML, ale nie w edytorze HTML.

Otwórz plik Site.Master i znajdź element asp:Menu . Umieść kursor na tagu początkowym i zwróć uwagę na małą ikonkę wyświetlaną w dolnej części elementu. Kliknij ją, aby otworzyć menu zadań inteligentnych. Zwróć uwagę, że masz szybki dostęp do niektórych zadań związanych z kontrolką Menu.

Inteligentne zadania dla kontrolki Menu

Zadanie 5 — inteligentne wcięcie

Jedną z najlepszych rozwiązań w języku HTML jest wcięcie zagnieżdżonych elementów w celu zachowania czytelności kodu. W programie Visual Studio 2012 zauważysz, że edytor automatycznie wcina elementy, gdy piszesz kod.

Uwaga

W poprzedniej wersji programu Visual Studio inteligentne wcięcia były dostępne w edytorze XML, ale nie w edytorze HTML.

Upewnij się, że ustawienie wcięcia edytora HTML jest ustawione na inteligentne wcięcie. W tym celu wybierz pozycję Narzędzia | Opcje, a następnie wybierz Edytor tekstu | HTML | Zakładki w lewym okienku ekranu. Wybierz opcję Inteligentne wcięcie.

Ustawienia edytora HTML
Na stronie Default.aspx usuń całą zawartość w elemecie audio.
Umieść kursor na końcu otwierającego elementu audio i naciśnij ENTER.

Zwróć uwagę, że nowa pozycja kursora ma dodatkowy poziom wcięcia.

Inteligentne wcięcie w edytorze HTML
Przywróć tag audio z usuniętą zawartością lub zamknij Default.aspx bez zapisywania zmian.

Zadanie 6: Wyodrębnianie do kontroli użytkownika

Narzędzia refaktoryzacji zawarte w programie Visual Studio, takie jak wyodrębnianie części kodu do funkcji, są doskonałymi funkcjami, które ułatwiają ulepszanie i refaktoryzację istniejącego kodu. Odpowiednikiem dla stron ASP.NET jest wyodrębnianie kodu HTML do kontrolki użytkownika. Ręczne wykonanie tego zadania wymaga kilku kroków, takich jak utworzenie nowej kontrolki użytkownika, przeniesienie sekcji kodu do tej kontrolki, zarejestrowanie prefiksu tagu dla kontrolki użytkownika, a na koniec utworzenie instancji kontrolki użytkownika na stronach. Teraz nowe narzędzie Wyodrębnij do kontrolki użytkownika automatycznie wykonuje wszystkie te kroki.

W tym zadaniu użyjesz nowej operacji kontekstowej "Wyodrębnij do kontrolki użytkownika", aby z wybranego kodu wygenerować nową kontrolkę użytkownika.

Na stronie Default.aspx wybierz elementy H2 i audio.
Kliknij prawym przyciskiem myszy i wybierz Wyodrębnij do kontrolki użytkownika.

Opcja menu Wyodrębnij do kontrolki użytkownika
Wpisz nazwę nowej kontrolki użytkownika. Na przykład Jukebox.ascx, a następnie kliknij przycisk OK.

Zapisywanie wyodrębnionej kontrolki użytkownika
Zwróć uwagę, że wybrany kod został wyodrębniony do elementu sterującego użytkownika, a oryginalna lokalizacja wybranego kodu została zastąpiona instancją nowego elementu sterującego użytkownika.

Strona jest automatycznie aktualizowana w celu używania nowej kontrolki użytkownika
Naciśnij F5 , aby uruchomić stronę i sprawdzić, czy kontrolka działa.

Ćwiczenie 3. Co nowego w edytorze Języka JavaScript

Pisanie lub edytowanie kodu JavaScript nie jest łatwym zadaniem, zwłaszcza gdy aplikacja zaczyna rosnąć i zajmujesz się długimi plikami i setkami funkcji. Deweloperzy skryptów zwykle muszą wykonać dodatkową pracę, aby zachować czytelność kodu i nawigować po plikach. Dzięki włączeniu bibliotek Języka JavaScript, takich jak jQuery, nawigacja po skryptach stała się wyzwaniem ze względu na długość kodu.

Program Visual Studio odnowił edytor JavaScript z obietnicą udostępnienia i zorganizowania trybu kodu. Wiele funkcji programu Visual Studio, które już istniały w edytorze języka C# lub VB, są teraz implementowane w edytorze Języka JavaScript: Przejdź do definicji, automatyczne wcięcia, dokumentacja i walidacja podczas pisania. Po odnowionej liście funkcji IntelliSense będziesz mieć katalog funkcji JavaScript na wyciągnięcie ręki.

W tym ćwiczeniu poznasz niektóre nowe funkcje i ulepszenia edytora języka JavaScript. Przejrzyj przykładowe pliki i odkryjesz każdą nową charakterystykę, która sprawi, że programowanie w języku JavaScript będzie bardziej wydajne w programie Visual Studio 2012.

Zadanie 1 . Nowe funkcje edytora Języka JavaScript

To zadanie zawiera wprowadzenie do niektórych nowych funkcji edytora JavaScript, które koncentrują się na organizowaniu kodu i zapewnianiu lepszego środowiska użytkownika.

Jeśli jeszcze nie otwarto, uruchom program Visual Studio i otwórz rozwiązanie WhatsNewASPNET.sln znajdujące się w folderze Source\WhatsNewASPNET tego laboratorium.
Naciśnij F5 , aby uruchomić aplikację, a następnie kliknij link JavaScript na pasku nawigacyjnym. Odśwież stronę kilka razy i sprawdź, jak zwiększa się licznik.

Licznik stron
Zamknij przeglądarkę i wróć do programu Visual Studio.
Otwórz stronę JavaScript.aspx i znajdź blok skryptu<> (pokazany poniżej).

Poniższy kod używa magazynu lokalnego HTML5 do przechowywania zmiennej pageLoadCount , która przechowuje liczbę wizyt strony przez bieżącego użytkownika. Local Storage to baza danych klucz-wartość po stronie klienta, wprowadzona w standardzie HTML5. Dane są zapisywane na komputerze lokalnym w przeglądarce użytkownika.
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
Uwaga

Przed kontynuowaniem następnych kroków upewnij się, że parametr DOCTYPE jest ustawiony na XHTML5.
Zmodyfikuj kod i zwróć uwagę, że funkcja IntelliSense dla języka JavaScript obejmuje funkcje HTML5, takie jak magazyn lokalny i ich metody wewnętrzne.

Funkcje języka JavaScript HTML5 w języku JavaScript
Kliknij dowolny nawias otwierający ({) z kodu skryptowego i zwróć uwagę, że nawiasy są wyróżnione.

Nawiasy są wyróżnione
Usuń komentarz z funkcji testAutoAlign() (zaznacz trzy wiersze i możesz użyć kombinacji CTRL + K; CTRL + U) i znajdź kursor wewnątrz kodu funkcji. Naciśnij Enter, aby dołączyć drugi wiersz. Zwróć uwagę, że kod jest teraz wyrównany i automatycznie wcięty.

Kod JavaScript jest automatycznie wyrównany

Zadanie 2 . Weryfikowanie języka JavaScript

W tym zadaniu zostanie odkryta nowa walidacja języka JavaScript dla standardu ECMAScript5. Ta funkcja pomoże Ci napisać zgodny kod JavaScript, zapobiegając jednocześnie problemom ze skryptami przed wdrożeniem witryny.

Uwaga

Program Visual Studio 2010 zaimplementował zgodność ECMAStript3, podczas gdy program Visual Studio 2012 zapewnia zgodność z programem ECMAScript5.

Otwórz ECMA5script5.js znajdujący się w folderze Scripts\custom project. Teraz przetestujesz walidację dla standardu ECMAScript5.
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
Możesz sprawdzić dyrektywę " use strict " w pierwszym wierszu pliku, który umożliwia tryb ścisły ECMAScript 5. Ten tryb składa się z podzbioru języka, który wyjaśnia niejednoznaczności z poprzedniej edycji i dodaje kilka nowych funkcji, takich jak metody pobierające i ustawiające, obsługa bibliotek dla formatu JSON i bardziej pełne odbicie właściwości obiektu.
Otwórz listę błędów, jeśli nie została jeszcze otwarta (menu Widok | Lista błędów). Zwróć uwagę, że deklaracja funkcji jest podkreślona. Dzieje się tak, ponieważ w standardzie ECMA5 funkcji nie można zagnieżdżać wewnątrz struktur językowych. Na poniższej liście błędów zostaną wyświetlone szczegóły ostrzeżenia.

Komunikat o błędzie walidacji języka JavaScript
Zakomenduj dyrektywę "use strict" i zwróć uwagę, że błędy znikają, ale ostrzeżenia pozostają.
W ostatnim wierszu pliku napisz dowolny ciąg, taki jak "test" (dołącz znaki cudzysłowu, aby wskazać, że jest to ciąg). Wstaw kropkę obok ciągu znaków, aby wyświetlić listę IntelliSense, a następnie wybierz opcję trim.

W standardzie ECMAScript5 wartości ciągów i zmienne mają również zdefiniowane metody ciągów, takie jak trim, wielkie litery, wyszukiwanie i zastępowanie.

Lista IntelliSense w języku JavaScript

Zadanie 3 — dokumentacja XML dla języka JavaScript

W tym zadaniu zapoznasz się z funkcjami programu Visual Studio dla dokumentacji XML w języku JavaScript. Zostanie wyświetlona lista funkcji IntelliSense języka JavaScript zawierająca teraz dokumentację XML każdej funkcji. Ponadto odnajdziesz funkcję nawigacji w języku JavaScript.

Otwórz plik XMLDoc.js znajdujący się w folderze Skrypty/projekt niestandardowy . Ten plik zawiera dokumentację XML dla każdej funkcji języka JavaScript.

Dokumentacja xml języka JavaScript zintegrowana z funkcją IntelliSense
Poniżej funkcji add w pliku XMLDoc.js utwórz nową funkcję o nazwie test.
W funkcji testowej wywołaj funkcję mnożenia, która odbiera dwa parametry. Zwróć uwagę, że w polu etykietki narzędzia jest wyświetlana dokumentacja funkcji mnożenia .
```
function test() {
  multiply(
}
```
Dokumentacja XML dla funkcji Języka JavaScript
Dokończ wyrażenie wywołania funkcji i wpisz kropkę, aby otworzyć listę IntelliSense na zwróconej wartości. Zwróć uwagę, że program Visual Studio wykrywa wartość zwracaną w dokumentacji, traktując wartość jako liczbę.

Dokumentacja XML dla typów zwracanych
Teraz wstaw wywołanie w celu dodania funkcji. Zwróć uwagę, że edytor Języka JavaScript obsługuje teraz przeciążenia funkcji. Podczas pisania nazwy funkcji będzie można wybrać dowolne z dostępnych przeciążeń określonych w dokumentacji.

Dokumentacja XML dotycząca przeciążeń
Otwórz plik GotoDefinition.js i znajdź wywołanie funkcji $().html(). Znajdź kursor w kodzie HTML.
Naciśnij F12 i przejdź do definicji. Zwróć uwagę, że możesz teraz uzyskiwać dostęp do kodu JavaScript i przeglądać go bez użycia narzędzia Znajdź .
Umieść kursor przy instrukcji jQuery przed blokiem podpisu na dole pliku kodu. Naciśnij F12. Przejdziesz do pliku biblioteki jQuery. Zwróć uwagę, że możesz również nawigować po plikach jQuery przy użyciu F12.

Przechodzenie do definicji jQuery

Uwaga

Przed zapisaniem pliku upewnij się, że GotoDefinition.js nie ma błędów składniowych.

Ćwiczenie 4. Bundling i minification

Ile razy witryny internetowe zawierają więcej niż jeden plik JavaScript lub CSS? Jest to bardzo typowy scenariusz, w którym tworzenie pakietów i minimalizowanie może pomóc zmniejszyć rozmiar pliku i przyspieszyć działanie witryny. Nowa funkcja tworzenia pakietów w ASP.NET 4.5 pakuje zestaw plików JS lub CSS w jeden element i zmniejsza jego rozmiar przez minimalizowanie zawartości (tj. usuwanie nie wymaganych pustych spacji, usuwanie komentarzy, zmniejszanie identyfikatorów).

Pakietowanie i minifikacja w ASP.NET 4.5 są wykonywane w trakcie działania, dzięki czemu proces może zidentyfikować agenta użytkownika (na przykład IE, Mozilla itp.) i tym samym poprawić kompresję, dostosowując do przeglądarki użytkownika (na przykład usuwając elementy specyficzne dla Mozilla, gdy żądanie pochodzi z IE).

W tym ćwiczeniu dowiesz się, jak włączyć i używać różnych typów tworzenia pakietów i minification w ASP.NET 4.5.

Zadanie 1 - Instalowanie pakietu grupowania i minifikacji z NuGet

Jeśli jeszcze nie otwarto, uruchom program Visual Studio i otwórz rozwiązanie WhatsNewASPNET.sln znajdujące się w folderze Source\WhatsNewASPNET tego laboratorium.
Otwórz konsolę Menedżer pakietów NuGet. Aby to zrobić, użyj menu Widok | Inne okna | Konsola Menedżera pakietów.

Otwieranie konsoli menedżera pakietów
W konsoli Menedżer pakietów wpisz Install-Package Microsoft.Web.Optimization i naciśnij ENTER.

Zadanie 2 — pakiety domyślne

Najprostszym sposobem korzystania z tworzenia pakietów i minification jest włączenie domyślnych pakietów. Ta metoda używa konwencji, aby umożliwić odwołowanie się do powiązanej i minyfikowanej wersji plików JS i CSS w folderze.

W tym zadaniu dowiesz się, jak włączyć oraz odwołać się do zgrupowanych i zminimalizowanych plików JS i CSS oraz zobaczyć wynikowy rezultat.

Jeśli jeszcze nie otwarto, uruchom program Visual Studio i otwórz rozwiązanie WhatsNewASPNET.sln znajdujące się w folderze Source\WhatsNewASPNET tego laboratorium.
W Eksploratorze rozwiązań rozwiń Style, Scripts\custom i Scripts\bundle.

Zwróć uwagę, że aplikacja używa więcej niż jednego pliku CSS i JS.

Wiele arkuszy stylów i plików JavaScript w aplikacji
Otwórz plik Global.asax.cs.

Zwróć uwagę, że nowa przestrzeń nazw Microsoft.Web.Optimization jest zakomentowana na początku pliku. Odkomentuj dyrektywę using, aby uwzględnić funkcje tworzenia pakietów i minimalizacji.
```
using System;
using Microsoft.Web.Optimization;
```
Znajdź metodę Application_Start .

W tej metodzie usuń komentarz z wywołania EnableDefaultBundles, jak pokazano w poniższym fragmencie kodu. Dzięki temu można odwoływać się do połączonej kolekcji plików CSS w folderze przy użyciu ścieżki do tego folderu oraz sufiksu "CSS" lub "JS".
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}
```
Otwórz plik Optimization.aspx i znajdź kontrolkę zawartości HeadContent.

Zwróć uwagę, że pliki CSS i JS mają jeden odwoływany znacznik.
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
Uwaga

Ten kod jest przeznaczony do celów demonstracyjnych. Najlepiej, aby odwoływać się do pakietów w pliku Site.Master. W tym przykładowym kodzie dowiesz się, że niektóre z dołączonych plików są również przywoływane przez plik Site.Master, co spowoduje, że to ostatnie odwołanie jest nadmiarowe.
Zwróć uwagę, że linki używają konwencji tworzenia pakietów w atrybucie href , aby pobrać wszystkie pliki CSS lub JS z folderu Styles i Scripts\custom odpowiednio.

Możesz użyć ścieżki Scripts/custom/JS , jak pokazano poniżej, aby powiązać i zminimalizować wszystkie pliki JS wewnątrz folderu Scripts/custom . Jest to domyślne zachowanie przy domyślnych pakietach.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
Otwórz plik Styles\Site.css.

Zwróć uwagę, że oryginalny plik CSS zawiera wcięty kod, puste spacje i komentarze powiększające plik. (Ponadto plik JavaScript zawiera puste spacje i komentarze).

Jeden z oryginalnych plików CSS w folderze Scripts
Naciśnij F5 , aby uruchomić aplikację i przejść do strony Optymalizacja .
Kliknij link Pakiet CSS, aby pobrać i otworzyć plik.

Sprawdź zminimalizowany i zgrupowany plik. Zauważysz, że wszystkie puste spacje, komentarze i znaki wcięcia zostały usunięte, generując mniejszy plik.

Pliki CSS w pakiecie
Teraz kliknij link Pakiet JS, aby otworzyć plik spakowany JavaScript. Możesz bezpiecznie zignorować ostrzeżenie eksploratora. Zwróć uwagę, że pliki JavaScript w folderze niestandardowym również są powiązane i są zminimalizowane.

Zgrupowane pliki JavaScript

Włączenie kompresji plików CSS lub JS było znacznie bardziej skomplikowane w poprzedniej wersji ASP.NET. Teraz, jak już wiesz, wystarczy dodać jeden wiersz w pliku Global.asax , aby włączyć tworzenie pakietów, a następnie odwołać się do plików dołączonych z witryny.

Zadanie 3 — pakiety statyczne

Podejście do pakietu statycznego umożliwia dostosowanie zestawu plików do pakietowania, referencji oraz metody minifikacji, która będzie używana.

W tym zadaniu skonfigurujesz pakiet statyczny, aby zdefiniować określony zestaw plików na potrzeby tworzenia pakietów i minimalizowania.

Zamknij okno przeglądarki.
Otwórz plik Global.asax.cs i znajdź metodę Application_Start.

Usuń komentarz ze statycznego kodu pakietu, jak pokazano w poniższym kodzie.

Definiujesz pakiet statyczny, do którego będzie się odwoływać ścieżka wirtualna "~/StaticBundle", i użyj narzędzia JsMinify w celu zminimalizowania wszystkich określonych plików za pomocą metody AddFile. Na koniec dodajesz pakiet statyczny do tabeli BundleTable i włączasz go.

Zwróć uwagę, że pliki nie znajdują się w tym samym miejscu; jest to kolejna przewaga nad domyślnym tworzeniem pakietów.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

Otwórz plik Optimization.aspx.

Zwróć uwagę, że link do statycznego pakietu JS używa ścieżki, którą zadeklarowałeś podczas konfigurowania tego pakietu w pliku Global.asax.cs: /StaticBundle.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Naciśnij F5 , aby uruchomić aplikację, a następnie przejdź do strony Optymalizacja .
Kliknij link Statyczny pakiet JS, aby otworzyć plik.

Zwróć uwagę, że zminimalizowany i zgrupowany plik JavaScript jest wynikiem dla wszystkich plików JavaScript skonfigurowanych w pliku statycznego pakietu pod ścieżką "/StaticBundle".

Pakiet statycznych plików JavaScript
Zamknij przeglądarkę i wróć do programu Visual Studio.

Zadanie 4 — pakiety folderów dynamicznych

W tym zadaniu dowiesz się, jak skonfigurować pakiety folderów dynamicznych. Moc dynamicznego pakietowania polega na tym, że można uwzględnić statyczny kod JavaScript, a także inne pliki w językach kompilowanych do JavaScript, co wymaga pewnego przetwarzania przed rozpoczęciem pakietowania.

W tym przykładzie dowiesz się, jak za pomocą klasy DynamicFolderBundle utworzyć pakiet dynamiczny dla plików napisanych w języku CofeeScript. CofeeScript to język programowania, który kompiluje się w języku JavaScript i udostępnia prostszą składnię do pisania kodu JavaScript, zwiększając zwięzłość i czytelność języka JavaScript.

Otwórz plik Global.asax.cs i znajdź metodę Application_Start.

Usuń komentarz z dynamicznego kodu pakietu, jak pokazano w poniższym kodzie.

Definiujesz pakiet folderów dynamicznych, który będzie używać niestandardowego procesora minyfikacji CoffeeMinify , który będzie dotyczyć tylko plików z rozszerzeniem ".coffee" (pliki CoffeeScript). Zwróć uwagę, że możesz użyć wzorca wyszukiwania, aby wybrać pliki do zgrupowania wewnątrz folderu, na przykład "*.coffee".

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

Otwórz konsolę Menedżer pakietów NuGet. Aby to zrobić, użyj menu Widok | Inne okna | Konsola Menedżera pakietów.
W konsoli Menedżer pakietów wpisz Install-Package CoffeeSharp i naciśnij ENTER.
Kliknij przycisk Pokaż wszystkie pliki w oknie Eksplorator rozwiązań

Pokazywanie wszystkich plików
Kliknij prawym przyciskiem myszy plik CoffeeMinify.cs w Eksplorator rozwiązań i wybierz pozycję Uwzględnij w projekcie

Uwzględnij plik CoffeeMinify.cs w projekcie
Otwórz plik CoffeeMinify.cs.

Ta klasa dziedziczy po JsMinify, aby zminimalizować wynikowy kod JavaScript pochodzący z kompilacji kodu CoffeeScript. Wywołuje kompilator CoffeeScript, aby najpierw wygenerować kod JavaScript, a następnie wysyła go do metody JsMinify.Process, aby zmifikować wynikowy kod.
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
Otwórz pliki Script1.coffee i Script2.coffee z folderu Scripts/bundle.

Te pliki będą zawierać kod CoffeScript, który ma zostać skompilowany podczas tworzenia pakietów za pomocą klasy CoffeeMinify.

Dla uproszczenia udostępnione pliki CoffeeScript zawierają tylko przykładowy kod CoffeeScript. Komentarze są wykluczone przez proces JsMinify.

Pliki CoffeeScript

Uwaga

Język CofeeScript udostępnia prostszą składnię pisania kodu JavaScript, zwiększając zwięzłość i czytelność języka JavaScript, a także dodając inne funkcje, takie jak zrozumienie tablicy i dopasowywanie wzorców.

Otwórz plik Optimization.aspx i znajdź linki pakietu.

Proszę zauważyć, że link do Dynamicznego pakietu JS odwołuje się do folderu Scripts/bundle przy użyciu sufiksu /Coffee, który skonfigurowano dla pakietu folderu dynamicznego.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Naciśnij F5 , aby uruchomić aplikację, a następnie przejdź do strony Optymalizacja .
Kliknij link Dynamiczny pakiet JavaScript aby otworzyć wygenerowany plik.

Zwróć uwagę, że zawartość, która została uwzględniona w tym pakiecie, zawiera tylko pliki .coffee . Widać również, że kod CoffeeScript został skompilowany w języku JavaScript, a wiersze z komentarzami zostały usunięte.

Pakiet dynamicznych plików JS

Uwaga

Ponadto tę aplikację można wdrożyć w witrynach sieci Web platformy Windows Azure zgodnie z dodatkiem B: Publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy.

Podsumowanie

Ćwiczenie laboratoryjne pomaga zrozumieć, co nowego w ASP.NET i tworzeniu aplikacji internetowych w Visual Studio 2012 oraz jak korzystać z różnorodnych ulepszeń dostępnych w Visual Studio 2012.

Po ukończeniu tego laboratorium praktycznego dowiesz się, jak używać nowych funkcji i ulepszeń w edytorach visual Studio 2012 dla arkuszy CSS, JavaScript i HTML. Ponadto dowiesz się, jak program Visual Studio 2012 implementuje wbudowane tworzenie pakietów i minimalizowanie.

Dodatek A: Instalowanie programu Visual Studio Express 2012 dla sieci Web

Program Microsoft Visual Studio Express 2012 dla sieci Web lub innej wersji "Express" można zainstalować przy użyciu Instalator platformy Microsoft Web. Poniższe instrukcje zawierają instrukcje wymagane do zainstalowania programu Visual Studio Express 2012 for Web przy użyciu Instalator platformy Microsoft Web.

Przejdź do strony [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Alternatywnie, jeśli masz już zainstalowany Instalator platformy internetowej, możesz go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" (Program Visual Studio Express 2012 for Web with Windows Azure SDK).
Kliknij pozycję Zainstaluj teraz. Jeśli nie masz Instalatora platformy internetowej, nastąpi przekierowanie do pobrania i zainstalowania go najpierw.
Po otwarciu Instalatora platformy internetowej kliknij przycisk Zainstaluj , aby rozpocząć instalację.

Instalowanie programu Visual Studio Express
Przeczytaj wszystkie licencje i postanowienia dotyczące produktów, a następnie kliknij pozycję Akceptuję , aby kontynuować.

Akceptowanie postanowień licencyjnych
Poczekaj na zakończenie procesu pobierania i instalacji.

Postęp instalacji
Po zakończeniu instalacji kliknij przycisk Zakończ.

Ukończono instalację
Kliknij przycisk Zakończ, aby zamknąć Instalatora platformy internetowej.
Aby otworzyć program Visual Studio Express for Web, przejdź do ekranu Start i zacznij pisać "VS Express", a następnie kliknij kafelek VS Express for Web.

Kafelek programu VS Express dla sieci Web

Dodatek B: publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

Ten dodatek pokaże Ci, jak utworzyć nową witrynę internetową z Portal Zarządzania Windows Azure i opublikować aplikację, którą uzyskałeś, wykonując ćwiczenia, korzystając z funkcji publikowania Web Deploy udostępnionej przez Windows Azure.

Zadanie 1 . Tworzenie nowej witryny sieci Web w witrynie Windows Azure Portal

Przejdź do portalu zarządzania platformy Windows Azure i zaloguj się przy użyciu poświadczeń firmy Microsoft skojarzonych z subskrypcją.

Uwaga

Platforma Windows Azure umożliwia hostowanie 10 ASP.NET witryn internetowych bezpłatnie, a następnie skalowanie w miarę wzrostu ruchu. Możesz zarejestrować się tutaj.

Zaloguj się do portalu zarządzania platformy Windows Azure
Kliknij pozycję Nowy na pasku poleceń.

Tworzenie nowej witryny sieci Web
Kliknij Compute | Web Site. Następnie wybierz opcję Szybkie tworzenie . Podaj dostępny adres URL nowej witryny sieci Web i kliknij pozycję Utwórz witrynę sieci Web.

Uwaga

Witryna sieci Web platformy Windows Azure jest hostem aplikacji internetowej działającej w chmurze, którą można kontrolować i zarządzać. Opcja Szybkie tworzenie umożliwia wdrożenie ukończonej aplikacji internetowej w witrynie sieci Web platformy Windows Azure spoza portalu. Nie obejmuje on kroków konfigurowania bazy danych.

Tworzenie nowej witryny sieci Web przy użyciu szybkiego tworzenia
Poczekaj na utworzenie nowej witryny sieci Web.
Po utworzeniu witryny sieci Web kliknij link w kolumnie ADRES URL . Sprawdź, czy nowa witryna sieci Web działa.

Przechodzenie do nowej witryny sieci Web

Uruchomiona witryna sieci Web
Wróć do portalu i kliknij nazwę witryny sieci Web w kolumnie Nazwa , aby wyświetlić strony zarządzania.

Otwieranie stron zarządzania witrynami sieci Web
Na stronie Pulpit nawigacyjny w sekcji szybkości spojrzenia kliknij link Pobierz profil publikacji.

Uwaga

Profil publikowania zawiera wszystkie informacje wymagane do opublikowania aplikacji internetowej w witrynie internetowej platformy Windows Azure dla każdej z włączonych metod publikacji. Profil publikowania zawiera adresy URL, poświadczenia użytkownika i ciągi bazy danych wymagane do nawiązania połączenia i uwierzytelnienia względem każdego z punktów końcowych, dla których włączono metodę publikacji. Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web i Microsoft Visual Studio 2012 obsługują odczytywanie profilów publikowania w celu zautomatyzowania konfiguracji tych programów do publikowania aplikacji internetowych w witrynach internetowych platformy Windows Azure.

Pobieranie profilu publikowania witryny sieci Web
Pobierz plik profilu publikowania do znanej lokalizacji. W tym ćwiczeniu zobaczysz, jak używać tego pliku do publikowania aplikacji internetowej w witrynach sieci Web platformy Windows Azure z poziomu programu Visual Studio.

Zapisywanie pliku profilu publikowania

Zadanie 2 — Konfigurowanie serwera bazy danych

Jeśli aplikacja korzysta z baz danych programu SQL Server, musisz utworzyć serwer usługi SQL Database. Jeśli chcesz wdrożyć prostą aplikację, która nie korzysta z programu SQL Server, możesz pominąć to zadanie.

Do przechowywania bazy danych aplikacji potrzebny będzie serwer usługi SQL Database. Serwery baz danych SQL z Twojej subskrypcji można wyświetlić w portalu zarządzania Azure na stronie Sql DatabasesSerweryDashboard serwera. Jeśli nie masz utworzonego serwera, możesz go utworzyć przy użyciu przycisku Dodaj na pasku poleceń. Zanotuj nazwę serwera i adres URL, nazwę logowania administratora i hasło, ponieważ będą one używane w następnych zadaniach. Nie twórz jeszcze bazy danych, ponieważ zostanie ona utworzona w późniejszym etapie.

Pulpit nawigacyjny serwera usługi SQL Database
W następnym zadaniu przetestujesz połączenie z bazą danych z programu Visual Studio, dlatego musisz uwzględnić lokalny adres IP na liście dozwolonych adresów IP serwera. Aby to zrobić, kliknij przycisk Konfiguruj, wybierz adres IP z bieżącego adresu IP klienta i wklej go w polach tekstowych Początkowy adres IP i Końcowy adres IP. Wprowadź nazwę reguły i kliknij .

Dodawanie adresu IP klienta
Po dodaniu adresu IP klienta do listy dozwolonych adresów IP kliknij pozycję Zapisz, aby potwierdzić zmiany.

Potwierdzanie zmian

Zadanie 3 . Publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

Wróć do rozwiązania ASP.NET MVC 4. W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt witryny internetowej i wybierz polecenie Publikuj.

Publikowanie witryny sieci Web
Zaimportuj profil publikowania zapisany w pierwszym zadaniu.

Importowanie profilu publikowania
Kliknij pozycję Zweryfikuj połączenie. Po zakończeniu walidacji kliknij przycisk Dalej.

Uwaga

Walidacja zostanie ukończona po wyświetleniu zielonego znacznika wyboru obok przycisku Zweryfikuj połączenie.

Weryfikowanie połączenia
Na stronie Ustawienia w sekcji Bazy danych kliknij przycisk obok pola tekstowego połączenia bazy danych (tj. DefaultConnection).

Konfiguracja narzędzia Web Deploy
Skonfiguruj połączenie z bazą danych w następujący sposób:
- W polu Nazwa serwera wpisz adres URL serwera usługi SQL Database przy użyciu prefiksu tcp: .
- W polu Nazwa użytkownika wpisz nazwę logowania administratora serwera.
- W polu Hasło wpisz hasło logowania administratora serwera.
- Wpisz nową nazwę bazy danych, na przykład: MVC4SampleDB.
  
  Konfigurowanie parametry połączenia docelowej
Następnie kliknij przycisk OK. Po wyświetleniu monitu o utworzenie bazy danych kliknij przycisk Tak.

Tworzenie bazy danych
Parametry połączenia używane do łączenia się z bazą danych SQL na platformie Windows Azure są wyświetlane w polu tekstowym Domyślne połączenie. Następnie kliknij Dalej.

Parametry połączenia wskazujące usługę SQL Database
Na stronie Wersja zapoznawcza kliknij pozycję Publikuj.

Publikowanie aplikacji internetowej
Po zakończeniu procesu publikowania domyślna przeglądarka otworzy opublikowaną witrynę internetową.

Aplikacja opublikowana na platformie Windows Azure

Opinia

Czy ta strona była pomocna?

Last updated on 2026-03-28

Udostępnij za pośrednictwem

Co nowego w platformie ASP.NET i w programowaniu dla Internetu w programie Visual Studio 2012

Cele

Wymagania wstępne

Ćwiczenia

Ćwiczenie 1. Co nowego w edytorze CSS

Zadanie 1 — nowe funkcje edytora

Zadanie 2 — selektor kolorów

Zadanie 3 — fragmenty kodu zgodne z css

Ćwiczenie 2. Co nowego w edytorze HTML

Zadanie 1 — ulepszona weryfikacja typu DOCTYPE

Zadanie 2 — automatyczna aktualizacja tagów rozpoczęcia/zakończenia

Zadanie 3 — nowe fragmenty kodu HTML5

Zadanie 4 . Tagi inteligentne edytora HTML

Zadanie 5 — inteligentne wcięcie

Zadanie 6: Wyodrębnianie do kontroli użytkownika

Ćwiczenie 3. Co nowego w edytorze Języka JavaScript

Zadanie 1 . Nowe funkcje edytora Języka JavaScript

Zadanie 2 . Weryfikowanie języka JavaScript

Zadanie 3 — dokumentacja XML dla języka JavaScript

Ćwiczenie 4. Bundling i minification

Zadanie 1 - Instalowanie pakietu grupowania i minifikacji z NuGet

Zadanie 2 — pakiety domyślne

Zadanie 3 — pakiety statyczne

Zadanie 4 — pakiety folderów dynamicznych

Podsumowanie

Dodatek A: Instalowanie programu Visual Studio Express 2012 dla sieci Web

Dodatek B: publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

Zadanie 1 . Tworzenie nowej witryny sieci Web w witrynie Windows Azure Portal

Zadanie 2 — Konfigurowanie serwera bazy danych

Zadanie 3 . Publikowanie aplikacji MVC 4 ASP.NET przy użyciu narzędzia Web Deploy

Opinia

Dodatkowe zasoby