Ana Sayfalar ve ASP.NET AJAX (VB)

Scott Mitchell tarafından

Kodu indirin veya PDF 'yi indirin

ASP.NET AJAX ve ana sayfaları kullanma seçeneklerini açıklar. ScriptManagerProxy sınıfını kullanmaya bakar; ScriptManager 'ın ana sayfa veya Içerik sayfasında kullanılıp kullanılmadığını bağlı olarak çeşitli JS dosyalarının nasıl yüklendiğini açıklar.

Giriş

Son birkaç yılda daha fazla geliştirici, AJAX özellikli Web uygulamaları oluşturuyor. AJAX özellikli bir Web sitesi, daha hızlı bir kullanıcı deneyimi sunmak için bir dizi ilgili Web teknolojisini kullanır. Microsoft 'un ASP.NET AJAX çerçevesi sayesinde, AJAX etkin ASP.NET uygulamaları oluşturma işlemi çok kolay başaramayabiliriz. ASP.NET AJAX, ASP.NET 3,5 ve Visual Studio 2008 ' de yerleşiktir; Ayrıca, ASP.NET 2,0 uygulamaları için ayrı bir indirme olarak da kullanılabilir.

ASP.NET AJAX çerçevesiyle AJAX özellikli Web sayfaları oluştururken, çerçeveyi kullanan her sayfaya ve tam olarak bir ScriptManager denetimi eklemeniz gerekir. Adından da anlaşılacağı gibi, ScriptManager, AJAX etkin Web sayfalarında kullanılan istemci tarafı betiğini yönetir. ScriptManager, en azından, tarayıcıya ASP.NET AJAX Istemci kitaplığını oluşturan JavaScript dosyalarını indirmesini sağlayan HTML 'yi yayar. Özel JavaScript dosyaları, komut dosyası etkin Web Hizmetleri ve özel uygulama hizmeti işlevlerini kaydetmek için de kullanılabilir.

Siteniz ana sayfaları kullanıyorsa (olduğu gibi), her bir tek içerik sayfasına bir ScriptManager denetimi eklemeniz gerekmez; Bunun yerine, ana sayfaya bir ScriptManager denetimi ekleyebilirsiniz. Bu öğretici, ScriptManager denetiminin ana sayfaya nasıl ekleneceğini gösterir. Ayrıca, belirli bir içerik sayfasında özel komut dosyaları ve betik Hizmetleri kaydetmek için ScriptManagerProxy denetimini nasıl kullanacağınızı da arar.

Note

Bu öğretici, ASP.NET AJAX çerçevesiyle AJAX özellikli Web uygulamaları tasarlamayı veya oluşturmayı araştırmaz. AJAX kullanımı hakkında daha fazla bilgi için, Bu öğreticinin sonundaki ASP.NET AJAX Videoları ve öğreticilerine ve daha fazla okuma bölümünde listelenen kaynaklara bakın.

ScriptManager denetimi tarafından yayılan biçimlendirmeyi İnceleme

ScriptManager denetimi, tarayıcıya ASP.NET AJAX Istemci kitaplığını oluşturan JavaScript dosyalarını indirmesini sağlayan biçimlendirmeyi yayar. Ayrıca, bu kitaplığı Başlatan sayfaya satır içi JavaScript bir bit ekler. Aşağıdaki biçimlendirmede, ScriptManager denetimi içeren bir sayfanın işlenmiş çıktısına eklenen içerik gösterilmektedir:

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

<script src="url"></script> Etiketler, tarayıcıya JavaScript dosyasını URL'de indirip yürütmeye yönlendirir. ScriptManager üç tür etiket yayar; tek bir dosyaya başvuru WebResource.axd, diğeri dosyanın ScriptResource.axdbaşvurudur. Bu dosyalar aslında web sitenizde dosya olarak mevcut değildir. Bunun yerine, bu dosyalardan birine yönelik bir istek Web sunucusuna ulaştığında, ASP.NET altyapısı QueryString 'i inceler ve uygun JavaScript içeriğini döndürür. Bu üç dış JavaScript dosyası tarafından sunulan betik, ASP.NET AJAX Framework 'ün Istemci kitaplığını oluşturur. ScriptManager tarafından yayılan diğer <script> etiketleri, bu kitaplığı Başlatan satır içi betik içerir.

ScriptManager tarafından yayılan dış betik başvuruları ve satır içi betik, ASP.NET AJAX çerçevesini kullanan bir sayfa için gereklidir, ancak Framework kullanmayan sayfalar için gerekli değildir. Bu nedenle, ASP.NET AJAX çerçevesini kullanan sayfalara yalnızca bir ScriptManager eklemek için ideal olmasının bir nedeni olabilir. Bu da yeterlidir, ancak çerçeveyi kullanan çok sayıda sayfanız varsa, en az bir tane olmak üzere tüm sayfalara ScriptManager denetimini (yinelenen bir görev) ekleyebilirsiniz. Alternatif olarak, ana sayfaya bir ScriptManager ekleyebilirsiniz ve bu gerekli betiği tüm içerik sayfalarına çıkartır. Bu yaklaşımda, zaten ana sayfa tarafından eklendiğinden, ASP.NET AJAX çerçevesini kullanan yeni bir sayfaya bir ScriptManager eklemek zorunda değilsiniz. 1. adım, ana sayfaya bir ScriptManager ekleme konusunda adım adım yol gösterir.

Note

Ana sayfanızın kullanıcı arabirimi içinde AJAX işlevselliği eklemeyi planlıyorsanız, ana sayfada ScriptManager ' ı dahil etmeniz gerekir.

ScriptManager 'ın ana sayfaya eklenmesinin bir alt tarafı, gerekli olup olmadığına bakılmaksızın yukarıdaki betiğin her sayfada yayılmalarından biridir. Bu, ScriptManager 'ın dahil olduğu sayfalar (Ana sayfa aracılığıyla) için henüz ASP.NET AJAX çerçevesinin herhangi bir özelliğini kullanmayın. Ancak ne kadar bant genişliği harcandınız?

  • ScriptManager tarafından yayılan gerçek içerik (yukarıda gösterilen) 1 KB 'tan fazla.
  • Ancak <script> öğesi tarafından başvurulan üç harici betik dosyası, sıkıştırılmamış yaklaşık 450KB veri içerir; gzip sıkıştırması kullanan bir Web sitesinde, bu toplam bant genişliği 100 KB 'ın yakınında azaltılabilir. Ancak, bu komut dosyaları bir yılda tarayıcı tarafından önbelleğe alınır, yani yalnızca bir kez indirilmeleri ve sonra sitedeki diğer sayfalarda yeniden kullanılabilir.

En iyi durumda, betik dosyaları önbelleğe alındığında toplam maliyet 1 KB 'tır ve bu da yok edilebilir. Ancak, betik dosyaları henüz indirilmedi ve Web sunucusu herhangi bir sıkıştırma biçimini kullanmadıysa, en kötü durumda, bant genişliği isabetinin 450KB 'den büyük olması ve bir geniş bant bağlantısı üzerinden bir saniyeden Çevirmeli modemler üzerinde kullanıcılar. Her ne kadar iyi haber, dış betik dosyaları tarayıcı tarafından önbelleğe alındığından, bu en kötü durum senaryosu nadiren meydana gelir.

Note

ScriptManager denetimini ana sayfaya yerleştirmeye devam ediyorsanız, Web formunu (ana sayfada <form runat="server"> biçimlendirme) göz önünde bulundurun. Geri gönderme modelini kullanan her ASP.NET sayfası, tam olarak bir Web formu içermelidir. Web formu eklemek ek içerik ekler: bir dizi gizli form alanı, <form> etiketinin kendisi ve gerekirse, betikten geri gönderme başlatmak için bir JavaScript işlevi. Bu biçimlendirme geri gönderme olmayan sayfalar için gereksizdir. Bu yabancı biçimlendirme, Web formunu ana sayfadan kaldırarak ve bir tane olması gereken her bir içerik sayfasına el ile ekleyerek ortadan kaldırılabilir. Ancak, ana sayfada Web formunu kullanmanın avantajları, belirli içerik sayfalarına gereksiz yere eklenmesinin olumsuz yönlerini ortadan

1. Adım: Ana sayfaya ScriptManager denetimi ekleme

ASP.NET AJAX çerçevesini kullanan her Web sayfasında tam olarak bir ScriptManager denetimi bulunmalıdır. Bu gereksinim nedeniyle, genellikle tüm içerik sayfalarında ScriptManager denetimi otomatik olarak dahil olmak üzere ana sayfaya tek bir ScriptManager denetimi yerleştirmek mantıklı olur. Ayrıca, ScriptManager, UpdatePanel ve UpdateProgress denetimleri gibi ASP.NET AJAX sunucu denetimlerinden önce gelmelidir. Bu nedenle, ScriptManager 'ı Web formu içindeki herhangi bir ContentPlaceHolder denetimine koymak en iyisidir.

Site.master ana sayfasını açın ve Web formu içindeki sayfaya, ancak <div id="topContent"> öğesinden önce bir ScriptManager denetimi ekleyin (bkz. Şekil 1). Visual Web Developer 2008 veya Visual Studio 2008 kullanıyorsanız, ScriptManager denetimi, AJAX uzantıları sekmesindeki araç kutusunda bulunur. Visual Studio 2005 kullanıyorsanız, önce ASP.NET AJAX çerçevesini yüklemeniz ve denetimleri araç kutusuna eklemeniz gerekir. ASP.NET 2,0 için Framework 'ü almak üzere ASP.NET AJAX indirme sayfasını ziyaret edin.

ScriptManager 'ı sayfaya ekledikten sonra, ID ScriptManager1 olan MyManagerolarak değiştirin.

ScriptManager 'ı ana sayfaya eklemek

Şekil 01: ScriptManager 'ı ana sayfaya ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)

2. Adım: bir Içerik sayfasından ASP.NET AJAX çerçevesini kullanma

ScriptManager denetimi ana sayfaya eklendiğinde, artık herhangi bir içerik sayfasına ASP.NET AJAX Framework işlevselliği ekleyebiliriz. Northwind veritabanından rastgele seçilmiş bir ürünü görüntüleyen yeni bir ASP.NET sayfası oluşturalım. Bu görüntülemeyi her 15 saniyede bir, yeni bir ürün göstererek güncelleştirmek için ASP.NET AJAX Framework Zamanlayıcı denetimini kullanacağız.

ShowRandomProduct.aspxadlı kök dizinde yeni bir sayfa oluşturarak başlayın. Bu yeni sayfayı Site.master ana sayfasına bağlamayı unutmayın.

Web sitesine yeni bir ASP.NET sayfası eklemek

Şekil 02: Web sitesine yeni bir ASP.NET sayfası ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)

Ana sayfada başlık, meta etiketler ve diğer HTML üst bilgilerini belirtme [SKM1] öğreticide, açıkça ayarlanmamışsa sayfanın başlığını oluşturan BasePage adlı özel bir temel sayfa sınıfı oluşturduk. ShowRandomProduct.aspx sayfanın arka plan kod sınıfına gidin ve BasePage türetebilirsiniz (System.Web.UI.Pageyerine).

Son olarak, Web.sitemap dosyasını bu ders için bir giriş içerecek şekilde güncelleştirin. Ana Içerik sayfası etkileşim dersi için <siteMapNode> altına aşağıdaki biçimlendirmeyi ekleyin:

<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />

Bu <siteMapNode> öğesinin eklenmesi dersler listesinde yansıtılır (bkz. Şekil 5).

Rastgele seçili bir ürünü görüntüleme

ShowRandomProduct.aspxdön. Tasarımcıdan bir UpdatePanel denetimini araç kutusundan MainContent Içerik denetimine sürükleyin ve ID özelliğini ProductPanelolarak ayarlayın. UpdatePanel, ekranda kısmi sayfa geri gönderme yoluyla, zaman uyumsuz olarak güncelleştirilebilen bir bölgeyi temsil eder.

İlk göreviniz, UpdatePanel içinde rastgele seçilmiş bir ürünle ilgili bilgileri görüntülemektir. Bir DetailsView denetimini UpdatePanel 'a sürükleyerek başlayın. DetailsView denetiminin ID özelliğini ProductInfo olarak ayarlayın ve Height ve Width özelliklerini temizleyin. DetailsView 'un akıllı etiketini genişletin ve veri kaynağı seç açılan listesinden DetailsView ' ı RandomProductDataSourceadlı yeni bir SqlDataSource denetimine bağlamayı seçin.

DetailsView öğesini yeni bir SqlDataSource denetimine bağlama

Şekil 03: DetailsView 'ı yeni bir SqlDataSource denetimine bağlama (tam boyutlu görüntüyü görüntülemek için tıklayın)

SqlDataSource denetimini Northwind NorthwindConnectionString veritabanına bağlanmak için yapılandırın (Içerik sayfasından ana sayfa ile etkileşim kurma bölümünde oluşturduğumuz [SKM2] öğreticisi). SELECT ifadesini yapılandırırken özel bir SQL ifadesini belirtmeyi seçin ve ardından aşağıdaki sorguyu girin:

SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()

SELECT yan tümcesindeki TOP 1 anahtar sözcüğü yalnızca sorgu tarafından döndürülen ilk kaydı döndürür. NEWID() işlevi, yeni bir genel benzersiz tanımlayıcı değeri (GUID) oluşturur ve tablonun kayıtlarını rastgele bir sırada döndürmek için bir ORDER BY yan tümcesinde kullanılabilir.

SqlDataSource 'ı tek ve rastgele seçilmiş bir kayıt döndürecek şekilde yapılandırın

Şekil 04: SqlDataSource 'yi tek ve rastgele seçilmiş bir kayıt döndürecek şekilde yapılandırın (tam boyutlu görüntüyü görüntülemek için tıklayın)

Sihirbazı tamamladıktan sonra, Visual Studio yukarıdaki sorgu tarafından döndürülen iki sütun için bir BoundField oluşturur. Bu noktada sayfanızın bildirime dayalı biçimlendirmesi aşağıdakine benzer görünmelidir:

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

Şekil 5 ' te bir tarayıcıdan görüntülendiklerinde ShowRandomProduct.aspx sayfası gösterilmektedir. Sayfayı yeniden yüklemek için tarayıcınızın yenileme düğmesine tıklayın; Rastgele seçilen yeni bir kayıt için ProductName ve UnitPrice değerlerini görmeniz gerekir.

Rastgele bir ürünün adı ve fiyat görüntülenir

Şekil 05: rastgele bir ürünün adı ve fiyatı görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

Her 15 saniyede bir yeni ürün otomatik olarak görüntüleniyor

ASP.NET AJAX Framework, belirli bir zamanda geri gönderme gerçekleştiren bir zamanlayıcı denetimi içerir; geri göndermede, zamanlayıcının Tick olayı tetiklenir. Zamanlayıcı denetimi bir UpdatePanel içine yerleştirilirse, kısmen bir sayfa geri gönderme tetikleyip, yeni bir rastgele seçili ürünü göstermek üzere verileri DetailsView 'a yeniden bağlayabilirsiniz.

Bunu gerçekleştirmek için, araç kutusundan bir Zamanlayıcı sürükleyin ve UpdatePanel 'a bırakın. Zamanlayıcının ID Timer1 olan ProductTimer ve Interval özelliği 60000 ' den 15000 ' e değiştirin. Interval özelliği, geri göndermeler arasındaki milisaniye sayısını belirtir; Bunu 15000 olarak ayarlamak, zamanlayıcının 15 saniyede bir kısmi sayfa geri gönderme tetiklemesine neden olur. Bu noktada zamanlayıcının bildirim temelli biçimlendirmesi aşağıdakine benzer görünmelidir:

<asp:UpdatePanel ID="ProductPanel" runat="server" onload="ProductPanel_Load">
 <ContentTemplate>
 ...

 <asp:Timer ID="ProductTimer" runat="server" Interval="15000">
 </asp:Timer>
 </ContentTemplate>
</asp:UpdatePanel>

Zamanlayıcının Tick olayı için bir olay işleyicisi oluşturun. Bu olay işleyicisinde, DetailsView 'un DataBind yöntemini çağırarak verileri DetailsView 'a yeniden bağlamanız gerekir. Bunun yapılması, DetailsView 'un verileri veri kaynağı denetiminden yeniden almasına izin verir. Bu, yeni bir rastgele seçilmiş kayıt (tarayıcının Yenile düğmesine tıklayarak sayfayı yeniden yüklerken olduğu gibi) seçer ve görüntüler.

Protected Sub ProductTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductTimer.Tick
 ProductInfo.DataBind()
End Sub

İşte bu kadar kolay! Sayfayı bir tarayıcı aracılığıyla yeniden ziyaret edin. Başlangıçta, rastgele bir ürünün bilgileri görüntülenir. Ekranı gönderdikten sonra, 15 saniye sonra, yeni bir ürün ile ilgili bilgilerin mevcut ekranın yerini aldığını fark edersiniz.

Burada neler olduğunu daha iyi görmek için, denetimin son güncelleştirilme süresini gösteren bir etiket denetimi ekleyelim. UpdatePanel içinde bir etiket Web denetimi ekleyin, ID LastUpdateTimeolarak ayarlayın ve Text özelliğini temizleyin. Ardından, UpdatePanel 'ın Load olayı için bir olay işleyicisi oluşturun ve etikette geçerli saati görüntüleyin. (UpdatePanel 'ın Load olayı her tam veya kısmi sayfa geri göndermede tetiklenir.)

Protected Sub ProductPanel_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductPanel.Load
 LastUpdateTime.Text = "Last updated at " & DateTime.Now.ToLongTimeString()
End Sub

Bu değişiklik tamamlandıktan sonra sayfa, o sırada görüntülenen ürünün yüklendiği saati içerir. Şekil 6 ilk kez ziyaret edildiğinde sayfayı gösterir. Şekil 7 ' de zamanlayıcı denetimi "ele alındıktan sonra 15 saniye" ve yeni bir ürünle ilgili bilgileri göstermek için UpdatePanel yenilendikten sonra sayfa görüntülenir.

Rastgele seçilmiş bir ürün sayfa yükleme sırasında görüntülenir

Şekil 06: sayfa yükleme üzerinde rastgele seçilmiş bir ürün görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

Rastgele seçilen yeni bir ürün görüntülenirken 15 saniyede bir

Şekil 07: 15 saniyede bir rastgele seçilen yeni bir ürün görüntülenir (tam boyutlu görüntüyü görüntülemek için tıklayın)

3. Adım: ScriptManagerProxy denetimini kullanma

ScriptManager, ASP.NET AJAX Framework Istemci kitaplığı için gerekli betiği dahil etme ile birlikte özel JavaScript dosyalarını, betik etkin Web hizmetlerine başvuruları ve özel kimlik doğrulama, yetkilendirme ve profil hizmetlerini de kaydedebilir. Genellikle bu özelleştirmeler belirli bir sayfaya özeldir. Ancak, Özel Betik dosyalarına, Web hizmeti başvurularına veya kimlik doğrulama, yetkilendirme veya profil hizmetlerine ana sayfadaki ScriptManager 'da başvuruluyorsa, bunlar Web sitesinin tüm sayfalarına dahil edilir.

Sayfa temelinde ScriptManager ile ilgili özelleştirmeler eklemek için ScriptManagerProxy denetimini kullanın. Bir içerik sayfasına ScriptManagerProxy ekleyebilir ve ardından özel JavaScript dosyasını, Web hizmeti başvurusunu veya kimlik doğrulama, yetkilendirme ya da profil hizmetini ScriptManagerProxy üzerinden kaydedebilirsiniz; Bu, belirli içerik sayfası için bu hizmetleri kaydetmenin etkisine sahiptir.

Note

Bir ASP.NET sayfasında yalnızca birden fazla ScriptManager denetimi bulunabilir. Bu nedenle, ScriptManager denetimi ana sayfada zaten tanımlanmışsa bir içerik sayfasına ScriptManager denetimi ekleyemezsiniz. ScriptManagerProxy 'nin tek amacı, geliştiricilerin ana sayfada ScriptManager 'ı tanımlamak için bir yol sağlamaktır, ancak yine de sayfa temelinde ScriptManager özelleştirmeleri ekleme olanağına sahiptir.

ScriptManagerProxy denetimini çalışırken görmek için ShowRandomProduct.aspx içindeki UpdatePanel 'ı, Zamanlayıcı denetimini duraklatmak veya devam ettirmeye yönelik istemci tarafı komut dosyası kullanan bir düğme içerecek şekilde kullanalım. Zamanlayıcı denetiminde, istenen işlevselliğe ulaşmak için kullandığımız üç istemci tarafı yöntemi vardır:

  • _startTimer()-Zamanlayıcı denetimini başlatır
  • _raiseTick()-süreölçer denetiminin "Tick" olmasına neden olur, bu nedenle sunucuya yeniden gönderme ve Tick olayını sunucu üzerinde oluşturma
  • _stopTimer()-Zamanlayıcı denetimini durduruyor

timerEnabled adlı bir değişkenle ve ToggleTimeradlı bir işlevle bir JavaScript dosyası oluşturalım. timerEnabled değişkeni Zamanlayıcı denetiminin etkin mi yoksa devre dışı mı olduğunu gösterir; Varsayılan olarak true değerini alır. ToggleTimer işlevi iki giriş parametresini kabul eder: DURATION/Resume düğmesine ve Zamanlayıcı denetiminin istemci tarafı id değerine bir başvuru. Bu işlev, timerEnableddeğerini değiştirir, Zamanlayıcı denetimine bir başvuru alır, süreölçeri başlatır veya sonlandırır (timerEnableddeğerine bağlı olarak) ve düğmenin görüntü metnini "Duraklat" veya "devam" olarak güncelleştirir. Bu işlev, duraklatma/Resume düğmesine tıklandığında çağrılır.

Scriptsadlı Web sitesinde yeni bir klasör oluşturarak başlayın. Ardından, JScript dosyası türünde TimerScript.js adlı betikler klasörüne yeni bir dosya ekleyin.

Scripts klasörüne yeni bir JavaScript dosyası ekleyin

Şekil 08: Scripts klasöre yeni bir JavaScript dosyası ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)

Web sitesine yeni bir JavaScript dosyası eklenmiştir

Şekil 09: Web sitesine yeni bir JavaScript dosyası eklenmiştir (tam boyutlu görüntüyü görüntülemek için tıklayın)

Sonra, TimerScript.js dosyasına aşağıdaki ' yi ekleyin:

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';
    }
}

Şimdi bu özel JavaScript dosyasını ShowRandomProduct.aspxkaydetmeniz gerekir. ShowRandomProduct.aspx dönün ve sayfaya bir ScriptManagerProxy denetimi ekleyin; ID MyManagerProxyolarak ayarlayın. Özel bir JavaScript dosyasını kaydetmek için tasarımcıda ScriptManagerProxy denetimini seçip Özellikler penceresi gidin. Özelliklerden biri komut dosyaları olarak adlandırılmış. Bu özelliğin belirlenmesi, Şekil 10 ' da gösterilen ScriptReference koleksiyon düzenleyicisini görüntüler. Yeni bir betik başvurusu eklemek için Ekle düğmesine tıklayın ve ardından yol özelliğindeki betik dosyasının yolunu girin: ~/Scripts/TimerScript.js.

ScriptManagerProxy denetimine betik başvurusu ekleme

Şekil 10: ScriptManagerProxy denetimine bir betik başvurusu ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)

Komut dosyası başvurusunu ekledikten sonra, aşağıdaki biçimlendirme kod parçacığında gösterildiği gibi, ScriptManagerProxy denetiminin bildirime dayalı biçimlendirmesi, tek bir ScriptReference girişi ile bir <Scripts> koleksiyonu içerecek şekilde güncelleştirilir:

<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
 <Scripts>
 <asp:ScriptReference Path="~/Scripts/TimerScript.js" />
 </Scripts>
</asp:ScriptManagerProxy>

ScriptReference girişi, ScriptManagerProxy öğesine, işlenen biçimlendirmesinde JavaScript dosyasına bir başvuru ekler. Diğer bir deyişle, komut dosyasını ScriptManagerProxy dosyasına kaydederek ShowRandomProduct.aspx sayfanın işlenmiş çıktısı artık başka bir <script src="url"></script> etiketi içerir: <script src="Scripts/TimerScript.js" type="text/javascript"></script>.

Artık ShowRandomProduct.aspx sayfasındaki istemci betiğinden TimerScript.js tanımlanan ToggleTimer işlevini çağırabiliriz. Aşağıdaki HTML 'yi UpdatePanel içine ekleyin:

<input type="button" id="PauseResumeButton" 
    value="Pause" 
    onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />

Bu, "pause" metnini içeren bir düğme görüntüler. Her tıklandığında JavaScript işlevi ToggleTimer çağrılır, düğmeye bir başvuru ve Zamanlayıcı denetiminin id değeri (ProductTimer) geçer. Zamanlayıcı denetiminin id değerini elde etmek için söz dizimini aklınızda edin. <%=ProductTimer.ClientID%>, ProductTimer Zamanlayıcı denetiminin ClientID özelliğinin değerini yayar. Içerik sayfalarında denetim KIMLIĞI adlandırma [SKM3] öğreticisi, sunucu tarafı ID değeri ile elde edilen istemci tarafı id değeri arasındaki farkları ve ClientID istemci tarafı idnasıl döndürdüğünü tartıştık.

Şekil 11 ' de bir tarayıcıdan ilk kez ziyaret edildiğinde Bu sayfa gösterilir. Süreölçer Şu anda çalışıyor ve görüntülenen ürün bilgilerini 15 saniyede bir güncelleştirir. Şekil 12 Duraklat düğmesine tıklandıktan sonra ekranı gösterir. Duraklat düğmesine tıklamak süreölçeri sonlandırır ve düğmenin metnini "devam" olarak güncelleştirir. Kullanıcı Sürdür ' e tıkladıktan sonra ürün bilgileri yenilenir (ve 15 saniyede bir yenilemeye devam eder).

süreölçer denetimini durdurmak için Duraklat düğmesine tıklayın

Şekil 11: süreölçer denetimini durdurmak Için Duraklat düğmesine tıklayın (tam boyutlu görüntüyü görüntülemek için tıklayın)

zamanlayıcıyı yeniden başlatmak için geri dön düğmesine tıklayın

Şekil 12: zamanlayıcıyı yeniden başlatmak Için sürdürür düğmesine tıklayın (tam boyutlu görüntüyü görüntülemek için tıklayın)

Özet

ASP.NET AJAX çerçevesini kullanarak AJAX etkin Web uygulamaları oluştururken, her AJAX etkin Web sayfasının bir ScriptManager denetimi içermesi zorunludur. Bu işlemi kolaylaştırmak için, her bir içerik sayfasına bir ScriptManager eklemek yerine ana sayfaya bir ScriptManager ekleyebiliriz. 1. adım, bir içerik sayfasında AJAX işlevselliğini uygulama bölümünde 2. adım arandığında, ScriptManager 'ın ana sayfaya nasıl ekleneceğini gösterdi.

Belirli bir içerik sayfasına özel betikler, betik etkin Web hizmetlerine başvurular veya özelleştirilmiş kimlik doğrulama, yetkilendirme ya da profil hizmetleri eklemeniz gerekiyorsa, içerik sayfasına bir ScriptManagerProxy denetimi ekleyin ve ardından şunu yapılandırın özelleştirmeler burada. 3. adım özel bir JavaScript dosyasını belirli bir içerik sayfasında kaydetmek için ScriptManagerProxy 'nin nasıl kullanılacağını inceledi.

Programlamanın kutlu olsun!

Daha Fazla Bilgi

Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

Yazar hakkında

Birden çok ASP/ASP. NET Books ve 4GuysFromRolla.com 'in yazarı Scott Mitchell, 1998 sürümünden bu yana Microsoft Web teknolojileriyle birlikte çalışıyor. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor. En son kitabı, 24 saat içinde ASP.NET 3,5 kendi kendinize eğitimister. Scott 'a mitchell@4GuysFromRolla.com veya blogundan http://ScottOnWriting.NETüzerinden erişilebilir.

Özel olarak teşekkürler

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz? Öyleyse, beni mitchell@4GuysFromRolla.com bir satır bırakın