ASP.NET AJAX ile Kısmi Sayfa Güncelleştirmelerini Anlama

tarafından Scott Cate

ASP.NET AJAX Uzantılarının belki de en görünür özelliği, kod değişikliği ve en az işaretleme değişikliği olmadan sunucuya tam geri gönderme yapmadan kısmi veya artımlı sayfa güncelleştirmeleri yapabilme özelliğidir. Avantajları kapsamlıdır; multimedyanızın durumu (Adobe Flash veya Windows Media gibi) değişmemiştir, bant genişliği maliyetleri azalır ve istemci genellikle geri göndermeyle ilişkili titreşimi yaşamaz.

Giriş

Microsoft'un ASP.NET teknolojisi nesne odaklı ve olay odaklı bir programlama modeli getirir ve bunu derlenmiş kodun avantajlarıyla bir araya getirir. Ancak, sunucu tarafı işleme modelinin teknolojinin doğasında çeşitli dezavantajları vardır:

• Sayfa güncelleştirmeleri, sunucuya gidiş dönüş gerektirir ve bu da sayfa yenilemesi gerektirir.
• Gidiş dönüşler, Javascript veya diğer istemci tarafı teknolojisi (Adobe Flash gibi) tarafından oluşturulan hiçbir etkiyi kalıcı hale getirmez
• Geri gönderme sırasında, Microsoft Internet Explorer dışındaki tarayıcılar kaydırma konumunun otomatik olarak geri yüklenmesini desteklemez. Internet Explorer'da bile sayfa yenilenirken titreşim devam ediyor.
• Geri göndermeler, özellikle GridView denetimi veya yineleyiciler gibi denetimlerle uğraşırken __VIEWSTATE form alanı artarken yüksek miktarda bant genişliği içerebilir.
• JavaScript veya diğer istemci tarafı teknolojisi aracılığıyla Web Hizmetlerine erişmek için birleşik bir model yoktur.

Microsoft'un ASP.NET AJAX uzantılarını girin. A zaman uyumlu J avaScript A nd X ML'nin kısaltması olan AJAX, Microsoft AJAX Framework'den oluşan sunucu tarafı koddan ve Microsoft AJAX Betik Kitaplığı adlı bir betik bileşeninden oluşan, platformlar arası JavaScript aracılığıyla artımlı sayfa güncelleştirmeleri sağlamaya yönelik tümleşik bir çerçevedir. ASP.NET AJAX uzantıları, JavaScript aracılığıyla ASP.NET Web Hizmetlerine erişmek için platformlar arası destek de sağlar.

Bu teknik inceleme ScriptManager bileşenini, UpdatePanel denetimini ve UpdateProgress denetimini içeren ASP.NET AJAX Uzantılarının kısmi sayfa güncelleştirme işlevlerini inceler ve bunların kullanılması veya kullanılmaması gereken senaryoları dikkate alır.

Bu teknik inceleme, Visual Studio 2008'in Beta 2 sürümünü ve .NET Framework 3.5'i temel alır ve ASP.NET AJAX Uzantılarını Temel Sınıf Kitaplığı ile tümleştirir (daha önce ASP.NET 2.0 için kullanılabilen bir eklenti bileşeniydi). Bu teknik inceleme ayrıca Visual Web Developer Express Edition'ı değil Visual Studio 2008 kullandığınızı varsayar; Başvuruda bulunulan bazı proje şablonları Visual Web Developer Express kullanıcıları tarafından kullanılamayabilir.

Kısmi Sayfa Güncelleştirmeler

ASP.NET AJAX Uzantılarının belki de en görünür özelliği, kod değişikliği ve en az işaretleme değişikliği olmadan sunucuya tam geri gönderme yapmadan kısmi veya artımlı sayfa güncelleştirmeleri yapabilme özelliğidir. Avantajlar kapsamlıdır - multimedyanızın durumu (Adobe Flash veya Windows Media gibi) değişmemiştir, bant genişliği maliyetleri azalır ve istemci genellikle geri göndermeyle ilişkili titreşimi yaşamaz.

Kısmi sayfa işlemeyi tümleştirme özelliği, projenizde en az değişiklikle ASP.NET tümleştirilir.

İzlenecek yol: Kısmi İşlemeyi Varolan Bir Projeyle Tümleştirme

1. Microsoft Visual Studio 2008'de Dosya-> Yeni>- Web Sitesi'ne gidip iletişim kutusundan ASP.NET Web Sitesi'ni seçerek yeni bir ASP.NET Web Sitesi projesi oluşturun. İstediğiniz gibi adlandırabilir ve dosya sistemine veya Internet Information Services'e (IIS) yükleyebilirsiniz.
2. Temel ASP.NET işaretlemesi (sunucu tarafı formu ve yönergesi) içeren boş varsayılan @Page sayfa gösterilir. Form öğesinin içindeki sayfaya adlı Label1 bir Etiket ve adlı Button1 bir Düğme bırakın. Metin özelliklerini istediğiniz gibi ayarlayabilirsiniz.
3. Tasarım görünümünde, arka plan kod olay işleyicisi oluşturmak için çift tıklayın Button1 . Bu olay işleyicisinin içinde Düğmeye tıklamışsınız olarak ayarlayın Label1.Text ! .

Liste 1: Kısmi işleme etkinleştirilmeden önce default.aspx için işaretleme

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <div>
 <asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
 </div>
 </form>
 </body>
</html>

Listeleme 2: default.aspx.cs dosyasında codebehind (kırpılmış)

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "You clicked the button!";
    }
}

1. Web sitenizi başlatmak için F5 tuşuna basın. Visual Studio, hata ayıklamayı etkinleştirmek için bir web.config dosyası eklemenizi ister; bunu yapın. Düğmeye tıkladığınızda, sayfanın etiketteki metni değiştirmek için yenilendiğini ve sayfa yeniden çizilirken kısa bir titreşim olduğuna dikkat edin.
2. Tarayıcı pencerenizi kapattıktan sonra Visual Studio'ya ve işaretleme sayfasına dönün. Visual Studio araç kutusunda aşağı kaydırın ve AJAX Uzantıları etiketli sekmeyi bulun. (AJAX veya Atlas uzantılarının eski bir sürümünü kullandığınız için bu sekmeye sahip değilseniz, bu teknik incelemenin devamında AJAX Uzantıları araç kutusu öğelerini kaydetmek için izlenecek yol kılavuzuna bakın veya geçerli sürümü web sitesinden indirilebilir Windows Installer ile yükleyin).

(Tam boyutlu görüntüyü görüntülemek için tıklayın)

1. Bilinen Sorun:Visual Studio 2008'i ASP.NET 2.0 AJAX Uzantıları ile visual studio 2005'in yüklü olduğu bir bilgisayara yüklerseniz, Visual Studio 2008 AJAX Uzantıları araç kutusu öğelerini içeri aktarır. Bileşenlerin araç ipucuna bakarak durumun bu olup olmadığını belirleyebilirsiniz; Sürüm 3.5.0.0 demeleri gerekir. Sürüm 2.0.0.0 diyorlarsa, eski araç kutusu öğelerinizi içeri aktarmış olursunuz ve Visual Studio'daki Araç Kutusu Öğelerini Seç iletişim kutusunu kullanarak bunları el ile içeri aktarmanız gerekir. Tasarımcı aracılığıyla Sürüm 2 denetimleri ekleyemezsiniz.

2. <asp:Label> Etiket başlamadan önce bir boşluk satırı oluşturun ve araç kutusundaki UpdatePanel denetimine çift tıklayın. Sayfanın en üstüne, System.Web.UI ad alanı içindeki denetimlerin ön ek kullanılarak içeri aktarılması gerektiğini belirten yeni @Register bir yönerge eklendiğini asp: unutmayın.

3. Öğenin Etiket ve Düğme denetimleri kaydırılmış olarak iyi biçimlendirilmiş olması için kapanış </asp:UpdatePanel> etiketini Button öğesinin sonunun sonuna sürükleyin.

4. Etiketi açtıktan <asp:UpdatePanel> sonra yeni bir etiket açmaya başlayın. IntelliSense'in iki seçenekle size sorduğunu unutmayın. Bu durumda bir <ContentTemplate> etiket oluşturun. İşaretlemeyi düzgün biçimlendirebilmek için bu etiketi Etiket ve Düğmenizin çevresine sarmalamanız gerekir.

(Tam boyutlu görüntüyü görüntülemek için tıklayın)

1. öğesinin <form> içinde herhangi bir yere, araç kutusundaki öğeye çift tıklayarak ScriptManager scriptManager denetimi ekleyin.
2. <asp:ScriptManager> etiketini özniteliğini EnablePartialRendering= trueiçermesi için düzenleyin.

Liste 3: Kısmi işlemenin etkinleştirildiği default.aspx için işaretleme

<%@ Page Language="C#" AutoEventWireup="true"
 CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
 PublicKeyToken=31bf3856ad364e35"
 Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <head runat="server">
 <title>Untitled Page</title>
 </head>
 <body>
 <form id="form1" runat="server">
 <asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1" runat="server"></asp:ScriptManager>
 <div>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server"
 Text="This is a label!"></asp:Label>
 <asp:Button ID="Button1" runat="server"
 Text="Click Me" OnClick="Button1_Click" />
 </ContentTemplate>
 </asp:UpdatePanel>
 </div>
 </form>
 </body>
</html>

1. web.config dosyanızı açın. Visual Studio'nun System.Web.Extensions.dll için otomatik olarak bir derleme başvurusu eklediğine dikkat edin.

2. Visual Studio 2008'deki Yenilikler: ASP.NET Web Sitesi proje şablonlarıyla birlikte gelen web.config, ASP.NET AJAX Uzantılarına gerekli tüm başvuruları otomatik olarak içerir ve ek işlevleri etkinleştirmek için yorumlanmamış yapılandırma bilgileri bölümleri içerir. ASP.NET 2.0 AJAX Uzantıları yüklendiğinde Visual Studio 2005'in de benzer şablonları vardı. Ancak Visual Studio 2008'de AJAX Uzantıları varsayılan olarak geri çevrilir (yani varsayılan olarak bunlara başvurulur, ancak başvuru olarak kaldırılabilir).

(Tam boyutlu görüntüyü görüntülemek için tıklayın)

1. Web sitenizi başlatmak için F5 tuşuna basın. Kısmi işlemeyi desteklemek için kaynak kodunda değişiklik yapılmasına gerek olmadığını, yalnızca işaretlemenin değiştirildiğini unutmayın.

Web sitenizi başlattığınızda, kısmi işlemenin etkinleştirildiğini görmeniz gerekir, çünkü düğmeye tıkladığınızda titreme olmaz ve sayfa kaydırma konumunda herhangi bir değişiklik olmaz (bu örnek bunu göstermez). Düğmeye tıkladıktan sonra sayfanın işlenmiş kaynağına bakarsanız, aslında bir geri göndermenin gerçekleşmediğini doğrular- özgün etiket metni hala kaynak işaretlemesinin bir parçasıdır ve etiket JavaScript aracılığıyla değişmiştir.

Visual Studio 2008, ASP.NET AJAX-Enabled bir web sitesi için önceden tanımlanmış bir şablonla birlikte gelmiyor. Ancak, Visual Studio 2005 ve ASP.NET 2.0 AJAX Uzantıları yüklüyse, visual studio 2005'in içinde böyle bir şablon kullanılabilir. Sonuç olarak, bir web sitesi yapılandırmak ve AJAX-Enabled Web Sitesi şablonuyla başlamak büyük olasılıkla daha da kolay olacaktır. Bunun nedeni, şablonun tam olarak yapılandırılmış bir web.config dosyası (Web Hizmetleri erişimi ve JSON serileştirmesi - JavaScript Nesne Gösterimi dahil olmak üzere tüm ASP.NET AJAX Uzantılarını desteklemesi) ve varsayılan olarak ana Web Forms sayfasında bir UpdatePanel ve ContentTemplate içermesi gerekir. Bu varsayılan sayfayla kısmi işlemeyi etkinleştirmek, bu kılavuzun 10. Adımını yeniden ziyaret etmek ve denetimleri sayfaya bırakmak kadar kolaydır.

ScriptManager Denetimi

ScriptManager Denetim Başvurusu

Markup-Enabled Özellikleri:

Özellik Adı	Tür	Açıklama
AllowCustomErrors-Redirect	Bool	Hataları işlemek için web.config dosyasının özel hata bölümünün kullanılıp kullanılmayacağını belirtir.
AsyncPostBackError-Message	Dize	Hata oluşursa istemciye gönderilen hata iletisini alır veya ayarlar.
AsyncPostBack-Timeout	Int32	İstemcinin zaman uyumsuz isteğin tamamlanmasını beklemesi gereken varsayılan süreyi alır veya ayarlar.
EnableScript-Globalization	Bool	Betik genelleştirmenin etkinleştirilip etkinleştirilmediğini alır veya ayarlar.
EnableScript-Localization	Bool	Betik yerelleştirmenin etkinleştirilip etkinleştirilmediğini alır veya ayarlar.
ScriptLoadTimeout	Int32	betiklerin istemciye yüklenmesi için izin verilen saniye sayısını belirler
Scriptmode	Sabit Listesi (Otomatik, Hata Ayıklama, Serbest Bırakma, Devral)	Betiklerin yayın sürümlerinin işlenip işlenmeyeceğini alır veya ayarlar
ScriptPath	Dize	İstemciye gönderilecek betik dosyalarının konumunun kök yolunu alır veya ayarlar.

Code-Only Özellikleri:

Özellik Adı	Tür	Açıklama
Authenticationservice	AuthenticationService-Manager	İstemciye gönderilecek ASP.NET Kimlik Doğrulama Hizmeti proxy'si hakkındaki ayrıntıları alır.
IsDebuggingEnabled	Bool	Betik ve kod hata ayıklamanın etkinleştirilip etkinleştirilmediğini alır.
IsInAsyncPostback	Bool	Sayfanın şu anda zaman uyumsuz bir geri gönderme isteğinde olup olmadığını alır.
Profileservice	ProfileService-Manager	İstemciye gönderilecek ASP.NET Profil Oluşturma Hizmeti proxy'si hakkındaki ayrıntıları alır.
Betikler	Koleksiyon<Betiği-Başvurusu>	İstemciye gönderilecek betik başvurularından oluşan bir koleksiyon alır.
Hizmetler	Koleksiyon<Hizmeti-Başvurusu>	İstemciye gönderilecek Bir Web Hizmeti proxy başvuruları koleksiyonunu alır.
Supportspartialrendering	Bool	Geçerli istemcinin kısmi işlemeyi destekleyip desteklemediğini alır. Bu özellik false döndürürse, tüm sayfa istekleri standart geri gönderme olur.

Ortak Kod Yöntemleri:

Yöntem Adı	Tür	Açıklama
SetFocus(dize)	Void	İstek tamamlandığında istemcinin odağını belirli bir denetime ayarlar.

İşaretlemeyi Alt Öğeleri:

Tag	Açıklama
<Authenticationservice>	ASP.NET kimlik doğrulama hizmetinin proxy'si hakkındaki ayrıntıları sağlar.
<Profileservice>	ASP.NET profil oluşturma hizmetinin proxy'si hakkındaki ayrıntıları sağlar.
<Betikler>	Ek betik başvuruları sağlar.
<asp:ScriptReference>	Belirli bir betik başvurusunu belirtir.
<Hizmet>	Ara sunucu sınıfları oluşturulacak ek Web Hizmeti başvuruları sağlar.
<asp:ServiceReference>	Belirli bir Web Hizmeti başvurusunu belirtir.

ScriptManager denetimi, ASP.NET AJAX Uzantıları için temel çekirdektir. Betik kitaplığına (kapsamlı istemci tarafı betik türü sistemi dahil) erişim sağlar, kısmi işlemeyi destekler ve ek ASP.NET hizmetleri (kimlik doğrulaması ve profil oluşturma gibi) için kapsamlı destek sağlar. ScriptManager denetimi, istemci betikleri için genelleştirme ve yerelleştirme desteği de sağlar.

Alternatif ve Ek Betikler Sağlama

Microsoft ASP.NET 2.0 AJAX Uzantıları hem hata ayıklama hem de sürüm sürümlerindeki betik kodunun tamamını başvurulan derlemelere eklenmiş kaynaklar olarak içerse de geliştiriciler ScriptManager'ı özelleştirilmiş betik dosyalarına yönlendirmenin yanı sıra gerekli ek betikleri de kaydedebilir.

Genellikle dahil edilen betikler (Sys.WebForms ad alanını ve özel yazma sistemini destekleyenler gibi) için varsayılan bağlamayı geçersiz kılmak için ScriptManager sınıfının olayına ResolveScriptReference kaydolabilirsiniz. Bu yöntem çağrıldığında, olay işleyicisi söz konusu betik dosyasının yolunu değiştirme fırsatına sahiptir; Betik yöneticisi daha sonra istemciye betiklerin farklı veya özelleştirilmiş bir kopyasını gönderir.

Ayrıca, betik başvuruları (sınıf tarafından ScriptReference temsil edilir) program aracılığıyla veya işaretleme yoluyla dahil edilebilir. Bunu yapmak için koleksiyonu program aracılığıyla değiştirin ScriptManager.Scripts veya ScriptManager denetiminin <Scripts> birinci düzey alt öğesi olan etiketin altına etiketler ekleyin<asp:ScriptReference>.

UpdatePanels için Özel Hata İşleme

Güncelleştirmeler UpdatePanel denetimleri tarafından belirtilen tetikleyicilerle işlense de, hata işleme ve özel hata iletileri desteği sayfanın ScriptManager denetim örneği tarafından işlenir. Bu, daha sonra özel özel durum işleme mantığı sağlayabilen bir olay AsyncPostBackErrorolan öğesini sayfaya göstererek gerçekleştirilir.

AsyncPostBackError olayını kullanarak özelliğini belirtebilirsiniz AsyncPostBackErrorMessage . Bu özellik, geri çağırma tamamlandıktan sonra bir uyarı kutusunun tetiklenmesine neden olur.

Varsayılan uyarı kutusunu kullanmak yerine istemci tarafı özelleştirmesi de mümkündür; örneğin, varsayılan tarayıcı kalıcı iletişim kutusu yerine özelleştirilmiş <div> bir öğe görüntülemek isteyebilirsiniz. Bu durumda, hatayı istemci betiğinde işleyebilirsiniz:

Listeleme 5: Özel hataları görüntülemek için istemci tarafı betiği

<script type= text/javascript >
 <!--
 Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
 function Request_End(sender, args)
 {
 if (args.get_error() != undefined)
 {
 var errorMessage =  ;
 if (args.get_response().get_statusCode() ==  200 )
 {
 errorMessage = args.get_error().message;
 }
 else
 {
 // the server wasn't the problem...
 errorMessage =  An unknown error occurred... ;
 }
 // do something with the errorMessage here.
 // now make sure the system knows we handled the error.
 args.set_errorHandled(true);
 }
 }
 // -->
</script>

Basitçe belirtmek gerekirse, yukarıdaki betik, zaman uyumsuz isteğin tamamlandığı zaman için istemci tarafı AJAX çalışma zamanına bir geri çağırma kaydeder. Daha sonra bir hatanın bildirilip bildirildiğini denetler ve bildirildiyse ayrıntılarını işler ve son olarak çalışma zamanına hatanın özel betikte işlendiğini gösterir.

Genelleştirme ve Yerelleştirme Desteği

ScriptManager denetimi, betik dizelerinin ve kullanıcı arabirimi bileşenlerinin yerelleştirilmesi için kapsamlı destek sağlar; ancak, bu konu bu teknik incelemenin kapsamı dışındadır. Daha fazla bilgi için bkz. ASP.NET AJAX Uzantılarında Genelleştirme Desteği teknik incelemesi.

UpdatePanel Denetimi

UpdatePanel Denetim Başvurusu

Markup-Enabled Özellikleri:

Özellik Adı	Tür	Açıklama
ChildrenAsTriggers	bool	Alt denetimlerin geri göndermede yenilemeyi otomatik olarak çağırıp çağırmayacağını belirtir.
Rendermode	sabit listesi (Blok, Satır içi)	İçeriğin görsel olarak nasıl sunulacağını belirtir.
Updatemode	sabit listesi (Her Zaman, Koşullu)	UpdatePanel'in kısmi işleme sırasında her zaman yenilenip yenilenmeyeceğini veya yalnızca bir tetikleyiciye isabet edildiğinde yenilenip yenilenmeyeceğini belirtir.

Code-Only Özellikleri:

Özellik Adı	Tür	Açıklama
IsInPartialRendering	bool	UpdatePanel'in geçerli istek için kısmi işlemeyi destekleyip desteklemediğini alır.
Contenttemplate	Itemplate	Güncelleştirme isteği için işaretleme şablonunu alır.
Contenttemplatecontainer	Denetim	Güncelleştirme isteği için programlı şablonu alır.
Tetikleyiciler	UpdatePanel- TriggerCollection	Geçerli UpdatePanel ile ilişkili tetikleyicilerin listesini alır.

Ortak Kod Yöntemleri:

Yöntem Adı	Tür	Açıklama
Update()	Void	Belirtilen UpdatePanel'i program aracılığıyla Güncelleştirmeler. Sunucu isteğinin, başka türlü denenmemiş bir UpdatePanel'in kısmi bir işlemesini tetiklemesini sağlar.

İşaretlemeyi Alt Öğeler:

Tag	Açıklama
<Contenttemplate>	Kısmi işleme sonucunu işlemek için kullanılacak işaretlemeyi belirtir. asp:UpdatePanel> alt öğesi<.
<Tetikleyiciler>	Bu UpdatePanel'in güncelleştirilmesiyle ilişkili n denetim koleksiyonunu belirtir. asp:UpdatePanel> alt öğesi<.
<asp:AsyncPostBackTrigger>	Verilen UpdatePanel için kısmi sayfa işlemeyi çağıran bir tetikleyici belirtir. Bu, söz konusu UpdatePanel'in alt öğelerinden biri olarak bir denetim olabilir veya olmayabilir. Olay adına ayrıntılı. Tetikleyicilerin <>Alt Öğesi.
<asp:PostBackTrigger>	Sayfanın tamamının yenilenmesine neden olan bir denetim belirtir. Bu, söz konusu UpdatePanel'in alt öğelerinden biri olarak bir denetim olabilir veya olmayabilir. Nesneye ayrıntılı. Tetikleyicilerin <>Alt Öğesi.

Denetim UpdatePanel , AJAX Uzantılarının kısmi işleme işlevinde yer alacak sunucu tarafı içeriği sınırlandıran denetimdir. Sayfada bulunabilecek UpdatePanel denetimlerinin sayısıyla ilgili bir sınır yoktur ve bunlar iç içe yerleştirilebilir. Her UpdatePanel yalıtılmış olduğundan, her biri bağımsız olarak çalışabilir (aynı anda çalışan iki UpdatePanel'iniz olabilir ve sayfanın geri gönderme özelliğinden bağımsız olarak sayfanın farklı bölümlerini işleyebilirsiniz).

UpdatePanel denetimi öncelikli olarak denetim tetikleyicileriyle ilgilenir. Varsayılan olarak, bir updatePanel'in ContentTemplate içinde bulunan ve geri gönderme oluşturan tüm denetimler UpdatePanel için tetikleyici olarak kaydedilir. Bu, UpdatePanel'in kullanıcı denetimleriyle varsayılan veriye bağlı denetimlerle (GridView gibi) çalışabileceği ve betikte programlanabileceği anlamına gelir.

Varsayılan olarak, kısmi bir sayfa işleme tetiklendiğinde, sayfadaki tüm UpdatePanel denetimleri yenilenir( UpdatePanel denetimleri bu tür bir eylem için tanımlanmış tetikleyiciler olsun veya olmasın). Örneğin, bir UpdatePanel bir Düğme denetimi tanımlarsa ve bu Düğme denetimine tıklanırsa, bu sayfadaki tüm UpdatePanel denetimleri varsayılan olarak yenilenir. Bunun nedeni, UpdatePanel özelliğinin varsayılan olarak UpdateMode olarak ayarlanmış Alwaysolmasıdır. Alternatif olarak, UpdateMode özelliğini olarak Conditionalayarlayabilirsiniz. Başka bir deyişle UpdatePanel yalnızca belirli bir tetikleyiciye basıldığında yenilenir.

Özel Denetim Notları

UpdatePanel herhangi bir kullanıcı denetimine veya özel denetime eklenebilir; ancak, bu denetimlerin dahil olduğu sayfa, EnablePartialRendering özelliği true olarak ayarlanmış bir ScriptManager denetimi de içermelidir.

Web Özel Denetimleri kullanırken bunu hesaba eklemenin bir yolu, sınıfın korumalı CreateChildControls() yöntemini CompositeControl geçersiz kılmaktır. Bunu yaparak, sayfanın kısmi işlemeyi desteklediğini belirlerseniz denetimin alt öğeleriyle dış dünya arasına bir UpdatePanel ekleyebilirsiniz; aksi takdirde, alt denetimleri bir kapsayıcı Control örneğine katmanlayabilirsiniz.

UpdatePanel Ile İlgili Dikkat Edilmesi Gerekenler

UpdatePanel, JavaScript XMLHttpRequest bağlamında ASP.NET geri göndermeleri sarmalayıp kara kutu gibi çalışır. Ancak, hem davranış hem de hız açısından dikkate alınması gereken önemli performans konuları vardır. UpdatePanel'in nasıl çalıştığını anlamak için, ne zaman kullanılacağına en iyi şekilde karar verebilmeniz için AJAX değişimini incelemeniz gerekir. Aşağıdaki örnek mevcut bir siteyi ve Firebug uzantısıyla Mozilla Firefox'u kullanır (Firebug XMLHttpRequest verilerini yakalar).

Diğer şeylerin dışında, form veya denetimdeki şehir ve eyalet alanını doldurması gereken posta kodu metin kutusuna sahip bir form düşünün. Bu form sonunda kullanıcının adı, adresi ve iletişim bilgileri dahil olmak üzere üyelik bilgilerini toplar. Belirli bir projenin gereksinimlerine göre dikkate alınması gereken birçok tasarım konusu vardır.

(Tam boyutlu görüntüyü görüntülemek için tıklayın)

(Tam boyutlu görüntüyü görüntülemek için tıklayın)

Bu uygulamanın özgün yinelemesinde posta kodu, şehir ve eyalet dahil olmak üzere kullanıcı kayıt verilerinin tamamını bir alan bir denetim oluşturulmuştu. Denetimin tamamı bir UpdatePanel içinde sarmalandı ve bir Web Formu'na bırakıldı. Posta kodu kullanıcı tarafından girildiğinde, UpdatePanel olayı algılar (tetikleyicileri belirterek veya True olarak ayarlanmış ChildrenAsTriggers özelliğini kullanarak arka uçta karşılık gelen TextChanged olayı). AJAX, FireBug tarafından yakalandığı gibi UpdatePanel içindeki tüm alanları yayınlar (sağdaki diyagrama bakın).

Ekran görüntüsünde de belirtildiği gibi, UpdatePanel içindeki her denetimden alınan değerler (bu örnekte tümü boş) ve ViewState alanı teslim edilir. Tüm söylenenlere göre, bu isteği yapmak için yalnızca beş bayt veri gerektiğinde 9 kb'den fazla veri gönderilir. Yanıt daha da şişirilir: bir metin alanını ve açılan alanı güncelleştirmek için istemciye toplamda 57 kb gönderilir.

ASP.NET AJAX'ın sunuyu nasıl güncelleştirdiğini görmek de ilginizi çekebilir. UpdatePanel'in güncelleştirme isteğinin yanıt bölümü soldaki Firebug konsol ekranında gösterilir; özel olarak formüle edilmiş, istemci betiği tarafından ayrılmış ve sonra sayfada yeniden birleştirilmiş, kanalla ayrılmış bir dizedir. Özellikle ASP.NET AJAX, UpdatePanel'inizi temsil eden istemcideki HTML öğesinin innerHTML özelliğini ayarlar. Tarayıcı DOM'yi yeniden oluşturduğundan, işlenmesi gereken bilgi miktarına bağlı olarak biraz gecikme yaşanıyor.

DOM'un yeniden yenilenmesi bir dizi ek sorunu tetikler:

(Tam boyutlu görüntüyü görüntülemek için tıklayın)

• Odaklanmış HTML öğesi UpdatePanel içindeyse odağı kaybeder. Bu nedenle, posta kodu metin kutusundan çıkmak için Sekme tuşuna basan kullanıcılar için sonraki hedefleri Şehir metin kutusu olacaktır. Ancak, UpdatePanel ekranı yeniledikten sonra formda artık odak kalmaz ve Sekme tuşuna basıldığında odak öğeleri (bağlantılar gibi) vurgulanır.
• DOM öğelerine erişen herhangi bir tür özel istemci tarafı betiği kullanılıyorsa, işlevler tarafından kalıcı olan başvurular kısmi geri göndermeden sonra geçersiz hale gelebilir.

UpdatePanel'lerin tümünü yakalama çözümleri olması amaçlanmamıştır. Bunun yerine, prototip oluşturma, küçük denetim güncelleştirmeleri gibi belirli durumlar için hızlı bir çözüm sağlar ve .NET nesne modeli hakkında bilgi sahibi olabilecek ancak DOM ile daha az bilgi sahibi olabilecek ASP.NET geliştiricilere tanıdık bir arabirim sağlar. Uygulama senaryosuna bağlı olarak daha iyi performansa neden olabilecek bir dizi alternatif vardır:

• PageMethods ve JSON (JavaScript Nesne Gösterimi) kullanarak geliştiricinin bir sayfada bir web hizmeti çağrısı çağrılır gibi statik yöntemleri çağırmasına izin verir. Yöntemler statik olduğundan durum gerekli değildir; betik çağıranı parametreleri sağlar ve sonuç zaman uyumsuz olarak döndürülür.
• Uygulama genelinde birkaç yerde tek bir denetimin kullanılması gerekiyorsa Web Hizmeti ve JSON kullanmayı göz önünde bulundurun. Bu yine çok az özel çalışma gerektirir ve zaman uyumsuz olarak çalışır.

Web Hizmetleri veya Sayfa Yöntemleri aracılığıyla işlevsellik eklemenin dezavantajları da vardır. İlk ve en önemlisi, ASP.NET geliştiriciler genellikle kullanıcı denetimleri (.ascx dosyaları) halinde küçük işlevsellik bileşenleri oluşturma eğilimindedir. Sayfa yöntemleri bu dosyalarda barındırılamaz; gerçek .aspx sayfa sınıfı içinde barındırılmalıdır. Benzer şekilde web hizmetleri de .asmx sınıfı içinde barındırılmalıdır. Uygulamaya bağlı olarak, bu mimari Tek Sorumluluk İlkesi'ni ihlal edebilir, çünkü tek bir bileşenin işlevselliği artık çok az bağlı veya hiç bağlı olmayan iki veya daha fazla fiziksel bileşene yayılır.

Son olarak, bir uygulama UpdatePanels kullanılmasını gerektiriyorsa, aşağıdaki yönergeler sorun giderme ve bakım konusunda yardımcı olmalıdır.

• UpdatePanel'leri yalnızca birimler içinde değil, aynı zamanda kod birimlerinde de mümkün olduğunca az iç içe yerleştir. Örneğin, Bir Denetimi sarmalayan bir Sayfada UpdatePanel'e sahip olmak, bu Denetim de UpdatePanel içeren başka bir Denetim içeren bir UpdatePanel içerirken, çapraz birim iç içe yerleştirmedir. Bu, hangi öğelerin yenilenmesi gerektiğini net tutmaya yardımcı olur ve alt UpdatePanel'lerde beklenmeyen yenilemeleri önler.
• ChildrenAsTriggers özelliğini false olarak ayarlayın ve tetikleyici olayları açıkça ayarlayın. Koleksiyonu kullanmak olayları işlemenin <Triggers> çok daha net bir yoludur ve beklenmeyen davranışları önleyerek bakım görevlerine yardımcı olabilir ve bir geliştiriciyi bir olayı kabul etmeye zorlar.
• İşlevsellik elde etmek için mümkün olan en küçük birimi kullanın. Posta kodu hizmetinin tartışmasında belirtildiği gibi, yalnızca en düşük değeri kaydırmak sunucuya, toplam işlemeye ve istemci-sunucu değişiminin ayak izine kadar olan süreyi kısaltarak performansı artırır.

UpdateProgress Denetimi

UpdateProgress Denetim Başvurusu

Markup-Enabled Özellikleri:

Özellik Adı	Tür	Açıklama
AssociatedUpdate-PanelID	Dize	Bu UpdateProgress'in rapor vermesi gereken UpdatePanel kimliğini belirtir.
DisplayAfter	int	Zaman uyumsuz istek başladıktan sonra bu denetim görüntülenmeden önce milisaniye cinsinden zaman aşımını belirtir.
DynamicLayout	bool	İlerleme durumunun dinamik olarak işlenip işlenmeyeceğini belirtir.

İşaretlemeyi Alt Öğeler:

Tag	Açıklama
<Progresstemplate>	Bu denetimle görüntülenecek içerik için denetim şablonu kümesini içerir.

UpdateProgress denetimi, sunucuya taşımak için gerekli çalışmaları yaparken kullanıcılarınızın ilgisini korumak için bir ölçü geri bildirim sağlar. Bu, özellikle kullanıcıların çoğu sayfa yenilemeye ve durum çubuğunun vurgulandığına alışmış olduğundan, belirgin olmasa da, kullanıcılarınızın bir şey yaptığınızı bilmelerine yardımcı olabilir.

Not olarak, UpdateProgress denetimleri sayfa hiyerarşisinde herhangi bir yerde görünebilir. Ancak, bir alt UpdatePanel'den kısmi bir geri göndermenin başlatıldığı durumlarda (UpdatePanel başka bir UpdatePanel içinde iç içe yerleştirilmişse), alt UpdatePanel'i tetikleyen geri göndermeler, alt UpdatePanel ve üst UpdatePanel için UpdateProgress şablonlarının görüntülenmesine neden olur. Ancak tetikleyici, üst UpdatePanel'in doğrudan alt öğesiyse, yalnızca üst öğeyle ilişkilendirilmiş UpdateProgress şablonları görüntülenir.

Özet

Microsoft ASP.NET AJAX uzantıları, web içeriğini daha erişilebilir hale getirmek ve web uygulamalarınıza daha zengin bir kullanıcı deneyimi sağlamak için tasarlanmış gelişmiş ürünlerdir. ASP.NET AJAX Uzantıları kapsamında ScriptManager, UpdatePanel ve UpdateProgress denetimleri de dahil olmak üzere kısmi sayfa işleme denetimleri araç setinin en görünür bileşenlerinden bazılarıdır.

ScriptManager bileşeni, Uzantılar için istemci JavaScript'in sağlanmasını tümleştirir ve çeşitli sunucu ve istemci tarafı bileşenlerinin minimum geliştirme yatırımıyla birlikte çalışmasını sağlar.

UpdatePanel denetimi görünür sihirli kutudur. UpdatePanel içindeki işaretleme, sunucu tarafı Codebehind'e sahip olabilir ve sayfa yenilemeyi tetiklemez. UpdatePanel denetimleri iç içe yerleştirilmiş olabilir ve diğer UpdatePanel'lerdeki denetimlere bağımlı olabilir. Varsayılan olarak, UpdatePanel'ler alt denetimleri tarafından çağrılan geri göndermeleri işler, ancak bu işlevsellik bildirim temelli veya programlı olarak ince ayarlanabilir.

UpdatePanel denetimini kullanırken geliştiriciler olası performans etkisinin farkında olmalıdır. Olası alternatifler web hizmetlerini ve sayfa yöntemlerini içerir, ancak uygulamanın tasarımı dikkate alınmalıdır.

UpdateProgress denetimi, kullanıcının yok sayılmadığını ve sayfanın kullanıcı girişine yanıt vermek için herhangi bir işlem yapmadığı sırada sahne arkası isteğinin devam ettiğini bilmesini sağlar. Ayrıca kısmi işleme sonuçlarını iptal etme özelliğini de içerir.

Bu araçlar birlikte, sunucunun kullanıcı için daha az görünür olmasını sağlayarak ve iş akışını daha az kesintiye uğratarak zengin ve sorunsuz bir kullanıcı deneyimi oluşturmaya yardımcı olur.

Biyografi

Scott Cate, 1997'den beri Microsoft Web teknolojileriyle çalışmaktadır ve Bilgi Bankası Yazılımı çözümlerine odaklanan ASP.NET tabanlı uygulamalar yazma konusunda uzmanlaştığı myKB.com (www.myKB.com) Başkanıdır. Scott'a ScottCate.com adresinden scott.cate@myKB.com veya blogundan e-posta yoluyla ulaşabilirsiniz

Sonraki