在某些时候，使用UpdatePanel可以极大的提升开发效率并且获得比较好的用户体验，尤其是做SharePoint开发时。老早就看过MSDN上申明UpdatePanel对TreeView不支持，前段时间在使用时，果然不行，比如选择了某节点但是选择样式压根就不起作用。但是我一向是有问题就解决问题，没问题找问题，抱着这种心态，总算解决了该问题。下面说下解决方案吧：
1: <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
2: <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
3: <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
4: Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
5: <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
6: <%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
7: <%@ Import Namespace="Microsoft.SharePoint" %>
8: <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
9: Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
10: <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BusinessContactsUserControl.ascx.cs"
11: Inherits="SP_FuDeng.WebParts.BusinessContacts.BusinessContactsUserControl" %>
12: <%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
13: <style>
14: .HeaderStyle td
15: {
16: cursor: pointer;
17: }
18:
19: .Current
20: {
21: background-color: rgb(240, 131, 0);
22: }
23: .txt
24: {
25: width: 96%;
26: margin: 0px 2px 0px 2px;
27: }
28: .SelectedNodeStyle
29: {
30: color: #003687;
31: border: solid 1px #71a9ff;
32: background-color: #c6ddff;
33: padding: 2px 2px 2px 2px;
34: }
35: </style>
36: <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
37: </asp:ScriptManagerProxy>
38: <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
39: <tr>
40: <td id="leftlist" class="leftbg" valign="top" width="180">
41: <div style="width: 175px; overflow: auto; height: 470px;">
42: <asp:TreeView ID="tv_Orgs" runat="server" OnSelectedNodeChanged="tv_Orgs_SelectedNodeChanged"
43: ImageSet="Simple" NodeIndent="10">
44: <HoverNodeStyle Font-Underline="True" ForeColor="#DD5555" />
45: <NodeStyle Font-Bold="false" Font-Names="Verdana" Font-Size="12px" ForeColor="Black"
46: HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px"/>
47: <ParentNodeStyle Font-Bold="False" />
48: <SelectedNodeStyle Font-Size="14px" ForeColor="#DD5555"
49: HorizontalPadding="5px" VerticalPadding="0px" CssClass="SelectedNodeStyle" />
50: </asp:TreeView>
51: </div>
52: </td>
53: <td valign="top">
54: <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="upInfo" runat="server">
55: <ProgressTemplate>
56: <div style="width: 100%; text-align: center;">
57: <strong><span style="font-size: 20px; color: Blue;">正在加载数据，请稍后...</span></strong>
58: </div>
59: </ProgressTemplate>
60: </asp:UpdateProgress>
61: <asp:UpdatePanel ID="upInfo" runat="server">
62: <ContentTemplate>
63: <table border="0" cellspacing="0" width="100%">
64: <tr>
65: <td class="rt_dh">
66: <%--<div class="search_bg">
67: <asp:TextBox runat="server" CssClass="search" ID="txtSearch" /> <a runat="server"
68: onserverclick="btnSearch_ServerClick" id="btnSearch">
69: <img align="absmiddle" border="0" src="/images/search.png" /></a>
70: </div>--%>
71: <table border="0" cellpadding="0" cellspacing="1" class="table" id="tbContacts" style="border: 1px solid rgb(240, 131, 0);">
72: <%-- <tr>
73: <td colspan="5" style="text-align: right">
74: <asp:ImageButton ID="ImageButton1" ImageUrl="/images/search.png" OnClick="btnSearch_ServerClick"
75: runat="server" />
76: </td>
77: </tr>--%>
78: <tr class="HeaderStyle">
79: <td style="width: 95px;">
80: <span>英文名</span>
81: </td>
82: <td style="width: 69px">
83: <span>姓名</span>
84: </td>
85: <td style="width: 69px">
86: <span>员工编号</span>
87: </td>
88: <td>
89: <span>邮箱</span>
90: </td>
91: <td style="width: 99px">
92: <span>手机</span>
93: </td>
94: <td style="width: 107px">
95: <span>座机</span>
96: </td>
97: <td>
98: <span>部门</span>
99: </td>
100: </tr>
101: <tr class="HeaderStyle">
102: <td style="width: 95px;">
103: <asp:TextBox runat="server" ID="txtDisplayName" Width="86" CssClass="txt" />
104: </td>
105: <td style="width: 69px">
106: <asp:TextBox runat="server" ID="txtChineseName" Width="60" CssClass="txt" />
107: </td>
108: <td style="width: 69px">
109: <asp:TextBox runat="server" ID="txtEmployeeNo" Width="60" CssClass="txt" />
110: </td>
111: <td>
112: <asp:TextBox runat="server" ID="txtEmail" CssClass="txt" />
113: </td>
114: <td style="width: 99px">
115: <asp:TextBox runat="server" Width="90" ID="txtCellPhone" CssClass="txt" />
116: </td>
117: <td style="width: 107px">
118: <asp:TextBox runat="server" Width="98" ID="txtExtensionNo" CssClass="txt" />
119: </td>
120: <td>
121: <asp:ImageButton ID="ImageButton2" ImageUrl="/images/search.png" OnClick="btnSearch_ServerClick"
122: runat="server" />
123: </td>
124: </tr>
125: <asp:Repeater runat="server" ID="rptContacts">
126: <ItemTemplate>
127: <tr class='<%# Container.ItemIndex%2==0?"AlternatingRowStyle": "RowStyle"%>' onmouseout="changeback(this);"
128: onmouseover="changeto(this);">
129: <td style="width: 95px;">
130: <a href="javascript:void(0);" onclick='<%# string.Format("ShowMyWin(\"{0}\",\"/_LAYOUTS/extend/ShowInfo.aspx?username={1}\");",Eval("DisplayName"),Server.UrlEncode(Eval("EmoloyeeADAccount").ToString())) %>'>
131: <%# Eval("DisplayName") %></a>
132: </td>
133: <td style="width: 69px">
134: <%# Eval("ChineseName") %>
135: </td>
136: <td style="width: 69px">
137: <%# Eval("EmployeeNo") %>
138: </td>
139: <td>
140: <%# Eval("Email") %>
141: </td>
142: <td style="width: 99px">
143: <%# Eval("CellPhone") %>
144: </td>
145: <td style="width: 107px">
146: <%# Eval("ExtensionNo")%>
147: </td>
148: <td>
149: <%# Eval("department")%>
150: </td>
151: </tr>
152: </ItemTemplate>
153: </asp:Repeater>
154: </table>
155: <div class="meneame">
156: <webdiyer:AspNetPager ID="anp_DataPages" runat="server" PageSize="10" OnPageChanged="anp_DataPages_PageChanged"
157: CustomInfoHTML="第%CurrentPageIndex%页，共%PageCount%页，每页%PageSize%条" ShowCustomInfoSection="Left">
158: </webdiyer:AspNetPager>
159: </div>
160: </td>
161: </tr>
162: </table>
163: </ContentTemplate>
164: <Triggers>
165: <asp:AsyncPostBackTrigger ControlID="tv_Orgs" EventName="SelectedNodeChanged" />
166: </Triggers>
167: </asp:UpdatePanel>
168: </td>
169: </tr>
170: </table>
后台代码如下：
1: protected void tv_Orgs_SelectedNodeChanged(object sender, EventArgs e)
2: {
3: BindData(true);
4: ScriptManager.RegisterClientScriptBlock(upInfo, upInfo.GetType(), Guid.NewGuid().ToString("N"), @"
5: $(function(){
6: $('#leftlist td.SelectedNodeStyle').removeClass('SelectedNodeStyle').find('a.SelectedNodeStyle').removeClass('SelectedNodeStyle');
7: $('#'+" + tv_Orgs.ClientID + @"_Data.selectedNodeID.value).parent().addClass('SelectedNodeStyle');
8: })", true);
9: }
从上面可以看出，关键代码在后台注册JS，其中 $('#'+" + tv_Orgs.ClientID + @"_Data.selectedNodeID.value).parent().addClass('SelectedNodeStyle');是比较重要的，这个“tv_Orgs.ClientID + @"_Data.selectedNodeID.value”，是在TreeView向客户端注册的js中找出来的，是用来获取选择节点的ID，有兴趣的可以看看微软有关TreeView的JS，没压缩的。
这里顺便说下，UpdatePanel结合Menu时，也会存在问题，比如菜单显示不出来，这个原因是Menu菜单的JS未注册，可以先移除UpdatePanel，找出Menu注册JS的那几个链接，然后手动加到页面上即可。
在UpdatePanel中使用某些控件时，你可能会遇到很多杂七杂八的问题，遇到了请不要慌，其实仔细琢磨下，都是有解决方案的。
说几个感受：
- 有问题并不可怕，可怕的是没有解决方案。
- 很多后台解决不了或者很难解决的问题，使用前台JS却很容易搞定。
- 多一项技能，有时候就是多一条活路。多会一门语言，有时候就是多打开一扇理解的天窗。
