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 programu Visual Studio dla arkuszy CSS, JavaScript i HTML zostały całkowicie przebudowane, aby uwzględnić wiele najbardziej pomocnych w kodzie na żądanie, takich jak IntelliSense i automatyczne wcięcia. Jeśli chodzi o wydajność, łączenie i minimalizowanie są teraz zintegrowane jako wbudowane funkcje, aby łatwo zmniejszyć 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. Masz teraz katalog JavaScript w zasięgu ręki. Ponadto możesz sprawdzić zgodność programu 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 minification. Pliki skryptów i arkusze stylów zostaną spakowane i skompresowane, aby witryna działała szybciej.
To laboratorium przeprowadzi Cię przez ulepszenia i nowe funkcje opisane wcześniej przez zastosowanie drobnych zmian do przykładowej aplikacji internetowej udostępnionej w folderze Źródłowy.
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 minification
Wymagania wstępne
- Microsoft Visual Studio Express 2012 dla sieci Web lub superior (przeczytaj dodatek A, aby uzyskać instrukcje dotyczące sposobu jej instalowania).
- Windows PowerShell (w przypadku skryptów instalacji — już zainstalowanych w systemach Windows 8 i Windows Server 2008 R2)
- Internet Explorer 10 — lub zgodna z językiem HTML5 przeglądarka
Ćwiczenia
To praktyczne laboratorium 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 JavaScript
- Ćwiczenie 4. Tworzenie pakietów i minification
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 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 rozwiązanie tych problemów wizualnych, aby zdać sobie sprawę, że gdy w końcu będzie działać w jednej przeglądarce, jest ona uszkodzona w innych.
Program Visual Studio zawiera teraz funkcje, które ułatwiają deweloperom efektywne uzyskiwanie dostępu do arkuszy stylów CSS, pracy i organizowania 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 funkcji 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 Styles. Upewnij się, że narzędzia edytora tekstów są widoczne na pasku narzędzi. W tym celu wybierz opcję menu Wyświetl | paski narzędzi i zaznacz opcje Edytor tekstów . Zauważysz, że ponieważ ta nowa wersja, przycisk Komentarz (
) i przycisk Usuń komentarz (
) są również włączone dla edytora CSS.
Włączanie edytora i narzędzi CSS
Przewiń kod i wybierz dowolną definicję klasy CSS. Kliknij przycisk Komentarz (
), aby dodać komentarz do wybranych wierszy. Następnie kliknij przycisk Usuń komentarz (
), aby cofnąć zmiany.Kliknij przycisk Zwiń (
) i Rozwiń (
) znajdujący się na lewym marginesie tekstu. Zwróć uwagę, że można teraz 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 stronęFormatowanieCSS | edytora | tekstów w okienku po lewej stronie 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ównany automatycznie, co ułatwia użytkownikom błyskawiczne 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 arkuszu CSS
Wewnątrz klasy div .main znajdź kursor na końcu obramowania: 0px, a następnie naciśnij klawisz Enter , aby wyświetlić listę funkcji IntelliSense. Rozpocznij wpisywanie górnej części i zwróć uwagę na sposób filtrowania listy podczas wpisywania. Na liście zostaną wyświetlone elementy, które zawierają 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 pliku 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
Usuwanie dwukropka (:) i zapisz go ponownie, aby wyświetlić selektor kolorów. Zwróć uwagę, że pierwsze kolory, które będą widoczne, 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.
Przezroczystość selektora kolorów
Uwaga
Definicja koloru RGBA (Czerwony, Zielony, Niebieski, Alfa) w css3 umożliwia zdefiniowanie wartości nieprzezroczystości kolorów dla pojedynczego elementu. W przeciwieństwie do nieprzezroczystości — podobne kolory CSS - RGBA 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 (nagłówek) i umieść kursor poniżej / *border radius*/ symbol zastępczy, aby dodać nowy fragment kodu. Naciśnij klawisz Enter , aby wyświetlić listę funkcji IntelliSense i wpisz promień , aby filtrować listę. Wybierz opcję promień obramowania z listy dwukrotnym kliknięciem, a następnie naciśnij klawisz TAB , aby wstawić fragment kodu. Następnie wpisz rozmiar promienia w pikselach i naciśnij klawisz Enter. Na przykład wpisz 15 pikseli.
Atrybuty CSS3 dodane przez fragment kodu będą renderowane zaokrąglone obramowania w większości przeglądarek zgodności HTML5, w tym przeglądarki Mozilla i WebKit.
Używanie fragmentu kodu promienia obramowania
Zastosuj te same fragmenty kodu obramowania w stylu strony (strona).
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 klawisz 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 klawisz Enter, aby wyświetlić listę funkcji IntelliSense, wpisz pole-cień i naciśnij klawisz TAB dwa razy, aby wstawić domyślny fragment kodu w tle wewnątrz definicji klasy. Ustaw wartości w tle na 10px 10px 5px #888. Następnie wpisz promień obramowania i wstaw fragment kodu. Wpisz 15 pikseli , aby ustawić rozmiar promienia i naciśnij klawisz ENTER.
Zaokrąglone rogi z cieniem
Uwaga
W tej chwili atrybut cienia jest wstawiany z odpowiednim prefiksem (moz, webkit, o), aby obsługiwać przeglądarki 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 class i umieść kursor wewnątrz nawiasów .
CSS
div.images ul li img { ... } div.images ul li img:hover { }Wpisz przekształcenie i naciśnij dwukrotnie klawisz TAB , aby wstawić fragment kodu przekształcenia. Następnie wprowadź wartość rotate(-15deg), aby zmienić wartość kąta obrotu po umieszczeniu wskaźnika myszy 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 klawisz F5 , aby uruchomić rozwiązanie i przejść do strony CSS3. Zwróć uwagę, że obrazy mają zaokrąglone rogi i cienie skrzynki. Umieść kursor myszy na obrazach i watch obracać je.
Przekształcanie fragmentu kodu obracającego 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 klawisz F12, aby otworzyć narzędzia deweloperskie programu Internet Explorer, a następnie kliknij pozycję 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, fragmenty kodu HTML5, dopasowywanie tagów startowych i końcowych HTML oraz walidacja HTML. W tym ćwiczeniu zobaczysz, jak te zmiany poprawiają płynność podczas pracy w znacznikach witryny internetowej.
Podobnie jak edytor CSS, edytor HTML został również ulepszony. Większość tych ulepszeń to małe, które ułatwiają życie dewelopera sieci Web. Oto niektóre z tych ulepszeń, takie jak więcej fragmentów kodu dla kodu HTML5, wcięcia inteligentne, dopasowywanie tagów początkowych i końcowych podczas edytowania i walidacji przeznaczonych dla dokumentu HTML DOCTYPE.
Zadanie 1 — ulepszona walidacja 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 prawidłowy zestaw reguł i filtruje listę intelliSense biorąc pod uwagę elementy DOCTYPE.
W tym zadaniu zmienisz dokument 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 schematu docelowego dla walidacji. Sposób działania edytora HTML (Walidacja, Funkcja IntelliSense itp.) zostanie prawidłowo zmieniony tak, aby pasował do wybranego dokumentu.
Używanie dokumentu na pasku narzędzi do edycji źródła HTML
Zmień schemat docelowy na HTML 4.01.
Zmienianie 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 funkcji IntelliSense.
Elementy HTML5, których nie ma na liście
Cofnij zmiany w schemacie docelowym dla paska narzędzi weryfikacji, wybierając pozycję DOCTYPE: XHTML5 z listy rozwijanej.
Resetowanie dokumentu na pasku narzędzi do edycji źródła HTML
Umieść kursor pod elementem treści i zacznij ponownie wpisywać element HTML5 (na przykład wideo). Zwróć uwagę, że elementy HTML5 są teraz dostępne na liście funkcji IntelliSense.
na Wyświetlane elementy HTML5
Zadanie 2 . Automatyczne aktualizowanie tagów początkowych/końcowych
Program Visual Studio aktualizuje teraz tagi otwierania lub zamykania kodu HTML edytowanego elementu, aby dopasować się do siebie. Ta nowa funkcja poprawi produktywność podczas edytowania tagów HTML.
Na stronie Default.aspx dodaj element H3 z tytułem (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 startowy 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łówka. Wpisz dźwięk i naciśnij klawisz 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 klawisz F5 , aby uruchomić witrynę i odtworzyć dźwięk.
Uruchamianie kontrolki audio
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 części strony. Na przykład spróbuj wstawić kontrolkę GridView , ale zamiast wpisywać <polecenie Gri, zacznij pisać <GV. Zwróć uwagę, że na liście funkcji IntelliSense jest wyświetlana kontrolka asp:GridView .
Funkcja IntelliSense w edytorze HTML udostępnia teraz wyszukiwanie tytułów, a także częściowe dopasowywanie (pobieranie wszystkich elementów zawierających termin).
Wstawianie elementu GridView z listami funkcji IntelliSense
Jeśli wpiszesz <siatkę , uzyskasz wszystkie elementy zgodne z terminem, ale program Visual Studio zaproponuje kontrolkę gridview :
Wstawianie elementu GridView z listami IntelliSense i częściowym dopasowywaniem
Zadanie 4 . Tagi inteligentne edytora HTML
Innym ulepszeniem 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 Projektant HTML, ale nie w edytorze HTML.
Otwórz plik Site.Master i znajdź element asp:Menu . Umieść kursor na tagu startowym i zwróć uwagę, że mały glif wyświetlany w dolnej części elementu — kliknij go, aby otworzyć menu zadań inteligentnych. Zwróć uwagę, że masz szybki dostęp do niektórych zadań związanych z kontrolką Menu.
Inteligentne zadania 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 wcięcie elementów podczas pisania kodu.
Uwaga
W poprzedniej wersji programu Visual Studio wcięcie inteligentne było dostępne w edytorze XML, ale nie w edytorze HTML.
Upewnij się, że konfiguracja wcięcia w edytorze HTML jest ustawiona na inteligentne wcięcie. W tym celu wybierz pozycję Narzędzia | Opcja menu Opcje , a następnie wybierz edytor tekstów | HTML | Strona Kart w okienku po lewej stronie 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 klawisz ENTER.
Zwróć uwagę, że nowe położenie kursora ma dodatkowy poziom wcięcia.
Inteligentne wcięcie w edytorze HTML
Przywróć tag audio z usuniętą zawartością lub zamknij plik Default.aspx bez zapisywania zmian.
Zadanie 6 — wyodrębnianie do kontrolki użytkownika
Narzędzia refaktoryzacji zawarte w programie Visual Studio, takie jak wyodrębnianie części kodu do funkcji, to doskonałe funkcje, które ułatwiają poprawę i refaktoryzację istniejącego kodu. Odpowiednikiem stron ASP.NET jest wyodrębnianie kodu HTML do kontrolki użytkownika. Ręczne wykonanie tej czynności wymaga kilku kroków, takich jak utworzenie nowej kontrolki użytkownika, przeniesienie sekcji kodu do kontrolki użytkownika, zarejestrowanie prefiksu tagu dla kontrolki użytkownika, a na koniec utworzenie wystąpienia kontrolki użytkownika na stronach. Teraz nowe narzędzie Wyodrębnianie do kontroli użytkownika automatycznie wykonuje wszystkie te kroki.
W tym zadaniu użyjesz nowej operacji kontekstowej Wyodrębnij do kontrolki użytkownika, aby wygenerować nową kontrolkę użytkownika z wybranego kodu.
Na stronie Default.aspx wybierz elementy H2 i audio .
Kliknij prawym przyciskiem myszy i wybierz polecenie 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 kontrolki użytkownika, a oryginalna lokalizacja wybranego kodu została zastąpiona wystąpieniem nowej kontrolki użytkownika.
Strona jest automatycznie aktualizowana w celu korzystania z nowej kontrolki użytkownika
Naciśnij klawisz F5 , aby uruchomić stronę i sprawdzić, czy kontrolka działa.
Ćwiczenie 3. Co nowego w edytorze JavaScript
Pisanie lub edytowanie kodu w języku JavaScript nie jest łatwym zadaniem, zwłaszcza gdy aplikacja zaczyna rosnąć i masz do czynienia z 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 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ą, aby tryb kodu był dostępny i zorganizowany. Wiele funkcji programu Visual Studio, które już istniały w edytorze języka C# lub VB, są teraz implementowane w edytorze 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ą z nowych cech, które sprawią, że programowanie w języku JavaScript będzie bardziej wydajne w programie Visual Studio 2012.
Zadanie 1 . Nowe funkcje edytora JavaScript
W tym zadaniu przedstawisz niektóre z 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 klawisz 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 strony
Zamknij przeglądarkę i wróć do programu Visual Studio.
Otwórz stronę JavaScript.aspx i znajdź blok skryptu<> (pokazano poniżej).
Poniższy kod używa magazynu lokalnego HTML5 do przechowywania zmiennej pageLoadCount , która przechowuje liczbę odwiedzin strony przez bieżącego użytkownika. Magazyn lokalny 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 kolejnych kroków upewnij się, że parametr DOCTYPE jest ustawiony na XHTML5.
Edytuj kod i zwróć uwagę, że funkcja IntelliSense dla języka JavaScript zawiera 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 funkcji testAutoAlign() (wybierz trzy wiersze i możesz użyć kombinacji klawiszy CTRL + K; CTRL + U) i znajdź kursor wewnątrz kodu funkcji. Naciśnij klawisz 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 odkryjesz nową walidację 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, a 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() { } }W pierwszym wierszu pliku możesz sprawdzić kierunek " " , który umożliwia tryb ścisły ECMAScript5. Ten tryb składa się z podzestawu języka, który wyjaśnia niejednoznaczności z poprzedniej edycji i dodaje kilka nowych funkcji, takich jak getters i setters, obsługa biblioteki 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. Wynika to z faktu, że w standardowych funkcjach ECMA5 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 weryfikacji języka JavaScript
Oznacz jako komentarz " użyj ścisłego" kierunku 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). Zapisz kropkę obok ciągu, aby wyświetlić listę funkcji IntelliSense, a następnie wybierz opcję przycinania .
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 funkcji 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, która zawiera teraz dokumentację XML każdej funkcji. Ponadto odnajdziesz funkcję nawigacji w języku JavaScript.
Otwórz plikXMLDoc.js znajdujący się w folderze Skrypty/projekt niestandardowy . Ten plik zawiera dokumentację XML dla każdej z funkcji języka JavaScript.
Dokumentacja xml języka JavaScript zintegrowana z funkcją IntelliSense
Poniżej dodaj funkcję w plikuXMLDoc.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
Wypełnij instrukcję wywołania funkcji i wpisz kropkę , aby otworzyć listę funkcji 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, aby dodać funkcję. 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 dla przeciążeń
Otwórz plikGotoDefinition.js i znajdź wywołanie funkcji $().html(). Znajdź kursor w kodzie HTML.
Naciśnij klawisz 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ź .
Znajdź kursor na instrukcji jQuery przed blokiem podpisu w dolnej części pliku kodu. Naciśnij klawisz F12. Przejdź do pliku biblioteki jQuery. Zwróć uwagę, że możesz również nawigować po plikach jQuery przy użyciu klawisza F12.
Przechodzenie do definicji jQuery
Uwaga
Przed zapisaniem pliku upewnij się, że GotoDefinition.js nie ma błędów składniowych.
Ćwiczenie 4. Tworzenie pakietów 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 systemie ASP.NET 4.5 pakuje zestaw plików JS lub CSS do jednego elementu i zmniejsza jego rozmiar przez zminimalizowanie zawartości (tj. usuwanie nie wymaganych pustych spacji, usuwanie komentarzy, zmniejszanie identyfikatorów).
Tworzenie pakietów i minification w ASP.NET 4.5 jest wykonywane w czasie wykonywania, dzięki czemu proces może zidentyfikować agenta użytkownika (na przykład IE, Mozilla itp.), a tym samym poprawić kompresję, kierując przeglądarkę użytkownika (na przykład usuwając rzeczy specyficzne dla Mozilla, gdy żądanie pochodzi z programu IE).
W tym ćwiczeniu dowiesz się, jak włączać i używać różnych typów łączenia i minyfikacji w ASP.NET 4.5.
Zadanie 1 . Instalowanie pakietu pakietowego i minyfikacji z narzędzia 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żera pakietów NuGet. W tym celu użyj menu Wyświetl | innąkonsolę Menedżera pakietówsystemu Windows | .
Otwieranie konsoli menedżera pakietów
W konsoli Menedżera pakietów wpisz Install-Package Microsoft.Web.Optimization i naciśnij klawisz 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 dołączonej i minyfikowanej wersji plików JS i CSS w folderze.
W tym zadaniu dowiesz się, jak włączyć i odwoływać się do powiązanych plików JS i CSS oraz wyświetlić wynikowe dane wyjściowe.
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 Eksplorator rozwiązań rozwiń foldery 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 oznaczona jako komentarz na początku pliku. Usuń komentarz z dyrektywy using, aby uwzględnić funkcje tworzenia pakietów i minification.
using System; using Microsoft.Web.Optimization;Znajdź metodę Application_Start .
W tej metodzie usuń komentarz wywołania EnableDefaultBundles, jak pokazano w poniższym fragmencie kodu. Dzięki temu można odwoływać się do 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 pliki JS mają pojedynczy tag, do których odwołuje się odwołanie.
<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. W idealnym przypadku odwołujesz się do pakietów w pliku Site.Master. W tym przykładowym kodzie dowiesz się, że niektóre pliki dołączone 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 w celu pobrania wszystkich plików CSS lub JS z folderu Styles i Scripts\custom.
Możesz użyć ścieżki Scripts/custom/JS , jak pokazano poniżej, aby spakować i zminimalizować wszystkie pliki JS wewnątrz folderu Scripts/custom . Jest to domyślne zachowanie z domyślnymi pakietami.
<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. (Plik JavaScript zawiera również puste spacje i komentarze).
Jeden z oryginalnych plików CSS w folderze Scripts
Naciśnij klawisz F5 , aby uruchomić aplikację i przejść do strony Optymalizacja .
Kliknij link Pakiet CSS , aby pobrać i otworzyć plik.
Wyewidencjonuj plik w pakiecie z minimalną zawartością. 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 dołączony do języka JavaScript. Możesz bezpiecznie zignorować ostrzeżenie eksploratora. Zwróć uwagę, że pliki JavaScript w folderze niestandardowym są również powiązane i zmieryfikowane.
Pliki w pakiecie 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 pakietu, odwołania i metody minyfikacji, która zostanie użyta.
W tym zadaniu skonfigurujesz pakiet statyczny, aby zdefiniować określony zestaw plików do 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 odwołuje się ścieżka wirtualna "~/StaticBundle" i używasz narzędzia JsMinify do zminimalizowania wszystkich określonych plików za pomocą metody AddFile . Na koniec dodasz pakiet statyczny do tabeli BundleTable i włączysz 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 zadeklarowanej podczas konfigurowania pakietu statycznego 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 klawisz F5 , aby uruchomić aplikację, a następnie przejdź do strony Optymalizacja .
Kliknij link Statyczny pakiet JS, aby otworzyć plik.
Zwróć uwagę, że minimalny plik JavaScript w pakiecie jest danymi wyjściowymi wszystkich plików JavaScript skonfigurowanych w pliku pakietu statycznego w ścieżce "/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. Możliwości dynamicznego tworzenia pakietów polega na tym, że można uwzględnić statyczny język JavaScript, a także inne pliki w językach kompilowanych w języku JavaScript, a tym samym wymagać przetwarzania przed wykonaniem tworzenia pakietu.
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 zapewnia prostszą składnię 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 kodu pakietu dynamicznego, 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 stosowany tylko do plików z rozszerzeniem ".coffee" (pliki CoffeeScript). Zwróć uwagę, że możesz użyć wzorca wyszukiwania, aby wybrać pliki do pakietu w folderze, 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żera pakietów NuGet. W tym celu użyj menu Wyświetl | innąkonsolę Menedżera pakietówsystemu Windows | .
W konsoli Menedżera pakietów wpisz Install-Package CoffeeSharp i naciśnij klawisz ENTER.
Kliknij przycisk Pokaż wszystkie pliki w oknie Eksplorator rozwiązań
Wyświetlanie 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 z struktury JsMinify, aby zminimalizować dane wyjściowe języka JavaScript wynikające z kompilacji kodu CoffeeScript. Wywołuje kompilator CoffeeScript, aby najpierw wygenerować kod JavaScript, a następnie wysyła go do metody JsMinify.Process, aby zminimalizować 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 obejmują 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 wzorca.
Otwórz plik Optimization.aspx i znajdź linki pakietu.
Zwróć uwagę, że link do dynamicznego pakietu JS odwołuje się do folderu Scripts/bundle przy użyciu sufiksu /Coffee skonfigurowanego dla pakietu folderów dynamicznych.
<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 klawisz F5 , aby uruchomić aplikację, a następnie przejdź do strony Optymalizacja .
Kliknij link Dynamiczny pakiet JS Bundle , aby otworzyć wygenerowany plik.
Zwróć uwagę, że zawartość uwzględniona w tym pakiecie zawiera tylko pliki kawy . Widać również, że kod CoffeeScript został skompilowany w języku JavaScript, a wiersze komentarzy zostały usunięte.
Pakiet dynamicznych plików JS
Uwaga
Ponadto tę aplikację można wdrożyć w witrynach sieci Web platformy Windows Azure w dodatku B: Publikowanie aplikacji ASP.NET MVC 4 przy użyciu narzędzia Web Deploy.
Podsumowanie
To laboratorium pomaga zrozumieć, co nowego w programie ASP.NET i tworzenia aplikacji internetowych w programie Visual Studio 2012 jest i jak korzystać z różnych ulepszeń w programie Visual Studio 2012.
Po ukończeniu tego Hands-On Lab 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 minification.
Dodatek A: Instalowanie Visual Studio Express 2012 dla sieci Web
Można zainstalować Microsoft Visual Studio Express 2012 dla sieci Web lub innej wersji "Express" przy użyciu Instalator platformy Microsoft Web. Poniższe instrukcje zawierają instrukcje opisane w krokach wymaganych do zainstalowania programu Visual Studio Express 2012 for Web przy użyciu Instalator platformy Microsoft Web.
Przejdź do strony [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Alternatywnie, jeśli masz już zainstalowany Instalator platformy sieci Web, możesz go otworzyć i wyszukać produkt "Visual Studio Express 2012 for Web with Windows Azure SDK" (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 Visual Studio Express
Przeczytaj wszystkie licencje i postanowienia dotyczące produktów i kliknij przycisk 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.
Instalacja została ukończona
Kliknij przycisk Zakończ, aby zamknąć Instalatora platformy sieci Web.
Aby otworzyć Visual Studio Express dla sieci Web, przejdź do ekranu startowego 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 ASP.NET MVC 4 przy użyciu narzędzia Web Deploy
W tym dodatku pokazano, jak utworzyć nową witrynę internetową z portalu zarządzania platformy Windows Azure i opublikować aplikację uzyskaną przez wykonanie laboratorium, korzystając z funkcji publikowania web deploy udostępnionej przez platformę Windows Azure.
Zadanie 1 . Tworzenie nowej witryny sieci Web w witrynie Azure Portal systemu Windows
Przejdź do portalu zarządzania platformy Windows Azure i zaloguj się przy użyciu poświadczeń firmy Microsoft skojarzonych z subskrypcją.
Uwaga
Za pomocą platformy Windows Azure można hostować 10 ASP.NET witryn sieci Web bezpłatnie, a następnie skalować 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 pozycję Compute Web Site ( Obliczanie | witryny sieci Web). 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ć nią. 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
Wstecz 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 Szybki przegląd kliknij link Pobierz profil publikowania .
Uwaga
Profil publikowania zawiera wszystkie informacje wymagane do opublikowania aplikacji internetowej w witrynie internetowej platformy Windows Azure dla każdej metody publikacji z włączoną obsługą. 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. Program Microsoft WebMatrix 2, Microsoft Visual Studio Express for Web i Program 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 SQL Server baz danych, musisz utworzyć serwer SQL Database. Jeśli chcesz wdrożyć prostą aplikację, która nie używa SQL Server możesz pominąć to zadanie.
Do przechowywania bazy danych aplikacji będzie potrzebny serwer SQL Database. Serwery SQL Database można wyświetlić z subskrypcji w portalu zarządzania platformy Windows Azure napulpicie nawigacyjnym programuSql Databases | Server | . Jeśli nie masz utworzonego serwera, możesz go utworzyć przy użyciu przycisku Dodaj na pasku poleceń. Zanotuj nazwę i adres URL serwera, 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 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
Wstecz 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 Weryfikuj 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 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 docelowych parametrów połączenia
Następnie kliknij przycisk OK. Po wyświetleniu monitu o utworzenie bazy danych kliknij przycisk Tak.
Tworzenie bazy danych
Parametry połączenia, których użyjesz do nawiązania połączenia z SQL Database na platformie Windows Azure, są wyświetlane w polu tekstowym Połączenie domyślne. Następnie kliknij przycisk Dalej.
Parametry połączenia wskazujące SQL Database
Na stronie Podgląd 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
Dostępne już wkrótce: W 2024 r. będziemy stopniowo wycofywać zgłoszenia z serwisu GitHub jako mechanizm przesyłania opinii na temat zawartości i zastępować go nowym systemem opinii. Aby uzyskać więcej informacji, sprawdź: https://aka.ms/ContentUserFeedback.
Prześlij i wyświetl opinię dla