Expansion UpdatePanel control - solve problems layout design stage

• Download TBUpdatePanel - 49.93 KB

Introduction

Use ASP.NET AJAX developers, we will not miss this super UpdatePanel control, it can be easy to let the original design pages easily with AJAX results. But at the design stage to the use of typesetting UpdatePanel often our troubled placed in the control of the UpdatePanel not show the actual layout correct the situation.

For example we only simply lay aside TextBox and the Button two controls items in UpdatePanel

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <asp:Button ID="Button2" runat="server" Text="Button" />
    </ContentTemplate>
</asp:UpdatePanel>  

Button and TextBox theoretically should be in the same line, but in the design of the page to see the results, even after newline TextBox only showed Button, as shown below. But the run-time also to the normal, this result will be displayed in the design of complex pages often cause considerable problems.

Using the code

Some people's methods are lay aside Panel in UpdatePanel, the Panel set a fixed width width (800 px), to resolve the UpdatePanel layout design stage an abnormal state.

In fact UpdatePanel would cause such results at the design stage, is in the design stage UpdatePanel output HTML code did not set width, so we have inherited UpdatePanel down a new TBUpdatePanel rewrite, rewrite and re-adjust its output Designer design phase of the HTML code to solve this problem.

We first looked TBUpdatePanel the result, back relates in detail the revision way again. Same, only simply lays aside TextBox and the Button two controls items in TBUpdatePanel.

<bee:TBUpdatePanel ID="TBUpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </ContentTemplate>
</bee:TBUpdatePanel> 

In the design of the results page, shown below.

Actually revises the way certainly imagines you simply to be very more than, first composes TBUpdatePanel to inherit UpdatePanel, revises its Designer is only TBUpdatePanelDesigner.

    < _
    Designer(GetType(TBUpdatePanelDesigner)), _
    ToolboxData("<{0}:TBUpdatePanel runat="server"></{0}:TBUpdatePanel>") _
    > _
    Public Class TBUpdatePanel
        Inherits System.Web.UI.UpdatePanel

    End Class

How again comes is composes TBUpdatePanelDesigner, TBUpdatePanelDesigner inherits UpdatePanel original UpdatePanelDesigner, covers writes the GetDesignTimeHtml method to readjust the output HTML code. UpdatePanelDesigner the originally output HTML code following chart shows.

Very obviously, its most outer layer table by no means assigns witdh only then to be able to cause the design stage the unusual situation, therefore we so long as suppose table width are 100% may solve this question. The TBUpdatePanelDesigner complete formula code is as follows, the so simple revision was allowed forever to get rid of UpdatePanel the typesetting to puzzle.

    ''' <summary>
    ''' Expansion TBUpdatePanel control of the design of model behavior.
    ''' </summary>
    Public Class TBUpdatePanelDesigner
        Inherits System.Web.UI.Design.UpdatePanelDesigner

        Public Overrides Function GetDesignTimeHtml(ByVal regions As DesignerRegionCollection) As String
            Dim sHTML As String

            sHTML = MyBase.GetDesignTimeHtml(regions)
            sHTML = Left(sHTML, 7) & " width=""100%"" " & Mid(sHTML, 8)
            Return sHTML
        End Function
    End Class