ASP.NET AJAX UpdatePanel Tetikleyicilerini AnlamaUnderstanding ASP.NET AJAX UpdatePanel Triggers

Scott tarafındanby Scott Cate

PDF 'YI indirDownload PDF

Visual Studio 'da biçimlendirme düzenleyicisinde çalışırken, bir UpdatePanel denetiminin iki alt öğesi olduğunu fark edebilirsiniz (IntelliSense 'den).When working in the markup editor in Visual Studio, you may notice (from IntelliSense) that there are two child elements of an UpdatePanel control. Bunlardan biri, sayfada bulunan denetimleri belirten (veya kullanıyorsanız Kullanıcı denetimi), öğenin bulunduğu UpdatePanel denetiminin kısmi bir işlemesini tetikleyecek Tetikleyiciler öğesidir.One of which is the Triggers element, which specifies the controls on the page (or the user control, if you are using one) that will trigger a partial render of the UpdatePanel control in which the element resides.

GirişIntroduction

Microsoft 'un ASP.NET teknolojisi, nesne odaklı ve olay odaklı bir programlama modeli sağlar ve derlenmiş kodun avantajları ile birleştirir.Microsoft's ASP.NET technology brings an object-oriented and event-driven programming model and unites it with the benefits of compiled code. Ancak, sunucu tarafı işleme modelinin, teknolojide bulunan birçok Sakıncaı vardır ve bunların birçoğu Microsoft ASP.NET 3,5 AJAX uzantılarında eklenen yeni özellikler tarafından çözülebilir.However, its server-side processing model has several drawbacks inherent in the technology, many of which can be addressed by the new features included in the Microsoft ASP.NET 3.5 AJAX Extensions. Bu uzantılar, tam sayfa yenilemesi gerektirmeden sayfaların kısmi işlenmesi, istemci betiği (ASP.NET profil oluşturma API 'SI dahil) ve kapsamlı bir istemci tarafı API 'SI aracılığıyla Web hizmetlerine erişme özelliği dahil olmak üzere birçok yeni zengin istemci özelliğini etkinleştirir ASP.NET sunucu tarafı denetim kümesinde görülen denetim düzenlerinin çoğunu yansıtmak için tasarlanmıştır.These extensions enable many new rich client features, including partial rendering of pages without requiring a full page refresh, the ability to access Web Services via client script (including the ASP.NET profiling API), and an extensive client-side API designed to mirror many of the control schemes seen in the ASP.NET server-side control set.

Bu Teknik İnceleme, ASP.NET AJAX UpdatePanel bileşeninin XML Tetikleyicileri işlevlerini inceler.This whitepaper examines the XML Triggers functionality of the ASP.NET AJAX UpdatePanel component. XML Tetikleyicileri, belirli UpdatePanel denetimleri için kısmi işlemeye neden olabilecek bileşenler üzerinde ayrıntılı denetim sağlar.XML Triggers give granular control over the components that can cause partial rendering for specific UpdatePanel controls.

Bu Teknik İnceleme, 3,5 ve Visual Studio 2008 .NET Framework Beta 2 sürümünü temel alır.This whitepaper is based on the Beta 2 release of the .NET Framework 3.5 and Visual Studio 2008. Daha önce ASP.NET 2,0 'e hedeflenmiş bir eklenti derlemesi olan ASP.NET AJAX Uzantıları artık .NET Framework temel sınıf kitaplığıyla tümleşiktir.The ASP.NET AJAX Extensions, previously an add-on assembly targeted at ASP.NET 2.0, are now integrated into the .NET Framework Base Class Library. Bu Teknik İnceleme, Visual Studio 2008, Visual Web Developer Express değil, Visual Studio ile çalıştığın ve Visual Studio 'nun Kullanıcı arabirimine göre izlenecek yollar sağlayacak olduğunu varsaymaktadır (kod listelerinin ne olursa olsun tamamen uyumlu olacağını da unutmayın) geliştirme ortamı).This whitepaper also assumes that you will be working with Visual Studio 2008, not Visual Web Developer Express, and will provide walkthroughs according to the user interface of Visual Studio (although code listings will be entirely compatible regardless of development environment).

TetikleyicilerTriggers

Verilen bir UpdatePanel için Tetikleyiciler, varsayılan olarak, AutoPostBack özelliği trueolarak ayarlanan TextBox denetimleri dahil, bir geri gönderme çağıran tüm alt denetimleri otomatik olarak ekler.Triggers for a given UpdatePanel, by default, automatically include any child controls that invoke a postback, including (for example) TextBox controls that have their AutoPostBack property set to true. Ancak, Tetikleyiciler biçimlendirme kullanılarak bildirimli olarak da dahil edilebilir; Bu, UpdatePanel denetim bildiriminin <triggers> bölümü içinde yapılır.However, triggers can also be included declaratively using markup; this is done within the <triggers> section of the UpdatePanel control declaration. Tetikleyicilere Triggers Collection özelliği aracılığıyla erişilebilmesine rağmen, çalışma zamanında (örneğin, bir denetim tasarım zamanında kullanılabilir değilse), Page_Load sayfanıza ait ScriptManager nesnesinin RegisterAsyncPostBackControl(Control) yöntemini kullanarak (örneğin, tasarım zamanında kullanılabilir değilse) tüm kısmi işleme tetikleyicilerini kaydetmeniz önerilir.Although triggers can be accessed via the Triggers collection property, it is recommended that you register any partial render triggers at run-time (for instance, if a control is not available at design time) by using the RegisterAsyncPostBackControl(Control) method of the ScriptManager object for your page, within the Page_Load event. Sayfaların durum bilgisiz olduğunu ve bu denetimlerin her oluşturulışında bu denetimleri yeniden kaydetmeniz gerektiğini unutmayın.Remember that Pages are stateless, and so you should re-register these controls every time they are created.

Otomatik alt tetikleyici ekleme özelliği de devre dışı bırakılabilir (böylece geri göndermeler oluşturan alt denetimler, ChildrenAsTriggers özelliğini falseolarak ayarlayarak otomatik olarak kısmi oluşturmaları tetiklemez).Automatic child trigger inclusion can also be disabled (so that child controls that create postbacks do not automatically trigger partial renders) by setting the ChildrenAsTriggers property to false. Bu, hangi belirli denetimlerin bir sayfa işlemesini çağırabileceği ve tavsiye edilen tüm olayları işlemek yerine bir olaya yanıt vermeyi kabul edecek şekilde en büyük esnekliği sağlar.This allows you the greatest flexibility in assigning which specific controls may invoke a page render, and is recommended, so that a developer will opt-in to respond to an event, rather than handling any events that may arise.

UpdatePanel denetimleri iç içe olduğunda, UpdateMode değeri Conditionalolarak ayarlandığında, alt UpdatePanel tetikleniyorsa ancak üst öğe değilse, yalnızca alt UpdatePanel yenilenir.Note that when UpdatePanel controls are nested, when the UpdateMode is set to Conditional, if the child UpdatePanel is triggered, but the parent is not, then only the child UpdatePanel will refresh. Ancak, üst UpdatePanel yenilenirse, alt UpdatePanel da yenilenir.However, if the parent UpdatePanel is refreshed, then the child UpdatePanel will also be refreshed.

<> öğesini tetiklerThe <Triggers> Element

Visual Studio 'da biçimlendirme düzenleyicisinde çalışırken, bir UpdatePanel denetiminin iki alt öğesi olduğunu fark edebilirsiniz (IntelliSense 'den).When working in the markup editor in Visual Studio, you may notice (from IntelliSense) that there are two child elements of an UpdatePanel control. En sık görülen öğe, genellikle güncelleştirme paneli tarafından tutulacak içeriği (kısmi işleme etkinleştiriyoruz içerik) kapsülleyen <ContentTemplate> öğesidir.The most-frequently seen element is the <ContentTemplate> element, which essentially encapsulates the content that will be held by the update panel (the content for which we are enabling partial rendering). Diğer öğesi <Triggers> öğesidir ve bu, <tetikleme> öğenin bulunduğu UpdatePanel denetiminin kısmi işlemesini tetikleyebilecek, sayfadaki denetimleri (veya kullanıyorsanız Kullanıcı denetimi) belirtir.The other element is the <Triggers> element, which specifies the controls on the page (or the user control, if you are using one) that will trigger a partial render of the UpdatePanel control in which the <Triggers> element resides.

<Triggers> öğesi iki alt düğümün her birini içerebilir: <asp:AsyncPostBackTrigger> ve <asp:PostBackTrigger>.The <Triggers> element can contain any number each of two child nodes: <asp:AsyncPostBackTrigger> and <asp:PostBackTrigger>. Her ikisi de iki özniteliği kabul eder, ControlID ve EventNameve geçerli kapsülleme birimi içinde herhangi bir denetimi belirtebilir (örneğin, UpdatePanel denetiminiz bir Web Kullanıcı denetimi içinde bulunuyorsa, Kullanıcı denetiminin bulunacağı sayfada bir denetime başvurulması gerekmez).They both accept two attributes, ControlID and EventName, and can specify any Control within the current unit of encapsulation (for instance, if your UpdatePanel control resides within a Web User Control, you should not attempt to reference a Control on the Page on which the User Control will reside).

<asp:AsyncPostBackTrigger> öğesi özellikle, yalnızca bu tetikleyicinin alt öğesi olan UpdatePanel 'ın değil, kapsülleme birimindeki herhangi bir UpdatePanel denetiminin alt öğesi olarak var olan bir denetimden herhangi bir olay hedefleyebileceği için yararlıdır.The <asp:AsyncPostBackTrigger> element is particularly useful in that it can target any event from a Control that exists as a child of any UpdatePanel control in the unit of encapsulation, not just the UpdatePanel under which this trigger is a child. Bu nedenle, kısmi sayfa güncelleştirmesini tetiklemek için herhangi bir denetim yapılabilir.Thus, any control can be made to trigger a partial page update.

Benzer şekilde, <asp:PostBackTrigger> öğesi kısmi sayfa işlemeyi tetiklemek için kullanılabilir, ancak sunucu için tam gidiş dönüş gerektiren bir tane.Similarly, the <asp:PostBackTrigger> element can be used to trigger a partial page render, but one that requires a full round-trip to the server. Bu tetikleyici öğesi, bir denetim normalde kısmi sayfa işlemeyi tetikleyeceğinden (örneğin, bir UpdatePanel denetiminin <ContentTemplate> öğesinde bir Button denetimi olduğunda) tam sayfa işlemesini zorlamak için de kullanılabilir.This trigger element can also be used to force a full page render when a control would otherwise normally trigger a partial page render (for instance, when a Button control exists in the <ContentTemplate> element of an UpdatePanel control). Yine, PostBackTrigger öğesi, geçerli kapsülleme birimindeki herhangi bir UpdatePanel denetiminin alt öğesi olan herhangi bir denetimi belirtebilir.Again, the PostBackTrigger element can specify any control that is a child of any UpdatePanel control in the current unit of encapsulation.

<Tetikleyiciler> öğe başvurusu<Triggers> Element Reference

Biçimlendirme alt öğeleri:Markup Descendants:

TagTag AçıklamaDescription
<ASP: AsyncPostBackTrigger><asp:AsyncPostBackTrigger> Bu tetikleyici başvurusunu içeren UpdatePanel için kısmi sayfa güncelleştirmesine neden olacak bir denetim ve olay belirtir.Specifies a control and event that will cause a partial page update for the UpdatePanel that contains this trigger reference.
<ASP: PostBackTrigger><asp:PostBackTrigger> Tam sayfa güncelleştirmesine neden olacak bir denetim ve olay belirtir (tam sayfa yenileme).Specifies a control and event that will cause a full page update (a full page refresh). Bu etiket, bir denetim başka bir şekilde kısmi işleme tetikleyeceği zaman tam yenilemeyi zorlamak için kullanılabilir.This tag can be used to force a full refresh when a control would otherwise trigger partial rendering.

İzlenecek yol: çapraz UpdatePanel TetikleyicileriWalkthrough: Cross-UpdatePanel Triggers

  1. Kısmi işlemeyi etkinleştirmek için ScriptManager nesnesi ayarlanmış yeni bir ASP.NET sayfası oluşturun.Create a new ASP.NET page with a ScriptManager object set to enable partial rendering. Bu sayfaya iki UpdatePanel ekleyin-ilk içinde bir etiket denetimi (Label1) ve iki düğme denetimi (Button1 ve Button2) ekleyin.Add two UpdatePanels to this page - in the first, include a Label control ( Label1 ) and two Button controls ( Button1 and Button2 ). Button1, her Ikisini de güncelleştirmek için tıklamalıdır ve bu satırları güncelleştirmek için tıklayın.Button1 should say Click to Update Both and Button2 should say Click to Update This, or something along those lines. İkinci UpdatePanel 'da yalnızca bir etiket denetimi (etiket 2) ekleyin, ancak ForeColor özelliğini ayırt etmek için varsayılan değer dışında bir değere ayarlayın.In the second UpdatePanel, include only a Label control ( Label2 ), but set its ForeColor property to something other than the default to differentiate it.
  2. Her iki UpdatePanel etiketlerinin UpdateMode özelliğini Conditionalolarak ayarlayın.Set the UpdateMode property of both UpdatePanel tags to Conditional.

Listeleme 1: default. aspx için biçimlendirme:Listing 1: Markup for default.aspx:



<%@ 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">
         <asp:ScriptManager EnablePartialRendering="true"
            ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server"
               UpdateMode="Conditional">
               <ContentTemplate>
                  <asp:Label ID="Label1" runat="server" />
                  <br />
                  <asp:Button ID="Button1" runat="server"
                     Text="Update Both Panels" OnClick="Button1_Click" />
                  <asp:Button ID="Button2" runat="server"
                     Text="Update This Panel" OnClick="Button2_Click" />
               </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" runat="server"
               UpdateMode="Conditional">
               <ContentTemplate>
                  <asp:Label ID="Label2" runat="server" ForeColor="red" />
               </ContentTemplate>
               <Triggers>
                  <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
               </Triggers>
            </asp:UpdatePanel>
         </div>
      </form>
   </body>
</html>

  1. Button1 için Click olay işleyicisinde, Label1. Text ve etiket 2. Text ' i zamana bağımlı bir değere ayarlayın (DateTime. Now. ToLongTimeString ()).In the Click event handler for Button1, set Label1.Text and Label2.Text to something time-dependent (such as DateTime.Now.ToLongTimeString()). Button2 için Click olay işleyicisi için, yalnızca Label1. Text değerini zamana bağlı değere ayarlayın.For the Click event handler for Button2, set only Label1.Text to the time-dependent value.

Listeleme 2: default.aspx.cs içinde codebehind (kırpılmış):Listing 2: Codebehind (trimmed) in default.aspx.cs:

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
        Label2.Text = DateTime.Now.ToLongTimeString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }
}
  1. Projeyi derlemek ve çalıştırmak için F5 tuşuna basın.Press F5 to build and run the project. Her iki paneli de Güncelleştir ' e tıkladığınızda her iki etiket de metni değiştirir; Ancak, bu paneli Güncelleştir ' e tıkladığınızda yalnızca Label1 güncelleştirmeleri vardır.Note that, when you click Update Both Panels, both labels change text; however, when you click Update This Panel, only Label1 updates.

(Tam boyutlu görüntüyü görüntülemek Için tıklayın)(Click to view full-size image)

ÜzerindeUnder the Hood

Yeni oluşturduğumuz örneği kullanarak, ASP.NET AJAX 'un yaptığı ve UpdatePanel çapraz panel tetikleyicilerimizin nasıl çalıştığı hakkında bir göz atalım.Utilizing the example we just constructed, we can take a look at what ASP.NET AJAX is doing and how our UpdatePanel cross-panel triggers work. Bunu yapmak için, oluşturulan sayfa kaynağı HTML 'si ile ve FireBug adlı bir, ile birlikte çalışan Mozilla Firefox uzantısının yanı sıra AJAX geri yükleme işlemlerini kolayca inceleyebilirsiniz.To do so, we will work with the generated page source HTML, as well as the Mozilla Firefox extension called FireBug - with it, we can easily examine the AJAX postbacks. Ayrıca, Lutz Roeder tarafından sunulan .NET yansıtıcısı aracını da kullanacağız.We will also use the .NET Reflector tool by Lutz Roeder. Bu araçların her ikisi de çevrimiçi olarak kullanılabilir ve bir internet aramayla bulunabilir.Both of these tools are freely available online, and can be found with an internet search.

Sayfa kaynak kodu incelemesi, neredeyse hiçbir şey yok demektir; UpdatePanel denetimleri <div> kapsayıcılar olarak işlenir ve <asp:ScriptManager>tarafından sağlanmış olan betik kaynağı bilgilerini görebiliriz.An examination of the page source code shows almost nothing out of the ordinary; the UpdatePanel controls are rendered as <div> containers, and we can see the script resource includes provided by the <asp:ScriptManager>. Ayrıca, AJAX istemci komut dosyası kitaplığı için dahili olan PageRequestManager 'a yönelik yeni bir AJAX 'a özgü çağrı de vardır.There are also some new AJAX-specific calls to the PageRequestManager that are internal to the AJAX client script library. Son olarak, <span> kapsayıcılar olarak işlenen iki <asp:Label> denetimi ile işlenen <input> düğmeleriyle bir tane olmak üzere iki UpdatePanel kapsayıcısı görüyoruz.Finally, we see the two UpdatePanel containers - one with the rendered <input> buttons with the two <asp:Label> controls rendered as <span> containers. (FireBug 'da DOM ağacını incelerse, etiketlerin görünür bir içerik üretmediğinden emin olmak için soluk olduğunu fark edeceksiniz.(If you inspect the DOM tree in FireBug, you will notice that the labels are dimmed to indicate that they are not producing visible content).

Bu paneli Güncelleştir düğmesine tıklayın ve en üstteki UpdatePanel 'ın geçerli sunucu saatine göre güncelleştirileceğini unutmayın.Click the Update This Panel button, and notice the top UpdatePanel will be updated with the current server time. FireBug 'da, isteği incelemek için konsol sekmesini seçin.In FireBug, choose the Console tab so that you can examine the request. Önce POST isteği parametrelerini inceleyin:Examine the POST request parameters first:

(Tam boyutlu görüntüyü görüntülemek Için tıklayın)(Click to view full-size image)

UpdatePanel 'ın, bir ScriptManager1 parametresi aracılığıyla hangi denetim ağacının tetiklenme hakkında tam olarak sunucu tarafı AJAX koduna (UpdatePanel1 denetiminin Button1 olduğunu unutmayın.Note that the UpdatePanel has indicated to the server-side AJAX code precisely which control tree was fired via the ScriptManager1 parameter: Button1 of the UpdatePanel1 control. Şimdi, her Iki paneli de Güncelleştir düğmesine tıklayın.Now, click on the Update Both Panels button. Ardından, yanıtı inceleyerek, bir dizede ayarlanan, kanal ile ayrılmış bir dizi değişken görüyoruz; Özellikle, en üst UpdatePanel, UpdatePanel1, tarayıcıya gönderilen HTML 'nin tamamen olduğunu görüyoruz.Then, examining the response, we see a pipe-delimited series of variables set in a string; specifically, we see the top UpdatePanel, UpdatePanel1, has the entirety of its HTML sent to the browser. AJAX istemci betiği kitaplığı, UpdatePanel 'ın özgün HTML içeriğini .innerHTML özelliği aracılığıyla yeni içerikle değiştirir ve bu nedenle sunucu değiştirilen içeriği sunucudan HTML olarak gönderir.The AJAX client script library substitutes the UpdatePanel's original HTML content with the new content via the .innerHTML property, and so the server sends the changed content from the server as HTML.

Şimdi, her Iki paneli de Güncelleştir düğmesine tıklayın ve sonuçları sunucudan inceleyin.Now, click on the Update Both Panels button and examine the results from the server. Sonuçlar çok benzer-her iki UpdatePanel de sunucudan yeni HTML alır.The results are very similar - both UpdatePanels receive new HTML from the server. Önceki geri çağırmada olduğu gibi, ek sayfa durumu gönderilir.As with the previous callback, additional page state is sent.

Görebileceğiniz gibi, AJAX geri gönderme işlemini gerçekleştirmek için özel kod kullanıldığından, AJAX istemci betiği kitaplığı ek kod olmadan form geri göndermeler yapamaz.As we can see, because no special code is utilized to perform an AJAX postback, the AJAX client script library is able to intercept form postbacks without any additional code. Sunucu denetimleri otomatik olarak JavaScript kullanır ve bu sayede otomatik betik kaynağı ekleme, PostBackOptions sınıfı tarafından ilk olarak elde edilen form doğrulama ve durum için önceden bir form doğrulaması ve durumu için kod otomatik olarak , ve ClientScriptManager Sınıfı.Server controls automatically utilize JavaScript so that they do not automatically submit the form - ASP.NET automatically injects code for form validation and state already, primarily achieved by automatic script resource inclusion, the PostBackOptions class, and the ClientScriptManager class.

Örneğin, bir CheckBox denetimi düşünün; .NET yansıtıcısı 'nda sınıf ayrıştırılmış derlemesini inceleyin.For instance, consider a CheckBox control; examine the class disassembly in .NET Reflector. Bunu yapmak için, System. Web derlemenizi açık olduğundan emin olun ve RenderInputTag metodunu açarak System.Web.UI.WebControls.CheckBox sınıfına gidin.To do so, ensure that your System.Web assembly is open, and navigate to the System.Web.UI.WebControls.CheckBox class, opening the RenderInputTag method. AutoPostBack özelliğini denetleyen bir koşullu arayın:Look for a conditional that checks the AutoPostBack property:

(Tam boyutlu görüntüyü görüntülemek Için tıklayın)(Click to view full-size image)

CheckBox denetiminde otomatik geri gönderme etkinleştirildiğinde (AutoPostBack özelliği true olduğunda), sonuç <input> etiketi bu nedenle onclick özniteliğinde bir ASP.NET olay işleme betiği ile işlenir.When automatic postback is enabled on a CheckBox control (via the AutoPostBack property being true), the resultant <input> tag is therefore rendered with an ASP.NET event handling script in its onclick attribute. Formun gönderiminin bölünmesi, daha sonra ASP.NET AJAX 'un, büyük olasılıkla ımprecıse dize değiştirme kullanılarak oluşabilecek olası önemli değişikliklerden kaçınılmasına izin verir.The interception of the form's submission, then, allows ASP.NET AJAX to be injected into the page nonintrusively, helping to avoid any potential breaking changes that might occur by utilizing a possibly-imprecise string replacement. Ayrıca, bu, herhangi bir özel ASP.net denetiminin bir UpdatePanel kapsayıcısı içinde kullanımını desteklemek için ek kod olmadan ASP.NET AJAX 'un gücünden yararlanmasına olanak sağlar.Furthermore, this enables any custom ASP.NET control to utilize the power of ASP.NET AJAX without any additional code to support its use within an UpdatePanel container.

<triggers> işlevi, updateControls _için PageRequestManager çağrısında başlatılan değerlere karşılık gelir (ASP.NET AJAX istemci komut dosyası kitaplığı, bir alt çizgiyle başlayan yöntemlerin, olayların ve alan adlarının iç olarak işaretlendiğine ve kitaplığın kendisi dışında kullanılması için uygun olmayan kuralları kullanacağını unutmayın.The <triggers> functionality corresponds to the values initialized in the PageRequestManager call to _updateControls (note that the ASP.NET AJAX client script library utilizes the convention that methods, events, and field names that begin with an underscore are marked as internal, and are not meant for use outside of the library itself). Bununla birlikte, AJAX geri göndermeler için hangi denetimlerin hedeflendiğini gözlemlebiliriz.With it, we can observe which controls are intended to cause AJAX postbacks.

Örneğin, sayfaya iki ek denetim ekleyelim, tek bir denetimi UpdatePanel dışında bırakıp bir UpdatePanel içinde bırakarak.For example, let's add two additional controls to the page, leaving one control outside of the UpdatePanels entirely, and leaving one within an UpdatePanel. Üst UpdatePanel içinde bir CheckBox denetimi ekleyeceğiz ve liste içinde tanımlanmış bir dizi renge sahip bir DropDownList bırakmalısınız.We will add a CheckBox control within the upper UpdatePanel, and drop a DropDownList with a number of colors defined within the list. Yeni biçimlendirme aşağıda verilmiştir:Here is the new markup:

Listeleme 3: yeni biçimlendirmeListing 3: New Markup

<%@ 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 id="Head1" 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"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label1" runat="server" /><br />
 <asp:Button ID="Button1" runat="server"
 Text="Update Both Panels" OnClick="Button1_Click" />
 <asp:Button ID="Button2" runat="server"
 Text="Update This Panel" OnClick="Button2_Click" />
 <asp:CheckBox ID="cbDate" runat="server"
 Text="Include Date" AutoPostBack="false"
 OnCheckedChanged="cbDate_CheckedChanged" />
 </ContentTemplate>
 </asp:UpdatePanel>
 <asp:UpdatePanel ID="UpdatePanel2" runat="server"
 UpdateMode="Conditional">
 <ContentTemplate>
 <asp:Label ID="Label2" runat="server"
 ForeColor="red" />
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="Button1" 
 EventName="Click" />
 <asp:AsyncPostBackTrigger ControlID="ddlColor" 
 EventName="SelectedIndexChanged" />
 </Triggers>
 </asp:UpdatePanel>
 <asp:DropDownList ID="ddlColor" runat="server"
 AutoPostBack="true"
 OnSelectedIndexChanged="ddlColor_SelectedIndexChanged">
 <asp:ListItem Selected="true" Value="Red" />
 <asp:ListItem Value="Blue" />
 <asp:ListItem Value="Green" />
 </asp:DropDownList>
 </div>
 </form>
 </body>
</html>

Yeni arka plan kodu aşağıda verilmiştir:And here is the new code-behind:

Listeleme 4: codebehindListing 4: Codebehind

public partial class _Default : System.Web.UI.Page
{
    protected void Button1_Click(object sender, EventArgs e)
    {
        if (cbDate.Checked)
        {
            Label1.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
            Label2.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
        }
        else
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
            Label2.Text = DateTime.Now.ToLongTimeString();
        }
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        if (cbDate.Checked)
        {
            Label1.Text = DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss");
        }
        else
        {
            Label1.Text = DateTime.Now.ToLongTimeString();
        }
    }
    protected void cbDate_CheckedChanged(object sender, EventArgs e)
    {
        cbDate.Font.Bold = cbDate.Checked;
    }
    protected void ddlColor_SelectedIndexChanged(object sender, EventArgs e)
    {
        Color c = Color.FromName(ddlColor.SelectedValue);
        Label2.ForeColor = c;
    }
}

Bu sayfanın arkasındaki düşünce, açılan listede ikinci etiketi göstermek için üç renkten birini seçerse, onay kutusunun her ikisi de kalın olup olmadığını ve etiketlerin de tarihi ve saati gösterip göstermeyeceğini belirler.The idea behind this page is that the drop-down list selects one of three colors to show the second label, that the check box determines both whether it is bold, and whether the labels display the date as well as the time. Onay kutusu bir AJAX güncelleştirmesine neden olmamalıdır, ancak bir UpdatePanel içinde barındırmasa bile açılan liste açılır.The check box should not cause an AJAX update, but the drop-down list should, even though it is not housed within an UpdatePanel.

(Tam boyutlu görüntüyü görüntülemek Için tıklayın)(Click to view full-size image)

Yukarıdaki ekran görüntüsünde gösterildiği gibi, tıklatılan en son düğme, bu paneli güncelleştirme, en son saati en alt süreden bağımsız olarak güncelleştiren doğru düğmedir.As is apparent in the above screen shot, the most-recent button to be clicked was the right button Update This Panel, which updated the top time independent of the bottom time. Tarih, alt etikette görünebildiğinden, tıklama arasında da geçiş yapıldı.The date was also switched off between clicks, as the date is visible in the bottom label. Son olarak, en alttaki etiketin rengi şunlardır: etiketin metinden daha yakın bir şekilde güncelleştirildiğinden, denetim durumunun önemli olduğunu ve kullanıcıların AJAX geri göndermeler aracılığıyla korunması beklendiğini gösterir.Finally of interest is the bottom label's color: it was updated more recently than the label's text, which demonstrates that control state is important, and users expect it to be preserved through AJAX postbacks. Ancaksaat güncelleştirilmedi.However, the time was not updated. Süre, denetimin sunucuda yeniden işlendiği sırada ASP.NET çalışma zamanı tarafından yorumlanmakta olan sayfanın __VIEWSTATE alanının kalıcılığı aracılığıyla otomatik olarak yeniden doldurulmuştur.The time was automatically repopulated through the persistence of the __VIEWSTATE field of the page being interpreted by the ASP.NET runtime when the control was being re-rendered on the server. ASP.NET AJAX sunucu kodu, denetimlerin durumu değiştirmekte olan yöntemleri tanımaz; yalnızca görünüm durumundan yeniden doldurulur ve uygun olan olayları çalıştırır.The ASP.NET AJAX server code does not recognize in which methods the controls are changing state; it simply repopulates from view state and then runs the events that are appropriate.

Ancak, sayfa_yükleme olayında zamanı başlattığını belirten, zaman doğru şekilde arttı bir şekilde kullanıma alınmalıdır.It should be pointed out, however, that had I initialized the time within the Page_Load event, the time would have been incremented correctly. Sonuç olarak, geliştiriciler uygun olay işleyicileri sırasında uygun kodun çalıştırılmakta olduğu konusunda dikkatli olmalıdır ve bir denetim olayı işleyicisi uygun olduğunda sayfa_yükleme kullanmaktan kaçının.Consequently, developers should be wary that the appropriate code is being run during the appropriate event handlers, and avoid use of Page_Load when a control event handler would be appropriate.

ÖzetSummary

ASP.NET AJAX Uzantıları UpdatePanel denetimi, çok yönlüdür ve güncelleştirilmesine neden olması gereken denetim olaylarını belirlemek için birkaç yöntem kullanabilir.The ASP.NET AJAX Extensions UpdatePanel control is versatile, and can utilize a number of methods for identifying control events that should cause it to be updated. Bu, alt denetimleri tarafından otomatik olarak güncelleştirilmesini destekler, ancak sayfada başka bir yerde denetim olaylarına da yanıt verebilir.It supports being updated automatically by its child controls, but can also respond to control events elsewhere on the page.

Sunucu işleme yükünün potansiyelini azaltmak için, bir UpdatePanel 'ın ChildrenAsTriggers özelliğinin falseolarak ayarlanması ve olayların varsayılan olarak dahil yerine kabul edilmesinin yapılması önerilir.To reduce potential for server processing load, it is recommended that the ChildrenAsTriggers property of an UpdatePanel be set to false, and that events be opted-into rather than included by default. Bu Ayrıca, doğrulama dahil olmak üzere istenmeyen etkileri ve giriş alanlarındaki değişiklikleri de önler.This also prevents any unneeded events from causing potentially-unwanted effects, including validation, and changes to input fields. Bu tür hatalar yalıtmak zor olabilir, çünkü sayfa kullanıcıya şeffaf bir şekilde güncelleştirilir ve neden bu nedenle hemen açık olmayabilir.These types of bugs may be difficult to isolate, because the page updates transparently to the user, and the cause may therefore not be immediately obvious.

ASP.NET AJAX form gönderi gönderme modelinin iç işleyişini inceleyerek, ASP.NET tarafından zaten sağlanmış olan Framework 'ün kullandığını tespit edebiliyoruz.By examining the inner workings of the ASP.NET AJAX form post interception model, we were able to determine that it utilizes the framework already provided by ASP.NET. Bunu yaparken, aynı Framework kullanılarak tasarlanan denetimlerle maksimum uyumluluğu korur ve sayfa için yazılan ek JavaScript üzerinde intrudes.In doing so, it preserves maximum compatibility with controls designed using the same framework, and intrudes minimally on any additional JavaScript written for the page.

BiyografisiBio

Ramiz Paveza, Tempismanda (www.Terralever.com), Tempe 'de önde gelen etkileşimli pazarlama firması olan, az bir .NET uygulama geliştiricisiyseniz.Rob Paveza is a senior .NET application developer at Terralever (www.terralever.com), a leading interactive marketing firm in Tempe, AZ. robpaveza@gmail.com' de erişilebilir ve blogu http://geekswithblogs.net/robp/adresinde bulunabilir.He can be reached at robpaveza@gmail.com, and his blog is located at http://geekswithblogs.net/robp/.

Scott, 1997 tarihinden itibaren Microsoft Web teknolojileriyle çalışmaktadır ve Bilgi Bankası yazılım çözümlerine odaklanmış ASP.NET tabanlı uygulamalar yazma konusunda uzmanımız myKB.com (www.myKB.com) Başkan Yardımcısı.Scott Cate has been working with Microsoft Web technologies since 1997 and is the President of myKB.com (www.myKB.com) where he specializes in writing ASP.NET based applications focused on Knowledge Base Software solutions. Scott 'da e-posta ile scott.cate@myKB.com veya blogundan ScottCate.com adresinden iletişim kurulabilirlerScott can be contacted via email at scott.cate@myKB.com or his blog at ScottCate.com