7: Control Development in a Partial Postback Environment in Visual Studio .NET

Generation GTIN - 13 in Visual Studio .NET 7: Control Development in a Partial Postback Environment
7: Control Development in a Partial Postback Environment
Make EAN 13 In VS .NET
Using Barcode printer for ASP.NET Control to generate, create European Article Number 13 image in ASP.NET applications.
So far, so good When we add a HoverCard to a test page, shown in Listing 716, it works as expected We can drag it around by the title bar and it displays the information correctly
Encode Barcode In Visual Studio .NET
Using Barcode encoder for ASP.NET Control to generate, create bar code image in ASP.NET applications.
Listing 716 HoverCard Test Page
Making EAN-13 In Visual Studio .NET
Using Barcode drawer for VS .NET Control to generate, create GTIN - 13 image in Visual Studio .NET applications.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="HoverCardTesteraspxcs" Inherits="_7HoverCardTester" %> <%@ Register Assembly="Controls" Namespace="Controls" TagPrefix="cc1" %> <html> <head runat="server"> <title>HoverCard Tester</title> </head> <body style="width:100%;height:750px"> <form id="form1" runat="server"> <asp:ScriptManager ID="SM1" runat="server" /> <cc1:HoverCard ID="HC" runat="server" /> </form> </body> </html>
EAN-13 Supplement 5 Encoder In Visual Studio .NET
Using Barcode creation for ASP.NET Control to generate, create EAN13 image in ASP.NET applications.
Figure 713 shows the HoverCard s initial position, and Figure 714 shows the HoverCard s position after we ve dragged it a bit to the right
Make USS Code 39 In Visual Studio .NET
Using Barcode maker for ASP.NET Control to generate, create Code39 image in ASP.NET applications.
Figure 713 The HoverCard s initial location
Barcode Encoder In .NET Framework
Using Barcode drawer for ASP.NET Control to generate, create bar code image in ASP.NET applications.
The Effe cts of a Partial Postback on Client Components
Code128 Creation In .NET Framework
Using Barcode encoder for ASP.NET Control to generate, create Code 128 image in ASP.NET applications.
Figure 714 The HoverCard after we ve dragged it a bit
Encode Barcode In .NET Framework
Using Barcode creator for ASP.NET Control to generate, create barcode image in ASP.NET applications.
However, problems start to occur when the HoverCard is placed within a div tag that is positioned somewhere on the page The HoverCard s initial position seems to be offset by the div tag s position on the screen, and clicking its header causes the HoverCard to initially move by the same offset Listing 717 shows the modi cations to our test page with the div tag
Print Universal Product Code Version A In .NET
Using Barcode creator for ASP.NET Control to generate, create UPC-A Supplement 5 image in ASP.NET applications.
Listing 717 HoverCard Test Page with div Tag
Drawing International Standard Book Number In .NET
Using Barcode generation for ASP.NET Control to generate, create International Standard Book Number image in ASP.NET applications.
<form id="form1" runat="server"> <asp:ScriptManager ID="SM1" runat="server" /> <div style="position: absolute; top: 50px; left: 50px; height: 200px; width: 200px; border: solid 1px black;"> <cc1:HoverCard ID="HC" runat="server" /> </div> </form>
Bar Code Maker In Java
Using Barcode printer for Java Control to generate, create barcode image in Java applications.
Figure 715 shows the original position of the HoverCard, and Figure 716 shows the position of the HoverCard right after we clicked the HoverCard s header Notice how the cursor is in one spot, but the HoverCard is not under it
UPCA Generation In VS .NET
Using Barcode creation for VS .NET Control to generate, create GTIN - 12 image in VS .NET applications.
7: Control Development in a Partial Postback Environment
Barcode Recognizer In Java
Using Barcode scanner for Java Control to read, scan read, scan image in Java applications.
Figure 715 Initial position of the HoverCard in the div tag
EAN128 Creator In Java
Using Barcode encoder for Java Control to generate, create EAN / UCC - 14 image in Java applications.
Figure 716 The HoverCard s position after we ve clicked the header
Barcode Maker In VB.NET
Using Barcode drawer for .NET Control to generate, create barcode image in Visual Studio .NET applications.
This is obviously not good If we play around with our div tag, we can make the problem even more pronounced
Code 128 Creation In Visual C#.NET
Using Barcode encoder for VS .NET Control to generate, create Code 128 image in VS .NET applications.
NOTE
Data Matrix ECC200 Scanner In .NET
Using Barcode decoder for Visual Studio .NET Control to read, scan read, scan image in .NET framework applications.
The Purpose of Wrapping the HoverCard in a div Tag
Data Matrix 2d Barcode Maker In VS .NET
Using Barcode generator for VS .NET Control to generate, create Data Matrix ECC200 image in Visual Studio .NET applications.
Wrapping the HoverCard control in a div tag simulates it being contained within another control, a situation that is most likely going to come up
Code 128 Code Set B Encoder In Java
Using Barcode creation for Java Control to generate, create Code 128 image in Java applications.
The Effe cts of a Partial Postback on Client Components
Bar Code Drawer In Visual C#.NET
Using Barcode printer for .NET framework Control to generate, create barcode image in .NET applications.
Without delving into the causes of the positioning problems too deeply, we ll tell you two things First, the cause of the problem is the DragPanel Extender Second, if we move our HoverCard s associated DOM element so that it is a child of the body element rather than a child of the div tag, the problem is corrected
NOTE
DragPanelExtender
We re not trying to pick on the DragPanelExtender with this example We may be using it incorrectly, but it does help us elucidate the concept we re trying to cover very nicely
In light of this knowledge, we re going to alter our HoverCardjs le a bit so that it automatically moves the HoverCard s associated DOM element to be a child of the body tag instead of where it was originally positioned in the DOM tree Listing 718 highlights the changes needed to accomplish this
Listing 718 Altering HoverCard s initialize Method to Move the Element to the Body
initialize: function() { HoverCardcallBaseMethod(this, 'initialize'); var elm = thisget_element(); elmparentNoderemoveChild(elm); documentbodyappendChild(elm); },
Now when we view our test page, our HoverCard works as it did before and is positioned correctly But (there s always a but, isn t there ), we caused ourselves a hidden problem We caused the problem by moving the HoverCard from its original DOM location and therefore it won t automatically be destroyed when it is contained within an updating UpdatePanel Listing 719 sets up this situation by updating our page s markup and wrapping our HoverCard in an UpdatePanel
7: Control Development in a Partial Postback Environment
Listing 719 Placing Our HoverCard in an UpdatePanel
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div style="position: absolute; top: 50px; left: 50px; height: 200px; width: 200px; border: solid 1px black;"> <cc1:HoverCard ID="HC" runat="server" /> </div> <asp:Button ID="tstButton" Text="Update" runat="server" /> </ContentTemplate> </asp:UpdatePanel>
When we initially run the page, the HoverCard is displayed properly and we re able to move it about Figure 717 displays the initial view of the page
Figure 717 The initial view of the page wrapped in an UpdatePanel
However, when we cause the UpdatePanel to update by clicking the Update button, we receive a JavaScript error Figure 718 shows the error that we received The error states that Two components with the same id HCDrag PanelExtender can t be added to the application This is essentially telling us that there is a component with the ID HCDragPanelExtender already in SysApplication s list of managed components and that we re trying to add a second one Adding more than one component to SysApplication with the same ID is illegal, as we covered in 4, SysApplication