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