Ana Sayfalar ve ASP.NET AJAX (VB)
tarafından Scott Mitchell
ASP.NET AJAX ve ana sayfaları kullanma seçeneklerini açıklar. ScriptManagerProxy sınıfını kullanmaya bakar; ScriptManager'ın Ana sayfada mı yoksa İçerik sayfasında mı kullanıldığına bağlı olarak çeşitli JS dosyalarının nasıl yüklendiğini açıklar.
Giriş
Son birkaç yılda, giderek daha fazla geliştirici AJAX özellikli web uygulamaları oluşturuyordu. AJAX özellikli bir web sitesi, daha hızlı yanıt veren bir kullanıcı deneyimi sunmak için bir dizi ilgili web teknolojisini kullanır. Microsoft'un ASP.NET AJAX çerçevesi sayesinde AJAX özellikli ASP.NET uygulamaları oluşturmak inanılmaz derecede kolaydır. 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 tam olarak bir ScriptManager denetimi eklemeniz gerekir. Adından da anlaşılacağı gibi ScriptManager, AJAX özellikli web sayfalarında kullanılan istemci tarafı betiğini yönetir. ScriptManager en azından tarayıcıya AJAX İstemci Kitaplığı'nı makyajlayan JavaScript dosyalarını indirmesini sağlayan HTML ASP.NET. Özel JavaScript dosyalarını, betik özellikli web hizmetlerini ve özel uygulama hizmeti işlevselliğini kaydetmek için de kullanılabilir.
Sitenizde ana sayfalar kullanılıyorsa (olması gerektiği gibi), her içerik sayfasına bir ScriptManager denetimi eklemeniz gerekmez; bunun yerine, ana sayfaya bir ScriptManager denetimi ekleyebilirsiniz. Bu öğreticide ScriptManager denetiminin ana sayfaya nasıl ekleneceği gösterilmektedir. Ayrıca, özel betikleri ve betik hizmetlerini belirli bir içerik sayfasına kaydetmek için ScriptManagerProxy denetiminin nasıl kullanılacağını da ele alır.
Not
Bu öğretici, ASP.NET AJAX çerçevesiyle AJAX özellikli web uygulamaları tasarlamayı veya oluşturmayı keşfetmez. AJAX'ı kullanma hakkında daha fazla bilgi için ASP.NET AJAX videolarına ve öğreticilerine ve bu öğreticinin sonundaki Daha Fazla Okuma bölümünde listelenen kaynaklara bakın.
ScriptManager Denetimi Tarafından Yayılan İşaretlemenin incelenmesi
ScriptManager denetimi, tarayıcıya ASP.NET AJAX İstemci Kitaplığı'nı oluşturan JavaScript dosyalarını indirmesini belirten işaretlemeler yayar. Ayrıca bu kitaplığı başlatan sayfaya biraz satır içi JavaScript ekler. Aşağıdaki işaretleme, ScriptManager denetimi içeren bir sayfanın işlenmiş çıkışına eklenen içeriği gösterir:
<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>
Etiketler, <script src="url"></script> tarayıcıya URL'de JavaScript dosyasını indirmesini ve yürütmesini ister. ScriptManager bu tür üç etiket yayar; biri dosyasına WebResource.axd, diğeri ise dosyasına ScriptResource.axdbaşvurur. 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 sağlanan betik, AJAX çerçevesinin İstemci Kitaplığı'nın ASP.NET oluşturur. ScriptManager tarafından yayılan diğer <script> etiketler, bu kitaplığı başlatan satır içi betiği içerir.
ScriptManager tarafından gösterilen dış betik başvuruları ve satır içi betik, ASP.NET AJAX çerçevesini kullanan bir sayfa için gereklidir, ancak çerçeveyi kullanmayan sayfalar için gerekli değildir. Bu nedenle, yalnızca ASP.NET AJAX çerçevesini kullanan sayfalara ScriptManager eklemenin ideal olduğunu düşünebilirsiniz. Ve bu yeterlidir, ancak çerçeveyi kullanan birçok sayfanız varsa, scriptmanager denetimini tüm sayfalara eklersiniz; örneğin, yinelenen bir görev. Alternatif olarak, ana sayfaya bir ScriptManager ekleyebilir ve bu gerekli betiği tüm içerik sayfalarına ekleyebilirsiniz. Bu yaklaşımda, zaten ana sayfaya eklendiğinden, ASP.NET AJAX çerçevesini kullanan yeni bir sayfaya ScriptManager eklemeyi hatırlamanız gerekmez. 1. Adım, ana sayfaya ScriptManager ekleme adımlarını gösterir.
Not
Ana sayfanızın kullanıcı arabirimine AJAX işlevselliği eklemeyi planlıyorsanız, bu konuda başka seçeneğiniz yoktur; ScriptManager'ı ana sayfaya eklemeniz gerekir.
ScriptManager'ı ana sayfaya eklemenin bir dezavantajı, yukarıdaki betiğin gerekip gerekmediğine bakılmaksızın her sayfada yayılıyor olmasıdır. Bu, ScriptManager içeren (ana sayfa aracılığıyla) ancak ASP.NET AJAX çerçevesinin herhangi bir özelliğini kullanmayan sayfalar için bant genişliğinin harcanmasına yol açar. Ancak ne kadar bant genişliği boşa harcanıyor?
- ScriptManager tarafından (yukarıda gösterilen) gösterilen gerçek içerik toplam 1 KB'ın biraz üzerindedir.
- Ancak öğe tarafından
<script>başvuruda bulunılan üç dış betik dosyası kabaca 450 KB sıkıştırılmamış veriden oluşur; gzip sıkıştırması kullanan bir web sitesinde bu toplam bant genişliği 100 KB'a yakın bir oranda azaltılabilir. Ancak, bu betik dosyaları tarayıcı tarafından bir yıl boyunca önbelleğe alınır, yani yalnızca bir kez indirilmeleri gerekir ve daha sonra sitedeki diğer sayfalarda yeniden kullanılabilirler.
En iyi durumda, betik dosyaları önbelleğe alınırken toplam maliyet 1 KB olur ve bu göz ardı edilebilir. Ancak en kötü durumda, betik dosyaları henüz indirilmediğinde ve web sunucusu herhangi bir sıkıştırma biçimi kullanmadığında, bant genişliği isabeti 450 KB civarındadır ve bu da geniş bant bağlantısı üzerinden kullanıcılar için çevirmeli modemler üzerinden bir dakikaya kadar geniş bant bağlantısı üzerinden herhangi bir yeri ekleyebilir. İyi haber, dış betik dosyalarının tarayıcı tarafından önbelleğe alınmış olması nedeniyle bu en kötü durum senaryosunun seyrek gerçekleşmesidir.
Not
ScriptManager denetimini ana sayfaya yerleştirmek sizi rahatsız ediyorsa Web Formu'nu ( <form runat="server"> ana sayfadaki işaretleme) 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ı, etiketin <form> kendisi ve gerekirse betikten geri gönderme başlatmaya yönelik bir JavaScript işlevi. Geri göndermeyen sayfalar için bu işaretleme gerekli değildir. Bu gereksiz işaretleme, Web Formunu ana sayfadan kaldırıp ihtiyacı olan her içerik sayfasına el ile ekleyerek ortadan kaldırılabilir. Ancak, ana sayfada Web Formunun olmasının avantajları, web formunun belirli içerik sayfalarına gereksiz şekilde eklenmesinin dezavantajlarından daha ağır basıyor.
1. Adım: Ana Sayfaya ScriptManager Denetimi Ekleme
ASP.NET AJAX çerçevesini kullanan her web sayfası tam olarak bir ScriptManager denetimi içermelidir. Bu gereksinim nedeniyle, genellikle ana sayfaya tek bir ScriptManager denetimi yerleştirmek mantıklıdır; böylece tüm içerik sayfalarında ScriptManager denetimi otomatik olarak eklenir. Ayrıca ScriptManager, UpdatePanel ve UpdateProgress denetimleri gibi ASP.NET AJAX sunucu denetimlerinden önce gelmelidir. Bu nedenle, ScriptManager'ı Web Formu içindeki contentplaceholder denetimlerinden önce koymak en iyisidir.
Ana sayfayı açın ve Web Formunun Site.master içindeki sayfaya, ancak öğesinden önce <div id="topContent"> 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ç Kutusu'nda bulunur. Visual Studio 2005 kullanıyorsanız, önce ASP.NET AJAX çerçevesini yüklemeniz ve denetimleri Araç Kutusu'na eklemeniz gerekir. ASP.NET 2.0 çerçevesini edinmek için ASP.NET AJAX indirme sayfasını ziyaret edin.
ScriptManager'ı sayfaya ekledikten sonra yerine olarak değiştirin IDScriptManager1MyManager.
Şekil 01: ScriptManager'ı Ana Sayfaya ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
2. Adım: İç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 çerçevesi işlevselliği ekleyebiliriz. Şimdi Northwind veritabanından rastgele seçilen bir ürünü görüntüleyen yeni bir ASP.NET sayfası oluşturalım. Yeni bir ürün göstererek bu ekranı 15 saniyede bir güncelleştirmek için ASP.NET AJAX çerçevesinin Zamanlayıcı denetimini kullanacağız.
kök dizininde adlı ShowRandomProduct.aspxyeni bir sayfa oluşturarak başlayın. Bu yeni sayfayı ana sayfaya bağlamayı Site.master unutmayın.
Şekil 02: Web Sitesine Yeni ASP.NET Sayfası Ekleme (Tam boyutlu resmi görüntülemek için tıklayın)
Unutmayın; Ana Sayfada Başlık, Meta Etiketler ve Diğer HTML Üst Bilgilerini Belirtme[SKM1] öğreticisinde, açıkça ayarlanmadıysa sayfanın başlığını oluşturan adlı BasePage özel bir temel sayfa sınıfı oluşturduk. Sayfanın arka planda kod sınıfına ShowRandomProduct.aspx gidin ve öğesinden BasePage türetilmiş olmasını sağlayın (öğesinden System.Web.UI.Pagedeğil).
Son olarak, dosyayı bu ders için bir girdi içerecek şekilde güncelleştirin Web.sitemap . Ana Şablondan İçerik Sayfasına Etkileşim dersinin altına <siteMapNode> aşağıdaki işaretlemeyi ekleyin:
<siteMapNode url="~/ShowRandomProduct.aspx" title="Master Pages and ASP.NET AJAX" />
Bu <siteMapNode> öğenin eklenmesi Dersler listesine yansıtılır (bkz. Şekil 5).
Rastgele Seçilen Ürünü Görüntüleme
öğesine ShowRandomProduct.aspxgeri dönün. Tasarım Aracı araç kutusundan bir UpdatePanel denetimini İçerik denetimine MainContent sürükleyin ve özelliğini olarak ProductPanelayarlayınID. UpdatePanel, ekrandaki kısmi sayfa geri gönderme yoluyla zaman uyumsuz olarak güncelleştirilebilen bir bölgeyi temsil eder.
İlk görevimiz, UpdatePanel içinde rastgele seçilen bir ürünle ilgili bilgileri görüntülemektir. Bir DetailsView denetimini UpdatePanel'e sürükleyerek başlayın. DetailsView denetiminin ID özelliğini olarak ProductInfo ayarlayın ve ve Width özelliklerini temizleyinHeight. DetailsView'un akıllı etiketini genişletin ve Veri Kaynağı Seç açılan listesinden DetailsView'ı adlı RandomProductDataSourceyeni bir SqlDataSource denetimine bağlamayı seçin.
Ş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 , (İçerik Sayfası[SKM2] öğreticisinden Ana Sayfayla Etkileşim Kurma bölümünde oluşturduğumuz) aracılığıyla NorthwindConnectionString Northwind veritabanına bağlanacak şekilde yapılandırın. Select deyimini yapılandırırken özel bir SQL deyimi belirtmeyi seçin ve ardından aşağıdaki sorguyu girin:
SELECT TOP 1 ProductName, UnitPrice
FROM Products
ORDER BY NEWID()
TOP 1 yan tümcesindeki SELECT 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 yan ORDER BY tümcede kullanılabilir.
Şekil 04: SqlDataSource'u Tek, Rastgele Seçilen Bir Kayıt Döndürecek Şekilde Yapılandırma (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 bildirim temelli işaretlemesi aşağıdakine benzer olmalıdır:
<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 ShowRandomProduct.aspx , bir tarayıcı üzerinden görüntülendiğinde sayfa gösterilir. Sayfayı yeniden yüklemek için tarayıcınızın Yenile düğmesine tıklayın; rastgele seçilen yeni bir kaydın ProductName ve UnitPrice değerlerini görmeniz gerekir.
Şekil 05: Rastgele Bir Ürünün Adı ve Fiyatı Görüntülenir (Tam boyutlu resmi görüntülemek için tıklayın)
Yeni Bir Ürünü Her 15 Saniyede Bir Otomatik Olarak Görüntüleme
ASP.NET AJAX çerçevesi, belirli bir zamanda geri gönderme gerçekleştiren bir Zamanlayıcı denetimi içerir; geri gönderildiğinde Zamanlayıcı'nın Tick olayı oluşturulur. Süreölçer denetimi bir UpdatePanel içine yerleştirilirse, kısmi bir sayfa geri gönderme tetikler ve bu sırada verileri rastgele seçilen yeni bir ürünü görüntülemek için DetailsView'a yeniden birleştirebiliriz.
Bunu yapmak için, Araç Kutusu'ndan bir Süreölçer sürükleyin ve UpdatePanel'e bırakın. Süreölçer ID değerini Timer1ProductTimer olarak ve Interval özelliğini 60000'den 15000'e değiştirin. Interval özelliği, geri göndermeler arasındaki milisaniye sayısını gösterir; bunu 15000 olarak ayarlamak Zamanlayıcı'nın 15 saniyede bir kısmi bir sayfa geri gönderme tetiklesine neden olur. Bu noktada Zamanlayıcınızın bildirim temelli işaretlemesi aşağıdakine benzer olmalıdır:
<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 yöntemini çağırarak verileri DetailsView'a DataBind yeniden bağlamamız gerekir. Bunu yaptığınızda DetailsView'a verileri veri kaynağı denetiminden yeniden alma talimatı vererek rastgele seçilen yeni bir kaydı seçip görüntülemesini ister (tarayıcının Yenile düğmesine tıklayarak sayfayı yeniden yüklerken olduğu gibi).
Protected Sub ProductTimer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ProductTimer.Tick
ProductInfo.DataBind()
End Sub
İşte bu kadar! Sayfayı tarayıcı üzerinden yeniden ziyaret edin. Başlangıçta, rastgele bir ürünün bilgileri görüntülenir. Ekrana sabırla watch, 15 saniye sonra yeni bir ürün hakkındaki bilgilerin mevcut ekranın yerini sihirli bir şekilde değiştirdiğini fark edersiniz.
Burada neler olduğunu daha iyi görmek için UpdatePanel'e, ekranın son güncelleştirilme zamanını gösteren bir Etiket denetimi ekleyelim. UpdatePanel içine bir Label Web denetimi ekleyin, denetimi ID olarak LastUpdateTimeayarlayın ve özelliğini temizleyin Text . Ardından, UpdatePanel Load olayı için bir olay işleyicisi oluşturun ve Etikette geçerli saati görüntüleyin. (UpdatePanel'in Load olayı her tam veya kısmi sayfa geri göndermesinde 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 anda görüntülenen ürünün yüklendiği saati içerir. Şekil 6'da ilk ziyaret edilen sayfa gösterilmektedir. Şekil 7'de Zamanlayıcı denetiminin "işaretlenmesi" ve UpdatePanel'in yeni bir ürün hakkındaki bilgileri görüntülemek üzere yenilenmesinden sonraki 15 saniye sonraki sayfa gösterilmektedir.
Şekil 06: Sayfa Yüklemesinde Rastgele Seçilen Bir Ürün Görüntüleniyor (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Şekil 07: Her 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 çerçevesi İstemci Kitaplığı için gerekli betiğin yanı sıra özel JavaScript dosyalarını, betik özellikli Web Hizmetleri başvurularını ve özel kimlik doğrulaması, yetkilendirme ve profil hizmetlerini de kaydedebilir. Bu tür özelleştirmeler genellikle belirli bir sayfaya özeldir. Ancak, ana sayfadaki ScriptManager'da özel betik dosyaları, Web Hizmeti başvuruları veya kimlik doğrulaması, yetkilendirme veya profil hizmetlerine başvuruda bulunursa, bunlar web sitesindeki tüm sayfalara eklenir.
ScriptManager ile ilgili özelleştirmeleri sayfa sayfa ayrı eklemek için ScriptManagerProxy denetimini kullanın. İçerik sayfasına ScriptManagerProxy ekleyebilir ve ardından ScriptManagerProxy'den özel JavaScript dosyasını, Web Hizmeti başvurusunu veya kimlik doğrulaması, yetkilendirme veya profil hizmetini kaydedebilirsiniz; bu, bu hizmetleri belirli bir içerik sayfası için kaydetme etkisine sahiptir.
Not
bir ASP.NET sayfasında yalnızca birden fazla ScriptManager denetimi bulunabilir. Bu nedenle, ScriptManager denetimi ana sayfada zaten tanımlanmışsa içerik sayfasına ScriptManager denetimi ekleyemezsiniz. ScriptManagerProxy'nin tek amacı, geliştiricilerin ScriptManager'ı ana sayfada tanımlamasına yönelik bir yol sağlamaktır, ancak yine de ScriptManager özelleştirmelerini sayfa sayfa ekleyebilir.
ScriptManagerProxy denetiminin nasıl çalıştığını görmek için, Zamanlayıcı denetimini duraklatmak veya sürdürmek için istemci tarafı betiği kullanan bir düğme eklemek için içindeki UpdatePanel'i ShowRandomProduct.aspx genişletelim. Süreölçer denetimi, bu istenen işlevselliği elde etmek için kullanabileceğimiz üç istemci tarafı yöntemine sahiptir:
_startTimer()- Zamanlayıcı denetimini başlatır_raiseTick()- Süreölçer denetiminin "işaretlenmesine" neden olur, böylece geri gönderip sunucuda Tick olayını yükseltir_stopTimer()- Zamanlayıcı denetimini durdurur
adlı bir değişkene ve adlı timerEnabled işleve ToggleTimersahip bir JavaScript dosyası oluşturalım. değişkeni Zamanlayıcı timerEnabled denetiminin şu anda etkin mi yoksa devre dışı mı olduğunu gösterir; varsayılan olarak true olur. İşlev ToggleTimer iki giriş parametresi kabul eder: Duraklat/Sürdür düğmesine başvuru ve Zamanlayıcı denetiminin istemci tarafı id değeri. Bu işlev değerini timerEnableddeğiştirir, Zamanlayıcı denetimine başvuru alır, Zamanlayıcı'yı başlatır veya durdurur (değerine timerEnabledbağlı olarak) ve düğmenin görünen metnini "Duraklat" veya "Sürdür" olarak güncelleştirir. Duraklat/Sürdür düğmesine her tıklandığında bu işlev çağrılır.
Web sitesinde adlı Scriptsyeni bir klasör oluşturarak başlayın. Ardından, Betikler klasörüne JScript Dosyası türündeki adlı TimerScript.js yeni bir dosya ekleyin.
Şekil 08: Klasöre Scripts Yeni Bir JavaScript Dosyası Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Şekil 09: Web Sitesine Yeni Bir JavaScript Dosyası Eklendi (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Ardından, dosyaya aşağıdaki scrip'i TimerScript.js 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ı dosyasına ShowRandomProduct.aspxkaydetmemiz gerekiyor. sayfasına geri dönün ve sayfaya ShowRandomProduct.aspx bir ScriptManagerProxy denetimi ekleyin; bunu ID olarak MyManagerProxyayarlayın. Özel bir JavaScript dosyası kaydetmek için Tasarım Aracı ScriptManagerProxy denetimini seçin ve ardından Özellikler penceresi gidin. Özelliklerden biri Betikler'dir. Bu özellik seçildiğinde, Şekil 10'da gösterilen ScriptReference Koleksiyonu Düzenleyici görüntülenir. Yeni bir betik başvurusu eklemek için Ekle düğmesine tıklayın ve ardından Path özelliğine betik dosyasının yolunu girin: ~/Scripts/TimerScript.js.
Şekil 10: ScriptManagerProxy Denetimine Betik Başvurusu Ekleme (Tam boyutlu görüntüyü görüntülemek için tıklayın)
Betik başvurusu eklendikten sonra ScriptManagerProxy denetiminin bildirim temelli işaretlemesi, aşağıdaki işaretleme parçacığında gösterildiği gibi tek ScriptReference girişli bir <Scripts> koleksiyon içerecek şekilde güncelleştirilir:
<asp:ScriptManagerProxy ID="MyManagerProxy" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/TimerScript.js" />
</Scripts>
</asp:ScriptManagerProxy>
girdisi ScriptManagerProxy'ye ScriptReference işlenmiş işaretlemesine JavaScript dosyasına bir başvuru eklemesini ister. Diğer bir ifadeyle, özel betiği ScriptManagerProxy'ye ShowRandomProduct.aspx kaydederek sayfanın işlenen çıkışında artık başka bir etiket bulunur <script src="url"></script> : <script src="Scripts/TimerScript.js" type="text/javascript"></script>.
Artık sayfasındaki istemci betiğinden ShowRandomProduct.aspx içinde TimerScript.js tanımlanan işlevi çağırabilirizToggleTimer. UpdatePanel içine aşağıdaki HTML'yi ekleyin:
<input type="button" id="PauseResumeButton"
value="Pause"
onclick="ToggleTimer(this, '<%=ProductTimer.ClientID %>');" />
Bu, "Duraklat" metnini içeren bir düğme görüntüler. Her tıklandığında JavaScript işlevi ToggleTimer çağrılır ve düğmeye ve Zamanlayıcı denetiminin id (ProductTimer) değerine bir başvuru geçirilir. Zamanlayıcı denetiminin id değerini almak için söz dizimine dikkat edin. <%=ProductTimer.ClientID%>Zamanlayıcı denetiminin ClientID özelliğinin ProductTimer değerini yayar. İçerik Sayfalarında Denetim Kimliği Adlandırma[SKM3] öğreticisinde, sunucu tarafı değeri ile sonuçta elde edilen istemci tarafı IDid değeri arasındaki farkları ve istemci tarafı iddeğerini nasıl ClientID döndürdüğüne değindik.
Şekil 11'de tarayıcı üzerinden ilk ziyaret edildiğinde bu sayfa gösterilmektedir. Zamanlayıcı şu anda çalışıyor ve görüntülenen ürün bilgilerini 15 saniyede bir güncelleştirir. Şekil 12'de Duraklat düğmesine tıkladıktan sonra ekran gösterilir. Duraklat düğmesine tıklanması Zamanlayıcıyı durdurur ve düğmenin metnini "Sürdür" olarak güncelleştirir. Kullanıcı Sürdür'e tıkladıktan sonra ürün bilgileri yenilenir (ve 15 saniyede bir yenilenmeye devam eder).
Şekil 11: Zamanlayıcı 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)
Şekil 12: Zamanlayıcıyı Yeniden Başlatmak için Sürdü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 özellikli web uygulamaları oluştururken, AJAX özellikli her web sayfasının bir ScriptManager denetimi içermesi zorunludur. Bu işlemi kolaylaştırmak için, her içerik sayfasına bir ScriptManager eklemeyi hatırlamak zorunda kalmadan ana sayfaya bir ScriptManager ekleyebiliriz. 1. adım, ScriptManager'ın ana sayfaya nasıl ekleneceğini gösterirken, 2. Adım bir içerik sayfasında AJAX işlevselliğini uygulamaya baktı.
Belirli bir içerik sayfasına özel betikler, betik etkin Web Hizmetlerine başvurular veya özelleştirilmiş kimlik doğrulaması, yetkilendirme veya profil hizmetleri eklemeniz gerekiyorsa, içerik sayfasına bir ScriptManagerProxy denetimi ekleyin ve ardından özelleştirmeleri orada yapılandırın. 3. adım, özel bir JavaScript dosyasını belirli bir içerik sayfasına kaydetmek için ScriptManagerProxy'nin nasıl kullanılacağını inceledi.
Mutlu Programlama!
Daha Fazla Bilgi
Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:
- AJAX Framework'ASP.NET
- ASP.NET AJAX Öğreticileri
- AJAX Videolarını ASP.NET
- Microsoft ASP.NET AJAX ile Etkileşimli Kullanıcı Arabirimi Oluşturma
- Kayıtları Rastgele Sıralamak için NEWID Kullanma
- Zamanlayıcı Denetimini Kullanma
Yazar hakkında
Birden çok ASP/ASP.NET kitabının yazarı ve 4GuysFromRolla.com kurucusu Scott Mitchell, 1998'den beri Microsoft Web teknolojileriyle çalışmaktadır. Scott bağımsız bir danışman, eğitmen ve yazar olarak çalışmaktadır. Son kitabı Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Scott'a adresinden mitchell@4GuysFromRolla.com veya adresinden blogu http://ScottOnWriting.NETaracılığıyla ulaşılabilir.
Özel Teşekkürler
Bu öğretici serisi birçok yararlı gözden geçiren tarafından gözden geçirildi. Yaklaşan MSDN makalelerimi gözden geçirmek istiyor musunuz? Öyleyse, bana bir satır bırakın mitchell@4GuysFromRolla.com
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin