Ana Sayfalar ve ASP.NET AJAX (C#)Master Pages and ASP.NET AJAX (C#)

Scott Mitchell tarafındanby Scott Mitchell

Kodu indirin veya PDF 'yi indirinDownload Code or Download PDF

ASP.NET AJAX ve ana sayfaları kullanma seçeneklerini açıklar.Discusses options for using ASP.NET AJAX and master pages. 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.Looks at using the ScriptManagerProxy class; discusses how the various JS files are loaded depending on whether the ScriptManager is used in the Master page or Content page.

GirişIntroduction

Son birkaç yılda daha fazla geliştirici, Ajaxözellikli Web uygulamaları oluşturuyor.Over the past several years, more and more developers have been building AJAX-enabled web applications. AJAX özellikli bir Web sitesi, daha hızlı bir kullanıcı deneyimi sunmak için bir dizi ilgili Web teknolojisini kullanır.An AJAX-enabled website uses a number of related web technologies to offer a more responsive user experience. Microsoft 'un ASP.NET AJAX çerçevesisayesınde, AJAX etkin ASP.NET uygulamaları oluşturma işlemi çok kolay başaramayabiliriz.Creating AJAX-enabled ASP.NET applications is amazingly easy thanks to Microsoft's ASP.NET AJAX framework. 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 is built into ASP.NET 3.5 and Visual Studio 2008; it is also available as a separate download for ASP.NET 2.0 applications.

ASP.NET AJAX çerçevesiyle AJAX özellikli Web sayfaları oluştururken, çerçeveyi kullanan her sayfaya ve tam olarak bir ScriptManager denetimi eklemeniz gerekir.When building AJAX-enabled web pages with the ASP.NET AJAX framework, you must add precisely one ScriptManager control to each and every page that uses the framework. Adından da anlaşılacağı gibi, ScriptManager, AJAX etkin Web sayfalarında kullanılan istemci tarafı betiğini yönetir.As its name implies, the ScriptManager manages the client-side script used in AJAX-enabled web pages. ScriptManager, en azından, tarayıcıya ASP.NET AJAX Istemci kitaplığını oluşturan JavaScript dosyalarını indirmesini sağlayan HTML 'yi yayar.At a minimum, the ScriptManager emits HTML that instructs the browser to download the JavaScript files that makeup the ASP.NET AJAX Client Library. Özel JavaScript dosyaları, komut dosyası etkin Web Hizmetleri ve özel uygulama hizmeti işlevlerini kaydetmek için de kullanılabilir.It can also be used to register custom JavaScript files, script-enabled web services, and custom application service functionality.

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.If your site uses master pages (as it should), you do not necessarily need to add a ScriptManager control to every single content page; rather, you can add a ScriptManager control to the master page. Bu öğretici, ScriptManager denetiminin ana sayfaya nasıl ekleneceğini gösterir.This tutorial shows how to add the ScriptManager control to the master page. 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.It also looks at how to use the ScriptManagerProxy control to register custom scripts and script services in a specific content page.

Note

Bu öğretici, ASP.NET AJAX çerçevesiyle AJAX özellikli Web uygulamaları tasarlamayı veya oluşturmayı araştırmaz.This tutorial does not explore designing or building AJAX-enabled web applications with the ASP.NET AJAX framework. AJAX kullanımı hakkında daha fazla bilgi için, Bu öğreticinin sonundaki ASP.NET AJAX videoları ve öğreticilerineve daha fazla okuma bölümünde listelenen kaynaklara bakın.For more information on using AJAX consult the ASP.NET AJAX videos and tutorials, as well as those resources listed in the Further Reading section at the end of this tutorial.

ScriptManager denetimi tarafından yayılan biçimlendirmeyi İncelemeExamining the Markup Emitted by the ScriptManager Control

ScriptManager denetimi, tarayıcıya ASP.NET AJAX Istemci kitaplığını oluşturan JavaScript dosyalarını indirmesini sağlayan biçimlendirmeyi yayar.The ScriptManager control emits markup that instructs the browser to download the JavaScript files that makeup the ASP.NET AJAX Client Library. Ayrıca, bu kitaplığı Başlatan sayfaya satır içi JavaScript bir bit ekler.It also adds a bit of inline JavaScript to the page that initializes this library. Aşağıdaki biçimlendirmede, ScriptManager denetimi içeren bir sayfanın işlenmiş çıktısına eklenen içerik gösterilmektedir:The following markup shows the content that is added to the rendered output of a page that includes a ScriptManager control:

<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.The <script src="url"></script> tags instruct the browser to download and execute the JavaScript file at url. ScriptManager üç tür etiket yayar; tek bir dosyaya başvuru WebResource.axd, diğeri dosyanın ScriptResource.axdbaşvurudur.The ScriptManager emits three such tags; one references the file WebResource.axd, while the other two reference the file ScriptResource.axd. Bu dosyalar aslında web sitenizde dosya olarak mevcut değildir.These files do not actually exist as files in your website. 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.Instead, when a request for either one of these files arrives at the web server, the ASP.NET engine examines the querystring and returns the appropriate JavaScript content. Bu üç dış JavaScript dosyası tarafından sunulan betik, ASP.NET AJAX Framework 'ün Istemci kitaplığını oluşturur.The script provided by these three external JavaScript files constitute the ASP.NET AJAX framework's Client Library. ScriptManager tarafından yayılan diğer <script> etiketleri, bu kitaplığı Başlatan satır içi betik içerir.The other <script> tags emitted by the ScriptManager include inline script that initializes this library.

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.The external script references and inline script emitted by the ScriptManager are essential for a page that uses the ASP.NET AJAX framework, but is not needed for pages that do not use the framework. Bu nedenle, ASP.NET AJAX çerçevesini kullanan sayfalara yalnızca bir ScriptManager eklemek için ideal olmasının bir nedeni olabilir.Therefore, you might reason that it is ideal to only add a ScriptManager to those pages that use the ASP.NET AJAX framework. 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.And this is sufficient, but if you have many pages that use the framework you'll end up adding the ScriptManager control to all pages - a repetitive task, to say the least. Alternatif olarak, ana sayfaya bir ScriptManager ekleyebilirsiniz ve bu gerekli betiği tüm içerik sayfalarına çıkartır.Alternatively, you can add a ScriptManager to the master page, which then injects this necessary script into all content pages. 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.With this approach, you do not need to remember to add a ScriptManager to a new page that uses the ASP.NET AJAX framework because it is already included by the master page. 1. adım, ana sayfaya bir ScriptManager ekleme konusunda adım adım yol gösterir.Step 1 walks through adding a ScriptManager to the master page.

Note

Ana sayfanızın kullanıcı arabirimi içinde AJAX işlevselliği eklemeyi planlıyorsanız, ana sayfada ScriptManager ' ı dahil etmeniz gerekir.If you plan on including AJAX functionality within the user interface of your master page, then you have no choice in the matter - you must include the ScriptManager in the master page.

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.One downside of adding the ScriptManager to the master page is that the above script is emitted in every page, regardless of whether its needed. 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.This clearly leads to wasted bandwidth for those pages that have the ScriptManager included (via the master page) yet don't use any features of the ASP.NET AJAX framework. Ancak ne kadar bant genişliği harcandınız?But just how much bandwidth is wasted?

  • ScriptManager tarafından yayılan gerçek içerik (yukarıda gösterilen) 1 KB 'tan fazla.The actual content emitted by the ScriptManager (shown above) totals a little over 1KB.
  • 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.The three external script files referenced by the <script> element, however, comprise roughly 450KB of data uncompressed; in a website that uses gzip compression, this total bandwidth can be reduced near 100KB. 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.However, these script files are cached by the browser for one year, meaning that they only need to be downloaded once and then can be reused in other pages on the site.

En iyi durumda, betik dosyaları önbelleğe alındığında toplam maliyet 1 KB 'tır ve bu da yok edilebilir.In the best case, then, when the script files are cached, the total cost is 1KB, which is negligible. 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.In the worst case, however - which is when the script files have not yet been downloaded and the web server is not using any form of compression - the bandwidth hit is around 450KB, which can add anywhere from a second or two over a broadband connection to up to a minute for users over dial-up modems. 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.The good news is that because the external script files are cached by the browser, this worst case scenario occurs infrequently.

Note

ScriptManager denetimini ana sayfaya yerleştirmeye devam ediyorsanız, Web formunu (ana sayfada <form runat="server"> biçimlendirme) göz önünde bulundurun.If you still feel uncomfortable placing the ScriptManager control in the master page, consider the Web Form (the <form runat="server"> markup in the master page). Geri gönderme modelini kullanan her ASP.NET sayfası, tam olarak bir Web formu içermelidir.Every ASP.NET page that uses the postback model must include precisely one Web Form. 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.Adding a Web Form adds additional content: a number of hidden form fields, the <form> tag itself, and, if necessary, a JavaScript function for initiating a postback from script. Bu biçimlendirme geri gönderme olmayan sayfalar için gereksizdir.This markup is unnecessary for pages that don't postback. 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.This extraneous markup could be eliminated by removing the Web Form from the master page and manually adding it to each content page that needs one. Ancak, ana sayfada Web formunu kullanmanın avantajları, belirli içerik sayfalarına gereksiz yere eklenmesinin olumsuz yönlerini ortadanHowever, the benefits of having the Web Form in the master page outweigh the disadvantages from having it added unnecessarily to certain content pages.

1. Adım: Ana sayfaya ScriptManager denetimi eklemeStep 1: Adding a ScriptManager Control to the Master Page

ASP.NET AJAX çerçevesini kullanan her Web sayfasında tam olarak bir ScriptManager denetimi bulunmalıdır.Every web page that uses the ASP.NET AJAX framework must contain precisely one ScriptManager control. 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.Because of this requirement, it usually makes sense to place a single ScriptManager control on the master page so that all content pages have the ScriptManager control automatically included. Ayrıca, ScriptManager, UpdatePanel ve UpdateProgress denetimleri gibi ASP.NET AJAX sunucu denetimlerinden önce gelmelidir.Furthermore, the ScriptManager must come before any of the ASP.NET AJAX server controls, such as the UpdatePanel and UpdateProgress controls. Bu nedenle, ScriptManager 'ı Web formu içindeki herhangi bir ContentPlaceHolder denetimine koymak en iyisidir.Therefore, it's best to put the ScriptManager before any ContentPlaceHolder controls within the Web Form.

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).Open the Site.master master page and add a ScriptManager control to the page within the Web Form, but before the <div id="topContent"> element (see Figure 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.If you are using Visual Web Developer 2008 or Visual Studio 2008, the ScriptManager control is located in the Toolbox in the AJAX Extensions tab. If you are using Visual Studio 2005, you will need to first install the ASP.NET AJAX framework and add the controls to the Toolbox. ASP.NET 2,0 için Framework 'ü almak üzere ASP.NET AJAX wiki 'yi ziyaret edin.Visit the ASP.NET AJAX Wiki to get the framework for ASP.NET 2.0.

ScriptManager 'ı sayfaya ekledikten sonra, ID ScriptManager1 olan MyManagerolarak değiştirin.After adding the ScriptManager to the page, change its ID from ScriptManager1 to MyManager.

ScriptManager 'ı ana sayfaya eklemek Add the ScriptManager to the Master Page

Şekil 01: ScriptManager 'ı ana sayfaya ekleyin (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 01: Add the ScriptManager to the Master Page (Click to view full-size image)

2. Adım: bir Içerik sayfasından ASP.NET AJAX çerçevesini kullanmaStep 2: Using the ASP.NET AJAX Framework from a Content Page

ScriptManager denetimi ana sayfaya eklendiğinde, artık herhangi bir içerik sayfasına ASP.NET AJAX Framework işlevselliği ekleyebiliriz.With the ScriptManager control added to the master page we can now add ASP.NET AJAX framework functionality to any content page. Northwind veritabanından rastgele seçilmiş bir ürünü görüntüleyen yeni bir ASP.NET sayfası oluşturalım.Let's create a new ASP.NET page that displays a randomly selected product from the Northwind database. 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.We'll use the ASP.NET AJAX framework's Timer control to update this display every 15 seconds, showing a new product.

ShowRandomProduct.aspxadlı kök dizinde yeni bir sayfa oluşturarak başlayın.Start by creating a new page in the root directory named ShowRandomProduct.aspx. Bu yeni sayfayı Site.master ana sayfasına bağlamayı unutmayın.Don't forget to bind this new page to the Site.master master page.

Web sitesine yeni bir ASP.NET sayfası eklemek Add a New ASP.NET Page to the Website

Ş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)Figure 02: Add a New ASP.NET Page to the Website (Click to view full-size image)

Ana sayfada başlık, meta etiketler ve DIĞER HTML üst bilgilerini belirtme öğreticisinde, açıkça ayarlanmamışsa sayfanın başlığını oluşturan BasePage adlı özel bir temel sayfa sınıfı oluşturduğumuz hatırlayın.Recall that in the Specifying the Title, Meta Tags, and Other HTML Headers in the Master Page tutorial we created a custom base page class named BasePage that generated the page's title if it was not explicitly set. ShowRandomProduct.aspx sayfanın arka plan kod sınıfına gidin ve BasePage türetebilirsiniz (System.Web.UI.Pageyerine).Go to the ShowRandomProduct.aspx page's code-behind class and have it derive from BasePage (instead of from System.Web.UI.Page).

Son olarak, Web.sitemap dosyasını bu ders için bir giriş içerecek şekilde güncelleştirin.Finally, update the Web.sitemap file to include an entry for this lesson. Ana Içerik sayfası etkileşim dersi için <siteMapNode> altına aşağıdaki biçimlendirmeyi ekleyin:Add the following markup beneath the <siteMapNode> for the Master to Content Page Interaction lesson:

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

Bu <siteMapNode> öğesinin eklenmesi dersler listesinde yansıtılır (bkz. Şekil 5).The addition of this <siteMapNode> element is reflected in the Lessons list (see Figure 5).

Rastgele seçili bir ürünü görüntülemeDisplaying a Randomly Selected Product

ShowRandomProduct.aspxdön.Return to ShowRandomProduct.aspx. Tasarımcıdan bir UpdatePanel denetimini araç kutusundan MainContent Içerik denetimine sürükleyin ve ID özelliğini ProductPanelolarak ayarlayın.From the Designer, drag an UpdatePanel control from the Toolbox into the MainContent Content control and set its ID property to ProductPanel. UpdatePanel, ekranda kısmi sayfa geri gönderme yoluyla, zaman uyumsuz olarak güncelleştirilebilen bir bölgeyi temsil eder.The UpdatePanel represents a region on the screen that can be asynchronously updated through a partial page postback.

İlk göreviniz, UpdatePanel içinde rastgele seçilmiş bir ürünle ilgili bilgileri görüntülemektir.Our first task is to display information about a randomly selected product within the UpdatePanel. Bir DetailsView denetimini UpdatePanel 'a sürükleyerek başlayın.Start by dragging a DetailsView control into the UpdatePanel. DetailsView denetiminin ID özelliğini ProductInfo olarak ayarlayın ve Height ve Width özelliklerini temizleyin.Set the DetailsView control's ID property to ProductInfo and clear out its Height and Width properties. DetailsView 'un akıllı etiketini genişletin ve veri kaynağı seç açılan listesinden DetailsView ' ı RandomProductDataSourceadlı yeni bir SqlDataSource denetimine bağlamayı seçin.Expand the DetailsView's smart tag and, from the Choose Data Source drop-down list, choose to bind the DetailsView to a new SqlDataSource control named RandomProductDataSource.

DetailsView öğesini yeni bir SqlDataSource denetimine bağlama Bind the DetailsView to a New SqlDataSource Control

Şekil 03: DetailsView 'ı yeni bir SqlDataSource denetimine bağlama (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 03: Bind the DetailsView to a New SqlDataSource Control (Click to view full-size image)

SqlDataSource denetimini Northwind veritabanına bağlanmak için ( Içerik sayfası öğreticiden ana sayfayla etkileşime geçmek için oluşturduğumuz) NorthwindConnectionString kullanarak yapılandırın.Configure the SqlDataSource control to connect to the Northwind database via the NorthwindConnectionString (which we created in the Interacting with the Master Page from the Content Page tutorial). SELECT ifadesini yapılandırırken özel bir SQL ifadesini belirtmeyi seçin ve ardından aşağıdaki sorguyu girin:When configuring the select statement choose to specify a custom SQL statement and then enter the following query:

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.The TOP 1 keyword in the SELECT clause returns only the first record returned by the query. 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.The NEWID() function generates a new globally unique identifier value (GUID) and can be used in an ORDER BY clause to return the table's records in a random order.

SqlDataSource 'ı tek ve rastgele seçilmiş bir kayıt döndürecek şekilde yapılandırınConfigure the SqlDataSource to Return a Single, Randomly Selected Record

Ş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)Figure 04: Configure the SqlDataSource to Return a Single, Randomly Selected Record (Click to view full-size image)

Sihirbazı tamamladıktan sonra, Visual Studio yukarıdaki sorgu tarafından döndürülen iki sütun için bir BoundField oluşturur.After completing the wizard, Visual Studio creates a BoundField for the two columns returned by the above query. Bu noktada sayfanızın bildirime dayalı biçimlendirmesi aşağıdakine benzer görünmelidir:At this point your page's declarative markup should look similar to the following:

<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.Figure 5 shows the ShowRandomProduct.aspx page when viewed through a browser. 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.Click your browser's Refresh button to reload the page; you should see the ProductName and UnitPrice values for a new randomly selected record.

Rastgele bir ürünün adı ve fiyat görüntülenirA Random Product's Name and Price is Displayed

Ş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)Figure 05: A Random Product's Name and Price is Displayed (Click to view full-size image)

Her 15 saniyede bir yeni ürün otomatik olarak görüntüleniyorAutomatically Displaying a New Product Every 15 Seconds

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.The ASP.NET AJAX framework includes a Timer control that performs a postback at a specified time; on postback the Timer's Tick event is raised. 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.If the Timer control is placed within an UpdatePanel it triggers a partial page postback, during which we can rebind the data to the DetailsView to display a new randomly selected product.

Bunu gerçekleştirmek için, araç kutusundan bir Zamanlayıcı sürükleyin ve UpdatePanel 'a bırakın.To accomplish this, drag a Timer from the Toolbox and drop it into the UpdatePanel. Zamanlayıcının ID Timer1 olan ProductTimer ve Interval özelliği 60000 ' den 15000 ' e değiştirin.Change the Timer's ID from Timer1 to ProductTimer and its Interval property from 60000 to 15000. 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.The Interval property indicates the number of milliseconds between postbacks; setting it to 15000 causes the Timer to trigger a partial page postback every 15 seconds. Bu noktada zamanlayıcının bildirim temelli biçimlendirmesi aşağıdakine benzer görünmelidir:At this point your Timer's declarative markup should look similar to the following:

<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.Create an event handler for the Timer's Tick event. Bu olay işleyicisinde, DetailsView 'un DataBind yöntemini çağırarak verileri DetailsView 'a yeniden bağlamanız gerekir.In this event handler we need to rebind the data to the DetailsView by calling the DetailsView's DataBind method. 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.Doing so instructs the DetailsView to re-retrieve the data from its data source control, which will select and display a new randomly selected record (just like when reloading the page by clicking the browser's Refresh button).

protected void ProductTimer_Tick(object sender, EventArgs e)
{
    ProductInfo.DataBind();
}

İşte bu kadar kolay!That's all there is to it! Sayfayı bir tarayıcı aracılığıyla yeniden ziyaret edin.Revisit the page through a browser. Başlangıçta, rastgele bir ürünün bilgileri görüntülenir.Initially, a random product's information is displayed. Ekranı gönderdikten sonra, 15 saniye sonra, yeni bir ürün ile ilgili bilgilerin mevcut ekranın yerini aldığını fark edersiniz.If you patiently watch the screen you'll notice that, after 15 seconds, information about a new product magically replaces the existing display.

Burada neler olduğunu daha iyi görmek için, denetimin son güncelleştirilme süresini gösteren bir etiket denetimi ekleyelim.To better see what's happening here, let's add a Label control to the UpdatePanel that displays the time the display was last updated. UpdatePanel içinde bir etiket Web denetimi ekleyin, ID LastUpdateTimeolarak ayarlayın ve Text özelliğini temizleyin.Add a Label Web control within the UpdatePanel, set its ID to LastUpdateTime, and clear its Text property. Ardından, UpdatePanel 'ın Load olayı için bir olay işleyicisi oluşturun ve etikette geçerli saati görüntüleyin.Next, create an event handler for the UpdatePanel's Load event and display the current time in the Label. (UpdatePanel 'ın Load olayı her tam veya kısmi sayfa geri göndermede tetiklenir.)(The UpdatePanel's Load event is fired on every full or partial page postback.)

protected void ProductPanel_Load(object sender, EventArgs e)
{
    LastUpdateTime.Text = "Last updated at " + DateTime.Now.ToLongTimeString();
}

Bu değişiklik tamamlandıktan sonra sayfa, o sırada görüntülenen ürünün yüklendiği saati içerir.With this change complete, the page includes the time the currently displayed product was loaded. Şekil 6 ilk kez ziyaret edildiğinde sayfayı gösterir.Figure 6 shows the page when first visited. Ş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.Figure 7 shows the page 15 seconds later after the Timer control has "ticked" and the UpdatePanel has been refreshed to display information about a new product.

Rastgele seçilmiş bir ürün sayfa yükleme sırasında görüntülenirA Randomly Selected Product is Displayed on Page Load

Ş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)Figure 06: A Randomly Selected Product is Displayed on Page Load (Click to view full-size image)

Rastgele seçilen yeni bir ürün görüntülenirken 15 saniyede bir Every 15 Seconds a New Randomly Selected Product is Displayed

Ş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)Figure 07: Every 15 Seconds a New Randomly Selected Product is Displayed (Click to view full-size image)

3. Adım: ScriptManagerProxy denetimini kullanmaStep 3: Using the ScriptManagerProxy Control

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.Along with including the necessary script for the ASP.NET AJAX framework Client Library, the ScriptManager can also register custom JavaScript files, references to script-enabled Web Services, and custom authentication, authorization, and profile services. Genellikle bu özelleştirmeler belirli bir sayfaya özeldir.Usually such customizations are specific to a certain page. 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.However, if the custom script files, Web Service references, or authentication, authorization, or profile services are referenced in the ScriptManager in the master page then they are included in all pages in the website.

Sayfa temelinde ScriptManager ile ilgili özelleştirmeler eklemek için ScriptManagerProxy denetimini kullanın.To add ScriptManager-related customizations on a page-by-page basis use the ScriptManagerProxy control. 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.You can add a ScriptManagerProxy to a content page and then register the custom JavaScript file, Web Service reference, or authentication, authorization, or profile service from the ScriptManagerProxy; this has the effect of registering these services for the particular content page.

Note

Bir ASP.NET sayfasında yalnızca birden fazla ScriptManager denetimi bulunabilir.An ASP.NET page can only have no more than one ScriptManager control present. Bu nedenle, ScriptManager denetimi ana sayfada zaten tanımlanmışsa bir içerik sayfasına ScriptManager denetimi ekleyemezsiniz.Therefore, you cannot add a ScriptManager control to a content page if the ScriptManager control is already defined in the master page. 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.The sole purpose of the ScriptManagerProxy is to provide a way for developers to define the ScriptManager in the master page, but still have the ability to add ScriptManager customizations on a page-by-page basis.

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.To see the ScriptManagerProxy control in action, let's augment the UpdatePanel in ShowRandomProduct.aspx to include a button that uses client-side script to pause or resume the Timer control. Zamanlayıcı denetiminde, istenen işlevselliğe ulaşmak için kullandığımız üç istemci tarafı yöntemi vardır:The Timer control has three client-side methods that we can use to achieve this desired functionality:

  • _startTimer()-Zamanlayıcı denetimini başlatır_startTimer() - starts the Timer control
  • _raiseTick()-süreölçer denetiminin "çentik" olmasına neden olur, bu nedenle sunucuya geri ve Tick olayını ortaya koyar_raiseTick() - causes the Timer control to "tick," thereby posting back and raising its Tick event on the server
  • _stopTimer()-Zamanlayıcı denetimini durduruyor_stopTimer() - stops the Timer control

timerEnabled adlı bir değişkenle ve ToggleTimeradlı bir işlevle bir JavaScript dosyası oluşturalım.Let's create a JavaScript file with a variable named timerEnabled and a function named ToggleTimer. 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.The timerEnabled variable indicates whether the Timer control is currently enabled or disabled; it defaults to true. ToggleTimer işlevi iki giriş parametresini kabul eder: DURATION/Resume düğmesine ve Zamanlayıcı denetiminin istemci tarafı id değerine bir başvuru.The ToggleTimer function accepts two input parameters: a reference to the Pause/Resume button and the client-side id value of the Timer control. 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.This function toggles the value of timerEnabled, gets a reference to the Timer control, starts or stops the Timer (depending on the value of timerEnabled), and updates the button's display text to "Pause" or "Resume". Bu işlev, duraklatma/Resume düğmesine tıklandığında çağrılır.This function will be called whenever the Pause/Resume button is clicked.

Scriptsadlı Web sitesinde yeni bir klasör oluşturarak başlayın.Start by creating a new folder in the website named Scripts. Ardından, JScript dosyası türünde TimerScript.js adlı betikler klasörüne yeni bir dosya ekleyin.Next, add a new file to the Scripts folder named TimerScript.js of type JScript File.

Scripts klasörüne yeni bir JavaScript dosyası ekleyinAdd a New JavaScript File to the Scripts Folder

Ş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)Figure 08: Add a New JavaScript File to the Scripts Folder (Click to view full-size image)

Web sitesine yeni bir JavaScript dosyası eklenmiştirA New JavaScript File has been Added to the Website

Ş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)Figure 09: A New JavaScript File has been Added to the Website (Click to view full-size image)

Sonra, aşağıdaki komut dosyasını TimerScript. js dosyasına ekleyin:Next, add the following scrip to the TimerScript.js file:

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.We now need to register this custom JavaScript file in ShowRandomProduct.aspx. ShowRandomProduct.aspx dönün ve sayfaya bir ScriptManagerProxy denetimi ekleyin; ID MyManagerProxyolarak ayarlayın.Return to ShowRandomProduct.aspx and add a ScriptManagerProxy control to the page; set its ID to MyManagerProxy. Özel bir JavaScript dosyasını kaydetmek için tasarımcıda ScriptManagerProxy denetimini seçip Özellikler penceresi gidin.To register a custom JavaScript file select the ScriptManagerProxy control in the Designer and then go to the Properties window. Özelliklerden biri komut dosyaları olarak adlandırılmış.One of the properties is titled Scripts. Bu özelliğin belirlenmesi, Şekil 10 ' da gösterilen ScriptReference koleksiyon düzenleyicisini görüntüler.Selecting this property displays the ScriptReference Collection Editor shown in Figure 10. 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.Click the Add button to include a new script reference and then enter the path to the script file in the Path property: ~/Scripts/TimerScript.js.

ScriptManagerProxy denetimine betik başvurusu ekleme Add a Script Reference to the ScriptManagerProxy Control

Şekil 10: ScriptManagerProxy denetimine bir betik başvurusu ekleme (tam boyutlu görüntüyü görüntülemek için tıklayın)Figure 10: Add a Script Reference to the ScriptManagerProxy Control (Click to view full-size image)

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:After adding the script reference the ScriptManagerProxy control's declarative markup is updated to include a <Scripts> collection with a single ScriptReference entry, as the following snippet of markup illustrates:

<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.The ScriptReference entry instructs the ScriptManagerProxy to include a reference to the JavaScript file in its rendered markup. 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>.That is, by registering the custom script in the ScriptManagerProxy the ShowRandomProduct.aspx page's rendered output now includes another <script src="url"></script> tag: <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.We can now call the ToggleTimer function defined in TimerScript.js from the client script in the ShowRandomProduct.aspx page. Aşağıdaki HTML 'yi UpdatePanel içine ekleyin:Add the following HTML within the UpdatePanel:

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

Bu, "pause" metnini içeren bir düğme görüntüler.This displays a button with the text "Pause". Her tıklandığında JavaScript işlevi ToggleTimer çağrılır, düğmeye bir başvuru ve Zamanlayıcı denetiminin kimlik değeri (ProductTimer) geçer.Whenever it is clicked, the JavaScript function ToggleTimer is called, passing in a reference to the button and the id value of the Timer control (ProductTimer). Zamanlayıcı denetiminin id değerini elde etmek için söz dizimini aklınızda edin.Note the syntax for obtaining the id value of the Timer control. <%=ProductTimer.ClientID%>, ProductTimer Zamanlayıcı denetiminin ClientID özelliğinin değerini yayar.<%=ProductTimer.ClientID%> emits the value of the ProductTimer Timer control's ClientID property. Içerik sayfalarında DENETIM kimliği adlandırması öğreticide, 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.In the Control ID Naming in Content Pages tutorial we discussed the differences between the server-side ID value and the resulting client-side id value, and how ClientID returns the client-side id.

Şekil 11 ' de bir tarayıcıdan ilk kez ziyaret edildiğinde Bu sayfa gösterilir.Figure 11 shows this page when first visited through a browser. Süreölçer Şu anda çalışıyor ve görüntülenen ürün bilgilerini 15 saniyede bir güncelleştirir.The Timer is currently running and updates the displayed product information every 15 seconds. Şekil 12 Duraklat düğmesine tıklandıktan sonra ekranı gösterir.Figure 12 shows the screen after the Pause button has been clicked. Duraklat düğmesine tıklamak süreölçeri sonlandırır ve düğmenin metnini "devam" olarak güncelleştirir.Clicking the Pause button stops the Timer and updates the button's text to "Resume". Kullanıcı Sürdür ' e tıkladıktan sonra ürün bilgileri yenilenir (ve 15 saniyede bir yenilemeye devam eder).The product information will refresh (and continue to refresh every 15 seconds) once the user clicks Resume.

süreölçer denetimini durdurmak için Duraklat düğmesine tıklayınClick the Pause Button to Stop the Timer Control

Ş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)Figure 11: Click the Pause Button to Stop the Timer Control (Click to view full-size image)

zamanlayıcıyı yeniden başlatmak için geri dön düğmesine tıklayınClick the Resume Button to Restart the Timer

Ş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)Figure 12: Click the Resume Button to Restart the Timer (Click to view full-size image)

ÖzetSummary

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.When building AJAX-enabled web applications using the ASP.NET AJAX framework it is imperative that every AJAX-enabled web page include a ScriptManager control. Bu işlemi kolaylaştırmak için, her bir içerik sayfasına bir ScriptManager eklemek yerine ana sayfaya bir ScriptManager ekleyebiliriz.To facilitate this process, we can add a ScriptManager to the master page rather than having to remember to add a ScriptManager to each and every content page. 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.Step 1 showed how to add the ScriptManager to the master page while Step 2 looked at implementing AJAX functionality in a content page.

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.If you need to add custom scripts, references to script-enabled Web Services, or customized authentication, authorization, or profile services to a particular content page, add a ScriptManagerProxy control to the content page and then configure the customizations there. 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.Step 3 examined how to use the ScriptManagerProxy to register a custom JavaScript file in a specific content page.

Programlamanın kutlu olsun!Happy Programming!

Daha Fazla BilgiFurther Reading

Bu öğreticide ele alınan konular hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:For more information on the topics discussed in this tutorial, refer to the following resources:

Yazar hakkındaAbout the Author

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 Mitchell, author of multiple ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott bağımsız danışman, Trainer ve yazıcı olarak çalışıyor.Scott works as an independent consultant, trainer, and writer. En son kitabı, 24 saat içinde ASP.NET 3,5 kendi kendinize eğitimister.His latest book is Sams Teach Yourself ASP.NET 3.5 in 24 Hours. Scott 'a mitchell@4GuysFromRolla.com veya blogundan http://ScottOnWriting.NETüzerinden erişilebilir.Scott can be reached at mitchell@4GuysFromRolla.com or via his blog at http://ScottOnWriting.NET.

Özel olarak teşekkürlerSpecial Thanks To

Bu öğretici serisi birçok yararlı gözden geçirenler tarafından incelendi.This tutorial series was reviewed by many helpful reviewers. Yaklaşan MSDN makalelerimi gözden geçiriyor musunuz?Interested in reviewing my upcoming MSDN articles? Öyleyse, beni mitchell@4GuysFromRolla.com bir satır bırakınIf so, drop me a line at mitchell@4GuysFromRolla.com