`

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

料收集ASP.NET 
阅读更多
原帖地址：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却很容易搞定。

  • 多一项技能，有时候就是多一条活路。多会一门语言，有时候就是多打开一扇理解的天窗。

本文链接

分享到：
| [原创]网络专用高效内存池,支持多线程. ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    treeview和listview结合使用的例子

    在实际应用中，`TreeView`和`ListView`经常结合使用，例如在资源管理器式的界面中。当用户在`TreeView`中选择一个节点时，对应的`ListView`会更新显示与该节点相关的详细信息。这可以通过事件处理和数据绑定来实现：...

    三种treeview结合数据库的使用

    第三种情况是"简单treeview+数据库"，这可能是指基础的数据库与TreeView结合，不涉及过多的定制或高级功能。在这种场景下，我们可以通过简单的SQL查询获取数据，然后逐条创建TreeNode。节点的数据可以存储在Tag属性...

    ListView和Treeview的结合使用

    当这两者结合使用时，可以创建出类似资源管理器的界面，提供用户友好的浏览和操作体验。 ListView控件允许开发者以多种视图模式（如小图标、大图标、列表、详细信息）展示数据。每行数据可以包含多个列，用于显示...

    p哥的dome TreeView 关联 GridView 试用ajax UpdatePanel

    本示例"p哥的dome TreeView 关联 GridView 试用ajax UpdatePanel"展示了如何结合这两个控件，并利用`Ajax`和`UpdatePanel`技术来实现部分页面更新，提高用户体验。 首先，`TreeView`控件是一种强大的工具，它能以树...

    Treeview 结合数据库联合使用

    结合数据库使用，Treeview可以提供一个直观的方式来展示和管理数据库中的复杂关系。 首先，我们要理解如何将数据库中的数据绑定到Treeview。这通常涉及以下步骤： 1. **数据获取**：使用SQL查询从数据库中检索需要...

    combox+treeview结合控件 ComboTreeBox

    【标题】"combox+treeview结合控件 ComboTreeBox" 是一种创新的用户界面元素，它将传统的下拉组合框（ComboBox）与树视图（TreeView）的功能巧妙地融合在一起，为用户提供更丰富的数据选择体验。在Windows应用程序...

    treeview控件的使用

    为提高效率，开发者可以使用TVITEM结构体的pszText成员设置为LPSTR_TEXTCALLBACK，这样TreeView控件在需要重绘项目时，会向主窗口请求显示标签文本，从而减少TreeView控件的内存占用。 总结来说，TreeView控件是...

    winform 的combox+treeview结合控件

    在Windows Forms（Winform）开发中，经常需要创建具有复杂交互功能的用户界面，比如将下拉列表（ComboBox）和树形视图（TreeView）结合起来的控件。这样的设计可以提供更加灵活的数据浏览和选择方式，尤其适用于层级...

    QML树控件TreeView的使用

    在Qt5.5之前是没有树控件的，我们在使用时用的是ListView来构造出一个树，Qt5.5之后的QML开发阶段，有了树控件TreeView，本篇着重记录QML的TreeView的使用（包括增加树节点和删除节点）。

    TreeView控件的使用

    TreeView控件的使用 TreeView控件是一种常用的树形控件，能够显示层次结构的数据。它广泛应用于各种类型的应用程序中，如文件系统、组织架构、产品分类等。在ASP.NET中，TreeView控件可以与数据库集成，动态绑定...

    combobox与TreeView结合自定义控件

    总结起来，将ComboBox与TreeView结合的自定义控件是一种创新的UI设计，它可以提高用户在浏览和操作层次结构数据时的效率。通过VB.NET的编程，我们可以充分利用这两个基础控件的特点，创建出具有强大功能和良好用户...

    VB演示Treeview和ListView相结合的例子.rar

    VB6.0演示Treeview和ListView相结合的例子，在ListView中使用Treeview菜单，将ListView修饰了一下，好像看上去不太像ListView了，但在其中增加了树控视图，实际项目编写中，这种类似的功能还是使用率很高的。

    TreeView控件使用技巧

    3. TreeView的常见事件包括Constructor（控件创建时触发，用于初始化TreeViewItem）、Click（单击项触发，通常用于查询操作）、Double Click（双击项触发，也可用于查询）以及ItemPopulate（首次展开项时触发，通常...

    Jquery TreeView结合.NET用户控件的树

    在本文中，我们将深入探讨如何将Jquery TreeView与.NET用户控件相结合，构建一个功能丰富的树形视图。Jquery TreeView是一个流行的JavaScript库，它允许开发者在网页上创建可交互的、层次化的列表。而.NET用户控件则...

    treeview的使用小结

    8. **遍历`TreeView`**：在代码中遍历`TreeView`的节点时，可以使用递归方法，通过遍历`TreeNode.Nodes`集合，访问每个子节点并处理它们。 9. **拖放操作**：`TreeView`控件支持拖放操作，允许用户重新排列节点。...

    C# winform treeView控件的使用绑定数据库

    在C# WinForm开发中，`TreeView`控件是一个常用且功能强大的组件，它用于以树形结构展示数据。在本教程中，我们将探讨如何利用`TreeView`控件与数据库进行绑定，以便用户能够直观地浏览和操作层次化的数据。 首先，...

    C#TreeView的使用实例

    C#TreeView的使用实例，新手可以下载来看看

    treeview控件的使用示例

    下面将详细介绍如何在VFP中使用Treeview控件以及它的主要功能。 1. **添加Treeview控件** 在VFP的表单设计环境中，你可以从工具箱中选择"Treeview"控件并将其拖放到表单上。调整其大小和位置以适应用户界面。 2. ...

    pb treeview控件的使用技巧

    ### PowerBuilder中TreeView控件使用技巧详解 #### 一、前言 在PowerBuilder开发工具中，TreeView控件因其能够直观地展现多层次的数据结构而受到广泛欢迎。它可以帮助用户更好地理解复杂的分层信息，比如组织架构...

Magicbox
Global site tag (gtag.js) - Google Analytics