SwitchPartManager：在UpdatePanel中灵活地切换不同用户控件
2007-03-29 03:18 by 老赵, 8395 visits这是一个很常见的使用场景，尤其是出现了UpdatePanel之后：页面中有一排菜单，点击菜单中的每一项，都会使某个UpdatePanel中出现不同的控制面板。在开发时，往往会将每个的控制面板写成不同的用户控件，点击菜单时事实上就是在UpdatePanel中放入不同的用户控件。
如果要开发这样的功能，从理论上来说并不困难，但是如果要能够在控件之间灵活切换，甚至要从控件A的某个操作中切换到控件B，可能就需要增加控件之间的耦合度了。因此，如何控制这样的切换似乎需要细细考虑一下。
在这里，我选择使用一个第三方的控件来进行统一处理，这个控件就是SwitchPartManager。在了解这个控件的实现之前，我们先来看一下一个简单的使用示例吧。
使用效果
首先，在页面中，会使用两个按钮在两个用户控件之间进行切换。在SwitchPartManager的PlaceHolderUpdatePanelID属性指定了作为容器的UpdatePanel，而点击不同的按钮，则会调用ScriptManager的SwitchTo方法切换至不同的控件。如下：
<jeffz:SwitchPartManager ID="SwitchPartManager1" runat="server" PlaceHolderUpdatePanelID="UpdatePanel1" /> <asp:Button ID="ButtonA" runat="server" Text="ControlA" OnClick="ButtonA_Click" /> <asp:Button ID="ButtonB" runat="server" Text="ControlB" OnClick="ButtonB_Click" /> <hr /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>
protected void Page_Load(object sender, EventArgs e) { ScriptManager sm = ScriptManager.GetCurrent(this); sm.RegisterAsyncPostBackControl(this.ButtonA); sm.RegisterAsyncPostBackControl(this.ButtonB); } protected void ButtonA_Click(object sender, EventArgs e) { SwitchPartManager.GetCurrent(this).SwitchTo("ControlA"); } protected void ButtonB_Click(object sender, EventArgs e) { SwitchPartManager.GetCurrent(this).SwitchTo("ControlB"); }
在ControlA中有一个按钮，点击它之后将会切换到ControlB。如下：
This is Control A. <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Switch To Control B</asp:LinkButton>
protected void LinkButton1_Click(object sender, EventArgs e) { SwitchPartManager.GetCurrent(this.Page).SwitchTo("ControlB"); }
而在ControlB中，它自身含有一个UpdatePanel和一个按钮，点击按钮则可以刷新时间：
This is Control B <br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <%= DateTime.Now %> <asp:Button ID="Button1" runat="server" Text="Refresh Time" /> </ContentTemplate> </asp:UpdatePanel>
编写代码，控件之间的切换都是非常的容易。大家可以点击这里查看使用效果。
SwitchPartManager控件实现
实现这么一个控件其实比想象中容易许多。处理这个问题的关键在于如何在（同步或异步）PostBack后正确地恢复当前已经加载的控件。只要能够正确恢复了控件的状态，剩下的问题都是由ASP.NET自身的机制来完成了，例如触发事件等等。
我们来看一下SwitchPartManager的关键实现代码：
[PersistChildren(false)] [ParseChildren(true)] [NonVisualControl] public class SwitchPartManager : Control { private const string HiddenElementName = "__PartType__"; private bool initialized = false; private string partTypeToSave = null; public static SwitchPartManager GetCurrent(Page page) { return page.Items[typeof(SwitchPartManager)] as SwitchPartManager; } protected override void OnInit(EventArgs e) { base.OnInit(e); if (this.Page.Items.Contains(typeof(SwitchPartManager))) { throw new InvalidOperationException("One SwitchPartManager per page."); } this.Page.Items[typeof(SwitchPartManager)] = this; this.Page.InitComplete += new EventHandler(Page_InitComplete); this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete); } private void Page_InitComplete(object sender, EventArgs e) { this.initialized = true; string partType = this.Page.Request.Params[SwitchPartManager.HiddenElementName]; if (partType != null) { this.SwitchTo(partType); } } private void Page_PreRenderComplete(object sender, EventArgs e) { if (!String.IsNullOrEmpty(this.partTypeToSave)) { ScriptManager.RegisterHiddenField(
this.Page, SwitchPartManager.HiddenElementName, this.partTypeToSave); } } // 得到作为容器的UpdatePanel private UpdatePanel PlaceHolderUpdatePanel { get { // ... } } public void SwitchTo(string partType) { Control container = this.PlaceHolderUpdatePanel.ContentTemplateContainer; container.Controls.Clear(); Control control = this.Page.LoadControl(partType + ".ascx"); control.ID = "JustToPreserveUniqueName"; container.Controls.Add(control); this.partTypeToSave = partType; } }
SwitchTo方法是用于切换用户控件的方法，它会将UpdatePanel内已有的控件（例如从ControlA切换到ControlB时，UpdatePanel中已经有了ControlA）清除，然后再向UpdatePanel中添加新的控件。
我在这里将当前当前的控件标识记录在私有变量partTypeToSave中，它会在Page的PreRenderComplete时作为<input type="hidden" />的形式输出。我在这里使用了HiddenField作为保留控件选择状态的方式，这样可以避免因为ViewState被禁用而导致的数据丢失。
这样，我们的页面在PostBack之后，就能够通过接受到的信息来恢复UpdatePanel的控件了。我在在Page的InitComplete时恢复UpdatePanel中的控件——很容易，直接使用SwitchTo方法就可以了。
这几乎就是SwitchPartManager的完整代码。其实这个类相当的简单，但是它的价值却不小。但是根据我的经验，似乎为了自己的项目开发Custom Control的朋友不多，大家大都是在写用户控件（ascx）。其实在有些时候，为自己的应用编写一个Custom Control，尤其是用于“管理”的控件，其实能够使页面的逻辑变得清晰许多。
点击这里下载SwitchPartManager的代码。
算是为今天的WebCast准备的。