TreeView结合UpdatePanel使用时，SelectedNodeStyle不生效的解决方案

在某些时候，使用UpdatePanel可以极大的提升开发效率并且获得比较好的用户体验，尤其是做SharePoint开发时。老早就看过MSDN上申明UpdatePanel对TreeView不支持，前段时间在使用时，果然不行，比如选择了某节点但是选择样式压根就不起作用。但是我一向是有问题就解决问题，没问题找问题，抱着这种心态，总算解决了该问题。下面说下解决方案吧：

 

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BusinessContactsUserControl.ascx.cs"
    Inherits="SP_FuDeng.WebParts.BusinessContacts.BusinessContactsUserControl" %>
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<style>
    .HeaderStyle td
    {
        cursor: pointer;
    }

    .Current
    {
        background-color: rgb(240, 131, 0);
    }
    .txt
    {
        width: 96%;
        margin: 0px 2px 0px 2px;
    }
    .SelectedNodeStyle
    {
        color: #003687;
        border: solid 1px #71a9ff;
        background-color: #c6ddff;
        padding: 2px 2px 2px 2px;
    }
</style>
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
    <tr>
        <td id="leftlist" class="leftbg" valign="top" width="180">
            <div style="width: 175px; overflow: auto; height: 470px;">
                <asp:TreeView ID="tv_Orgs" runat="server" OnSelectedNodeChanged="tv_Orgs_SelectedNodeChanged"
                    ImageSet="Simple" NodeIndent="10">
                    <HoverNodeStyle Font-Underline="True" ForeColor="#DD5555" />
                    <NodeStyle Font-Bold="false" Font-Names="Verdana" Font-Size="12px" ForeColor="Black"
                        HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px"/>
                    <ParentNodeStyle Font-Bold="False" />
                    <SelectedNodeStyle Font-Size="14px" ForeColor="#DD5555"
                        HorizontalPadding="5px" VerticalPadding="0px" CssClass="SelectedNodeStyle" />
                </asp:TreeView>
            </div>
        </td>
        <td valign="top">
            <asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="upInfo" runat="server">
                <ProgressTemplate>
                    <div style="width: 100%; text-align: center;">
                        <strong><span style="font-size: 20px; color: Blue;">正在加载数据，请稍后...</span></strong>
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:UpdatePanel ID="upInfo" runat="server">
                <ContentTemplate>
                    <table border="0" cellspacing="0" width="100%">
                        <tr>
                            <td class="rt_dh">
                                <%--<div class="search_bg">
                                    <asp:TextBox runat="server" CssClass="search" ID="txtSearch" />&nbsp; <a runat="server"
                                        onserverclick="btnSearch_ServerClick" id="btnSearch">
                                        <img align="absmiddle" border="0" src="/images/search.png" /></a>
                                </div>--%>
                                <table border="0" cellpadding="0" cellspacing="1" class="table" id="tbContacts" style="border: 1px solid rgb(240, 131, 0);">
                                    <%-- <tr>
                                        <td colspan="5" style="text-align: right">
                                            <asp:ImageButton ID="ImageButton1" ImageUrl="/images/search.png" OnClick="btnSearch_ServerClick"
                                                runat="server" />
                                        </td>
                                    </tr>--%>
                                    <tr class="HeaderStyle">
                                        <td style="width: 95px;">
                                            <span>英文名</span>
                                        </td>
                                        <td style="width: 69px">
                                            <span>姓名</span>
                                        </td>
                                        <td style="width: 69px">
                                            <span>员工编号</span>
                                        </td>
                                        <td>
                                            <span>邮箱</span>
                                        </td>
                                        <td style="width: 99px">
                                            <span>手机</span>
                                        </td>
                                        <td style="width: 107px">
                                            <span>座机</span>
                                        </td>
                                        <td>
                                            <span>部门</span>
                                        </td>
                                    </tr>
                                    <tr class="HeaderStyle">
                                        <td style="width: 95px;">
                                            <asp:TextBox runat="server" ID="txtDisplayName" Width="86" CssClass="txt" />
                                        </td>
                                        <td style="width: 69px">
                                            <asp:TextBox runat="server" ID="txtChineseName" Width="60" CssClass="txt" />
                                        </td>
                                        <td style="width: 69px">
                                            <asp:TextBox runat="server" ID="txtEmployeeNo" Width="60" CssClass="txt" />
                                        </td>
                                        <td>
                                            <asp:TextBox runat="server" ID="txtEmail" CssClass="txt" />
                                        </td>
                                        <td style="width: 99px">
                                            <asp:TextBox runat="server" Width="90" ID="txtCellPhone" CssClass="txt" />
                                        </td>
                                        <td style="width: 107px">
                                            <asp:TextBox runat="server" Width="98" ID="txtExtensionNo" CssClass="txt" />
                                        </td>
                                        <td>
                                            <asp:ImageButton ID="ImageButton2" ImageUrl="/images/search.png" OnClick="btnSearch_ServerClick"
                                                runat="server" />
                                        </td>
                                    </tr>
                                    <asp:Repeater runat="server" ID="rptContacts">
                                        <ItemTemplate>
                                            <tr class='<%# Container.ItemIndex%2==0?"AlternatingRowStyle": "RowStyle"%>' onmouseout="changeback(this);"
                                                onmouseover="changeto(this);">
                                                <td style="width: 95px;">
                                                    <a href="javascript:void(0);" onclick='<%# string.Format("ShowMyWin(\"{0}\",\"/_LAYOUTS/extend/ShowInfo.aspx?username={1}\");",Eval("DisplayName"),Server.UrlEncode(Eval("EmoloyeeADAccount").ToString())) %>'>
                                                        <%# Eval("DisplayName") %></a>
                                                </td>
                                                <td style="width: 69px">
                                                    <%# Eval("ChineseName") %>
                                                </td>
                                                <td style="width: 69px">
                                                    <%# Eval("EmployeeNo") %>
                                                </td>
                                                <td>
                                                    <%# Eval("Email") %>
                                                </td>
                                                <td style="width: 99px">
                                                    <%# Eval("CellPhone") %>
                                                </td>
                                                <td style="width: 107px">
                                                    <%# Eval("ExtensionNo")%>
                                                </td>
                                                <td>
                                                    <%# Eval("department")%>
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </table>
                                <div class="meneame">
                                    <webdiyer:AspNetPager ID="anp_DataPages" runat="server" PageSize="10" OnPageChanged="anp_DataPages_PageChanged"
                                        CustomInfoHTML="第%CurrentPageIndex%页，共%PageCount%页，每页%PageSize%条" ShowCustomInfoSection="Left">
                                    </webdiyer:AspNetPager>
                                </div>
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="tv_Orgs" EventName="SelectedNodeChanged" />
                </Triggers>
            </asp:UpdatePanel>
        </td>
    </tr>
</table>

后台代码如下：

protected void tv_Orgs_SelectedNodeChanged(object sender, EventArgs e)
{
    BindData(true);
    ScriptManager.RegisterClientScriptBlock(upInfo, upInfo.GetType(), Guid.NewGuid().ToString("N"), @"
    $(function(){
        $('#leftlist td.SelectedNodeStyle').removeClass('SelectedNodeStyle').find('a.SelectedNodeStyle').removeClass('SelectedNodeStyle');
        $('#'+" + tv_Orgs.ClientID + @"_Data.selectedNodeID.value).parent().addClass('SelectedNodeStyle');
    })", true);
}

从上面可以看出，关键代码在后台注册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却很容易搞定。
• 多一项技能，有时候就是多一条活路。多会一门语言，有时候就是多打开一扇理解的天窗。