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

于 2013-05-27 11:24:59 发布
阅读量178 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 我的技术资料收集 文章标签： 料收集 ASP.NET
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iteye_19076/article/details/82510909
本文详细介绍了在SharePoint开发过程中，如何解决TreeView控件选择样式无法生效的问题。通过引入特定的SharePoint命名空间和注册标签前缀，实现了在选择节点时，样式能够正确应用。此外，文章还探讨了UpdatePanel与Menu组件整合时可能遇到的问题及解决方法，强调了灵活运用技术解决实际问题的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

原帖地址：http://www.cnblogs.com/codelove/archive/2013/05/27/3101111.html

在某些时候，使用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" />&nbsp; <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却很容易搞定。
  • 多一项技能，有时候就是多一条活路。多会一门语言，有时候就是多打开一扇理解的天窗。

本文链接

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值