Strony wzorcowe i ASP.NET AJAX (C#)
Omówienie opcji używania ASP.NET AJAX i stron wzorcowych. Patrzy na użycie klasy ScriptManagerProxy; omawia sposób ładowania różnych plików JS w zależności od tego, czy element ScriptManager jest używany na stronie wzorcowej lub na stronie Zawartość.
Wprowadzenie
W ciągu ostatnich kilku lat coraz więcej deweloperów tworzyło aplikacje internetowe z obsługą technologii AJAX. Witryna internetowa z obsługą technologii AJAX korzysta z wielu powiązanych technologii internetowych, aby zapewnić bardziej dynamiczne środowisko użytkownika. Tworzenie aplikacji ASP.NET z obsługą AJAX jest niezwykle łatwe dzięki platformie ASP.NET AJAX firmy Microsoft. ASP.NET AJAX jest wbudowany w ASP.NET 3.5 i Visual Studio 2008; Jest on również dostępny jako oddzielny plik do pobrania dla aplikacji ASP.NET 2.0.
Podczas tworzenia stron internetowych z obsługą AJAX za pomocą platformy ASP.NET AJAX należy dodać dokładnie jedną kontrolkę ScriptManager do każdej i każdej strony korzystającej ze struktury. Jak sugeruje jego nazwa, ScriptManager zarządza skryptem po stronie klienta używanym na stronach internetowych z obsługą AJAX. Co najmniej narzędzie ScriptManager emituje kod HTML, który nakazuje przeglądarce pobranie plików JavaScript, które tworzą bibliotekę klienta ASP.NET AJAX. Służy również do rejestrowania niestandardowych plików JavaScript, usług internetowych z obsługą skryptów i niestandardowych funkcji usługi aplikacji.
Jeśli witryna używa stron wzorcowych (tak jak powinno), niekoniecznie musisz dodać kontrolkę ScriptManager do każdej strony zawartości; zamiast tego można dodać kontrolkę ScriptManager do strony wzorcowej. W tym samouczku pokazano, jak dodać kontrolkę ScriptManager do strony wzorcowej. Przyjrzyj się również sposobom używania kontrolki ScriptManagerProxy do rejestrowania niestandardowych skryptów i usług skryptów na określonej stronie zawartości.
Uwaga
W tym samouczku nie przedstawiono projektowania ani kompilowania aplikacji internetowych z obsługą technologii AJAX przy użyciu platformy ASP.NET AJAX. Aby uzyskać więcej informacji na temat korzystania z usługi AJAX, zapoznaj się z filmami wideo i samouczkami AJAX ASP.NET AJAX , a także tymi zasobami wymienionymi w sekcji Dalsze informacje na końcu tego samouczka.
Badanie znaczników emitowanych przez kontrolkę ScriptManager
Kontrolka ScriptManager emituje znaczniki, które instruują przeglądarkę w celu pobrania plików JavaScript, które tworzą bibliotekę klienta ASP.NET AJAX. Dodaje również trochę wbudowanego kodu JavaScript do strony, która inicjuje tę bibliotekę. Poniższy znacznik pokazuje zawartość dodaną do renderowanych danych wyjściowych strony zawierającej kontrolkę ScriptManager:
<script src="/ASPNET_MasterPages_Tutorial_08_CS/WebResource.axd?d=T8EVk6SsA8mgPKu7_sBX5w2 t=633363040378379010" type="text/javascript"></script>
<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-p_Uf42Ahmr_SKd8lwgZUWb2uPJmfX0X_H6oLA50bniyQ1 t=633465688673751480" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ASPNET_MasterPages_Tutorial_08_CS/ScriptResource.axd?d=SCE1TCh8B24VkQIU5a8iJFizuPBIqs6Lka7GEkxo-6ROKNw5LVPCpF_pmLFR-R-phT96yZPngppiP_VXlN4Vz2RuVtvwDiQzF9xt42dUCiYjL0UylAJoyYzStwvObx0U0 t=633465688673751480" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
//]]>
</script>
Tagi <script src="url"></script> instruują przeglądarkę do pobrania i wykonania pliku JavaScript pod adresem URL. ScriptManager emituje trzy takie tagi; jeden odwołuje się do pliku WebResource.axd, podczas gdy dwa pozostałe odwołują się do pliku ScriptResource.axd. Te pliki nie istnieją w rzeczywistości jako pliki w witrynie internetowej. Zamiast tego po nadejściu żądania dla jednego z tych plików na serwerze internetowym aparat ASP.NET sprawdza ciąg zapytania i zwraca odpowiednią zawartość języka JavaScript. Skrypt dostarczony przez te trzy zewnętrzne pliki JavaScript stanowią bibliotekę klienta platformy ASP.NET AJAX. Inne <script> tagi emitowane przez scriptManager zawierają wbudowany skrypt, który inicjuje tę bibliotekę.
Odwołania do skryptu zewnętrznego i wbudowany skrypt emitowany przez program ScriptManager są niezbędne dla strony korzystającej z platformy ASP.NET AJAX, ale nie są potrzebne dla stron, które nie korzystają ze struktury. W związku z tym może się okazać, że jest to idealne rozwiązanie, aby dodać element ScriptManager tylko do tych stron, które korzystają z platformy ASP.NET AJAX. I jest to wystarczające, ale jeśli masz wiele stron, które korzystają ze struktury, dodasz kontrolkę ScriptManager do wszystkich stron — powtarzalne zadanie, mówiąc najmniej. Alternatywnie można dodać skrypt ScriptManager do strony wzorcowej, która następnie wprowadza ten niezbędny skrypt do wszystkich stron zawartości. Dzięki temu podejściu nie trzeba pamiętać o dodaniu skryptu ScriptManager do nowej strony, która używa platformy ASP.NET AJAX, ponieważ jest już dołączona przez stronę wzorcową. Krok 1 zawiera instrukcje dodawania elementu ScriptManager do strony wzorcowej.
Uwaga
Jeśli planujesz włączenie funkcji AJAX w interfejsie użytkownika strony wzorcowej, nie masz wyboru w tej kwestii — musisz dołączyć element ScriptManager na stronie wzorcowej.
Jedną z wad dodawania elementu ScriptManager do strony wzorcowej jest to, że powyższy skrypt jest emitowany na każdej stronie, niezależnie od tego, czy jest potrzebny. Jest to wyraźnie przyczyną marnotrawstwa przepustowości dla tych stron, które zawierają element ScriptManager (za pośrednictwem strony wzorcowej), ale nie używają żadnych funkcji platformy ASP.NET AJAX. Ale tylko ile przepustowości jest marnowane?
- Rzeczywista zawartość emitowana przez element ScriptManager (pokazany powyżej) sumuje się nieco ponad 1 KB.
- Trzy zewnętrzne pliki skryptów,
<script>do których odwołuje się element, składają się jednak z około 450 KB danych nieskompresowanych; w witrynie internetowej korzystającej z kompresji gzip ta łączna przepustowość może zostać zmniejszona w pobliżu 100 KB. Jednak te pliki skryptów są buforowane przez przeglądarkę przez jeden rok, co oznacza, że trzeba je pobrać tylko raz, a następnie można ich ponownie użyć na innych stronach w witrynie.
W najlepszym przypadku, gdy pliki skryptów są buforowane, całkowity koszt wynosi 1 KB, co jest nieznaczne. W najgorszym przypadku jednak - czyli wtedy, gdy pliki skryptów nie zostały jeszcze pobrane, a serwer internetowy nie używa żadnej formy kompresji - trafienie przepustowości wynosi około 450 KB, co może dodać dowolne miejsce od sekundy lub dwóch przez połączenie szerokopasmowe do minuty dla użytkowników za pośrednictwem modemów dial-up. Dobrą wiadomością jest to, że ponieważ pliki skryptów zewnętrznych są buforowane przez przeglądarkę, ten najgorszy scenariusz występuje rzadko.
Uwaga
Jeśli nadal czujesz się niewygodnie umieszczając kontrolkę ScriptManager na stronie wzorcowej, rozważ formularz internetowy ( <form runat="server"> znaczniki na stronie wzorcowej). Każda strona ASP.NET korzystająca z modelu postback musi zawierać dokładnie jeden formularz internetowy. Dodanie formularza internetowego powoduje dodanie dodatkowej zawartości: wielu ukrytych pól formularza, <form> samego tagu i, w razie potrzeby, funkcji Języka JavaScript do inicjowania powrotu z skryptu. Ta adiustacja jest niepotrzebna dla stron, które nie są ogłaszane po powrocie. Ten nadmiarowy znacznik można wyeliminować przez usunięcie formularza internetowego ze strony wzorcowej i ręczne dodanie go do każdej strony zawartości wymagającej jednego. Jednak korzyści wynikające z posiadania formularza internetowego na stronie wzorcowej przewyższają wady związane z tym, że dodanie go niepotrzebnie do niektórych stron zawartości.
Krok 1. Dodawanie kontrolki ScriptManager do strony wzorcowej
Każda strona internetowa korzystająca z platformy ASP.NET AJAX musi zawierać dokładnie jedną kontrolkę ScriptManager. Ze względu na to wymaganie zwykle warto umieścić pojedynczą kontrolkę ScriptManager na stronie wzorcowej, aby wszystkie strony zawartości miały automatycznie dołączone kontrolkę ScriptManager. Ponadto narzędzie ScriptManager musi znajdować się przed dowolną kontrolką serwera ASP.NET AJAX, takimi jak kontrolki UpdatePanel i UpdateProgress. W związku z tym najlepiej umieścić element ScriptManager przed wszystkimi kontrolkami ContentPlaceHolder w formularzu internetowym.
Otwórz stronę wzorcową i dodaj kontrolkę Site.master ScriptManager do strony w formularzu sieci Web, ale przed elementem <div id="topContent"> (zobacz Rysunek 1). Jeśli używasz programu Visual Web Developer 2008 lub Visual Studio 2008, kontrolka ScriptManager znajduje się w przyborniku na karcie Rozszerzenia AJAX. Jeśli używasz programu Visual Studio 2005, musisz najpierw zainstalować platformę ASP.NET AJAX i dodać kontrolki do przybornika. Odwiedź witrynę wiki ASP.NET AJAX , aby uzyskać strukturę dla ASP.NET 2.0.
Po dodaniu elementu ScriptManager do strony zmień element ID z ScriptManager1 na MyManager.
Rysunek 01. Dodawanie elementu ScriptManager do strony wzorcowej (kliknij, aby wyświetlić obraz pełnowymiarowy)
Krok 2. Korzystanie z platformy ASP.NET AJAX ze strony zawartości
Po dodaniu kontrolki ScriptManager do strony wzorcowej można teraz dodać ASP.NET funkcjonalność platformy AJAX do dowolnej strony zawartości. Utwórzmy nową stronę ASP.NET, która wyświetla losowo wybrany produkt z bazy danych Northwind. Użyjemy kontrolki czasomierza platformy ASP.NET AJAX, aby zaktualizować ten ekran co 15 sekund, pokazując nowy produkt.
Zacznij od utworzenia nowej strony w katalogu głównym o nazwie ShowRandomProduct.aspx. Nie zapomnij powiązać tej nowej strony ze stroną wzorcową Site.master .
Rysunek 02. Dodawanie nowej strony ASP.NET do witryny internetowej (kliknij, aby wyświetlić obraz pełnowymiarowy)
Pamiętaj, że w samouczku Określanie tytułu, tagów meta i innych nagłówków HTML na stronie wzorcowej utworzyliśmy niestandardową klasę strony bazowej o nazwie, BasePage która wygenerowała tytuł strony, jeśli nie została jawnie ustawiona. Przejdź do ShowRandomProduct.aspx klasy code-behind strony i utwórz ją na podstawie BasePage metody (zamiast z System.Web.UI.Page).
Na koniec zaktualizuj Web.sitemap plik, aby uwzględnić wpis dla tej lekcji. Dodaj następujący znacznik poniżej <siteMapNode> lekcji interakcji wzorca do strony zawartości:
<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />
Dodanie tego <siteMapNode> elementu zostanie odzwierciedlone na liście Lekcji (patrz Rysunek 5).
Wyświetlanie losowo wybranego produktu
Wróć do ShowRandomProduct.aspx. Z Projektant przeciągnij kontrolkę UpdatePanel z przybornika do kontrolki MainContent Zawartość i ustaw jej ID właściwość na ProductPanel. Element UpdatePanel reprezentuje region na ekranie, który może być asynchronicznie aktualizowany za pomocą częściowego postbacku strony.
Naszym pierwszym zadaniem jest wyświetlenie informacji o losowo wybranym produkcie w elemecie UpdatePanel. Zacznij od przeciągnięcia kontrolki DetailsView do kontrolki UpdatePanel. Ustaw właściwość kontrolki ID DetailsView na ProductInfo i wyczyść jej Height właściwości i Width . Rozwiń tag inteligentny elementu DetailsView i z listy rozwijanej Wybierz źródło danych wybierz powiązanie kontrolki DetailsView z nową kontrolką SqlDataSource o nazwie RandomProductDataSource.
Rysunek 03. Powiązanie widoku DetailsView z nową kontrolką SqlDataSource (kliknij, aby wyświetlić obraz pełnowymiarowy)
Skonfiguruj kontrolkę SqlDataSource, aby nawiązać połączenie z bazą danych Northwind za pośrednictwem NorthwindConnectionString elementu (który został utworzony w samouczku Interakcja ze stroną wzorcową na stronie zawartości ). Podczas konfigurowania instrukcji select wybierz opcję określenia niestandardowej instrukcji SQL, a następnie wprowadź następujące zapytanie:
SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()
Słowo TOP 1 kluczowe w klauzuli SELECT zwraca tylko pierwszy rekord zwrócony przez zapytanie. FunkcjaNEWID() generuje nową globalnie unikatową wartość identyfikatora (GUID) i może być używana w klauzuli w ORDER BY celu zwrócenia rekordów tabeli w kolejności losowej.
Rysunek 04. Konfigurowanie elementu SqlDataSource w celu zwrócenia pojedynczego, losowo wybranego rekordu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Po ukończeniu pracy kreatora program Visual Studio tworzy pole Powiązane dla dwóch kolumn zwróconych przez powyższe zapytanie. Na tym etapie deklaratywne znaczniki strony powinny wyglądać podobnie do następujących:
<asp:UpdatePanel ID="ProductPanel" runat="server">
<ContentTemplate>
<asp:DetailsView ID="ProductInfo" runat="server" AutoGenerateRows="False"
DataSourceID="RandomProductDataSource">
<Fields>
<asp:BoundField DataField="ProductName" HeaderText="ProductName"
SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice"
SortExpression="UnitPrice" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="RandomProductDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 1 ProductName, UnitPrice FROM Products ORDER BY NEWID()"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
Rysunek 5 przedstawia ShowRandomProduct.aspx stronę po wyświetleniu za pośrednictwem przeglądarki. Kliknij przycisk Odśwież przeglądarki, aby ponownie załadować stronę; Powinny zostać wyświetlone ProductName wartości i UnitPrice dla nowego losowo wybranego rekordu.
Rysunek 05. Wyświetlana jest losowa nazwa i cena produktu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Automatyczne wyświetlanie nowego produktu co 15 sekund
Struktura ASP.NET AJAX zawiera kontrolkę czasomierza, która wykonuje powrót po awarii w określonym czasie; po powrocie po awarii zdarzenie czasomierza Tick jest zgłaszane. Jeśli kontrolka Czasomierz jest umieszczana w elemecie UpdatePanel, wyzwala częściową stronę zwrotną, podczas której możemy ponownie połączyć dane z kontrolką DetailsView, aby wyświetlić nowy losowo wybrany produkt.
Aby to osiągnąć, przeciągnij czasomierz z przybornika i upuść go do kontrolki UpdatePanel. Zmień właściwość Czasomierza ID z Timer1 na ProductTimer i z Interval 60000 na 15000. Właściwość Interval wskazuje liczbę milisekund między postbacks; ustawienie go na 15000 powoduje, że czasomierz wyzwala częściową stronę zwrotną co 15 sekund. W tym momencie znacznik deklaratywny czasomierza powinien wyglądać podobnie do następującego:
<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
<ContentTemplate>
...
<asp:Timer ID="ProductTimer" runat="server" Interval="15000">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
Utwórz procedurę obsługi zdarzeń dla zdarzenia czasomierza Tick . W tej procedurze obsługi zdarzeń musimy ponownie połączyć dane z kontrolką DetailsView, wywołując metodę DetailsView DataBind . W ten sposób element DetailsView ponownie pobierz dane ze swojej kontroli źródła danych, który wybierze i wyświetli nowy losowo wybrany rekord (podobnie jak podczas ponownego ładowania strony, klikając przycisk Odśwież w przeglądarce).
protected void ProductTimer_Tick(object sender, EventArgs e)
{
ProductInfo.DataBind();
}
To wszystko! Ponownie zapoznaj się ze stroną za pośrednictwem przeglądarki. Początkowo są wyświetlane informacje o losowym produkcie. Jeśli cierpliwie watch ekran, zauważysz, że po 15 sekundach informacje o nowym produkcie magicznie zastępują istniejący wyświetlacz.
Aby lepiej zobaczyć, co się dzieje w tym miejscu, dodajmy kontrolkę Etykieta do kontrolki UpdatePanel, która wyświetla czas ostatniej aktualizacji ekranu. Dodaj kontrolkę Sieć Web Etykieta w elemecie UpdatePanel, ustaw jej ID wartość LastUpdateTimena , a następnie wyczyść jej Text właściwość. Następnie utwórz procedurę obsługi zdarzeń dla zdarzenia UpdatePanel Load i wyświetl bieżącą godzinę w etykiecie. (Zdarzenie UpdatePanel Load jest wyzwalane na każdej pełnej lub częściowej stronie zwrotnej).
protected void ProductPanel_Load(object sender, EventArgs e)
{
LastUpdateTime.Text = "Last updated at " + DateTime.Now.ToLongTimeString();
}
Po zakończeniu tej zmiany strona zawiera czas załadowania aktualnie wyświetlanego produktu. Rysunek 6 przedstawia stronę po pierwszym odwiedzeniu. Rysunek 7 przedstawia stronę 15 sekund później po zaznaczeniu kontrolki Czasomierz, a element UpdatePanel został odświeżony, aby wyświetlić informacje o nowym produkcie.
Rysunek 06. Losowo wybrany produkt jest wyświetlany podczas ładowania strony (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 07. Co 15 sekund zostanie wyświetlony nowy losowo wybrany produkt (kliknij, aby wyświetlić obraz pełnowymiarowy)
Krok 3. Używanie kontrolki ScriptManagerProxy
Oprócz dołączania niezbędnego skryptu dla biblioteki klienta platformy ASP.NET AJAX menedżer skryptów może również rejestrować niestandardowe pliki JavaScript, odwołania do usług sieci Web z obsługą skryptów oraz niestandardowe uwierzytelnianie, autoryzację i usługi profilów. Zazwyczaj takie dostosowania są specyficzne dla określonej strony. Jeśli jednak do plików skryptów niestandardowych, odwołań do usługi sieci Web lub uwierzytelniania, autoryzacji lub profilów przywoływali się usługi ScriptManager na stronie wzorcowej, zostaną one dołączone do wszystkich stron w witrynie internetowej.
Aby dodać dostosowania związane ze skryptem ScriptManager na podstawie strony, użyj kontrolki ScriptManagerProxy. Możesz dodać element ScriptManagerProxy do strony zawartości, a następnie zarejestrować niestandardowy plik JavaScript, odwołanie do usługi sieci Web lub uwierzytelnianie, autoryzację lub usługę profilu z poziomu narzędzia ScriptManagerProxy; Ma to wpływ na zarejestrowanie tych usług dla określonej strony zawartości.
Uwaga
Strona ASP.NET może zawierać tylko nie więcej niż jedną kontrolkę ScriptManager. W związku z tym nie można dodać kontrolki ScriptManager do strony zawartości, jeśli kontrolka ScriptManager jest już zdefiniowana na stronie wzorcowej. Jedynym celem skryptu ScriptManagerProxy jest zapewnienie deweloperom sposobu definiowania elementu ScriptManager na stronie wzorcowej, ale nadal ma możliwość dodawania dostosowań ScriptManager na podstawie strony po stronie.
Aby wyświetlić kontrolkę ScriptManagerProxy w akcji, rozszerzmy element UpdatePanel, ShowRandomProduct.aspx aby dołączyć przycisk, który używa skryptu po stronie klienta do wstrzymania lub wznowienia kontrolki Czasomierz. Kontrolka Czasomierz ma trzy metody po stronie klienta, których możemy użyć do osiągnięcia tej żądanej funkcjonalności:
_startTimer()— uruchamia kontrolkę czasomierza_raiseTick()- powoduje, że kontrolka czasomierza ma wartość "tick", tym samym publikując z powrotem i podnosząc swojeTickzdarzenie na serwerze_stopTimer()— zatrzymuje kontrolkę czasomierza
Utwórzmy plik JavaScript o zmiennej o nazwie i funkcji o nazwie timerEnabledToggleTimer. Zmienna wskazuje, czy kontrolka timerEnabled czasomierza jest obecnie włączona, czy wyłączona; domyślnie ma wartość true. Funkcja ToggleTimer akceptuje dwa parametry wejściowe: odwołanie do przycisku Wstrzymaj/wznawiania i wartość po stronie id klienta kontrolki Czasomierz. Ta funkcja przełącza wartość timerEnabled, pobiera odwołanie do kontrolki Czasomierz, uruchamia lub zatrzymuje czasomierz (w zależności od wartości timerEnabled), a następnie aktualizuje tekst wyświetlany przycisku na "Wstrzymaj" lub "Wznów". Ta funkcja będzie wywoływana za każdym razem, gdy zostanie kliknięta przycisk Wstrzymaj/Wznawianie.
Zacznij od utworzenia nowego folderu w witrynie internetowej o nazwie Scripts. Następnie dodaj nowy plik do folderu Scripts o nazwie TimerScript.js type JScript File (Plik JScript).
Rysunek 08. Dodawanie nowego pliku JavaScript do Scripts folderu (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 09. Dodano nowy plik JavaScript do witryny internetowej (kliknij, aby wyświetlić obraz pełnowymiarowy)
Następnie dodaj następujący skrypt scrip do pliku TimerScript.js:
var timerEnabled = true;
function ToggleTimer(btn, timerID)
{
// Toggle the timer enabled state
timerEnabled = !timerEnabled;
// Get a reference to the Timer
var timer = $find(timerID);
if (timerEnabled)
{
// Start timer
timer._startTimer();
// Immediately raise a tick
timer._raiseTick();
btn.value = 'Pause';
}
else
{
// Stop timer
timer._stopTimer();
btn.value = 'Resume';
}
}
Teraz musimy zarejestrować ten niestandardowy plik JavaScript w pliku ShowRandomProduct.aspx. Wróć do ShowRandomProduct.aspx i dodaj kontrolkę ScriptManagerProxy do strony; ustaw jej ID wartość na MyManagerProxy. Aby zarejestrować niestandardowy plik JavaScript, wybierz kontrolkę ScriptManagerProxy w Projektant, a następnie przejdź do okno Właściwości. Jedną z właściwości jest zatytułowany Skrypty. Wybranie tej właściwości powoduje wyświetlenie kolekcji ScriptReference Collection Redaktor pokazanych na rysunku 10. Kliknij przycisk Dodaj, aby dołączyć nowe odwołanie do skryptu, a następnie wprowadź ścieżkę do pliku skryptu we właściwości Path: ~/Scripts/TimerScript.js.
Rysunek 10. Dodawanie odwołania do skryptu do kontrolki ScriptManagerProxy (kliknij, aby wyświetlić obraz pełnowymiarowy)
Po dodaniu skryptu odwołującego się do znacznika deklaratywnego kontrolki ScriptManagerProxy zostanie zaktualizowany w celu uwzględnienia <Scripts> kolekcji z pojedynczym ScriptReference wpisem, jak pokazano w poniższym fragmencie kodu znaczników:
<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/TimerScript.js" />
</Scripts>
</asp:ScriptManagerProxy>
Wpis ScriptReference instruuje scriptManagerProxy dołączenie odwołania do pliku JavaScript w renderowanych znacznikach. Oznacza to, że zarejestrowanie skryptu niestandardowego w elemecie ScriptManagerProxy ShowRandomProduct.aspx renderowane dane wyjściowe strony zawiera teraz inny <script src="url"></script> tag: <script src="Scripts/TimerScript.js" type="text/javascript"></script>.
Teraz możemy wywołać funkcję zdefiniowaną ToggleTimer na TimerScript.js podstawie skryptu klienta na ShowRandomProduct.aspx stronie. Dodaj następujący kod HTML w elemecie UpdatePanel:
<input type="button" id="PauseResumeButton"
value="Pause"
onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />
Spowoduje to wyświetlenie przycisku z tekstem "Wstrzymaj". Za każdym razem, gdy zostanie kliknięta, wywoływana jest funkcja ToggleTimer JavaScript, przekazując odwołanie do przycisku i wartość identyfikatora kontrolki Czasomierz (ProductTimer). Zanotuj składnię id uzyskiwania wartości kontrolki Czasomierz. <%=ProductTimer.ClientID%> emituje wartość ProductTimer właściwości kontrolki czasomierza ClientID . W samouczku Nazewnictwo identyfikatora kontrolki na stronach zawartości omówiliśmy różnice między wartością po stronie serwera a wynikową wartością po stronie klienta id oraz sposobem ClientID zwracania wartości po stronie IDidklienta.
Rysunek 11 przedstawia tę stronę podczas pierwszej wizyty w przeglądarce. Czasomierz jest obecnie uruchomiony i aktualizuje wyświetlane informacje o produkcie co 15 sekund. Rysunek 12 przedstawia ekran po kliknięciu przycisku Wstrzymaj. Kliknięcie przycisku Wstrzymaj powoduje zatrzymanie czasomierza i zaktualizowanie tekstu przycisku do "Wznów". Informacje o produkcie będą odświeżane (i będą odświeżane co 15 sekund), gdy użytkownik kliknie przycisk Wznów.
Rysunek 11. Kliknij przycisk Wstrzymaj, aby zatrzymać kontrolkę czasomierza (kliknij, aby wyświetlić obraz pełnowymiarowy)
Rysunek 12. Kliknij przycisk Wznów, aby ponownie uruchomić czasomierz (kliknij, aby wyświetlić obraz o pełnym rozmiarze)
Podsumowanie
Podczas tworzenia aplikacji internetowych z obsługą AJAX przy użyciu platformy ASP.NET AJAX konieczne jest, aby każda strona internetowa z obsługą AJAX zawierała kontrolkę ScriptManager. Aby ułatwić ten proces, możemy dodać element ScriptManager do strony wzorcowej zamiast pamiętać o dodaniu elementu ScriptManager do każdej i każdej strony zawartości. Krok 1 pokazał, jak dodać element ScriptManager do strony wzorcowej, podczas gdy krok 2 spojrzał na implementację funkcji AJAX na stronie zawartości.
Jeśli musisz dodać skrypty niestandardowe, odwołania do usług sieci Web z obsługą skryptów lub dostosowane uwierzytelnianie, autoryzację lub usługi profilowe do określonej strony zawartości, dodaj kontrolkę ScriptManagerProxy do strony zawartości, a następnie skonfiguruj tam dostosowania. Krok 3 zbadał, jak za pomocą elementu ScriptManagerProxy zarejestrować niestandardowy plik JavaScript na określonej stronie zawartości.
Szczęśliwe programowanie!
Dalsze informacje
Aby uzyskać więcej informacji na temat tematów omówionych w tym samouczku, zapoznaj się z następującymi zasobami:
- ASP.NET AJAX Framework
- ASP.NET samouczki AJAX
- ASP.NET wideo AJAX
- Tworzenie interakcyjnego interfejsu użytkownika za pomocą usługi Microsoft ASP.NET AJAX
- Używanie identyfikatora NEWID do losowego sortowania rekordów
- Używanie kontrolki czasomierza
Informacje o autorze
Scott Mitchell, autor wielu książek ASP/ASP.NET i założyciel 4GuysFromRolla.com, współpracuje z technologiami internetowymi firmy Microsoft od 1998 roku. Scott pracuje jako niezależny konsultant, trener i pisarz. Jego najnowsza książka to Sams Teach Yourself ASP.NET 3,5 w ciągu 24 godzin. Scott można dotrzeć pod mitchell@4GuysFromRolla.com adresem lub za pośrednictwem swojego bloga pod adresem http://ScottOnWriting.NET.
Specjalne podziękowania
Ta seria samouczków została przejrzyona przez wielu przydatnych recenzentów. Chcesz przejrzeć nadchodzące artykuły MSDN? Jeśli tak, upuść mi linię na mitchell@4GuysFromRolla.com
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