在SharePoint 2013 中使用UpdatePanel控件进行局部刷新

        在asp.net中，经常会使用到sciptManager与Updatepanel进行局部刷新。那么在SharePoint 2013 中如何使用Updatepanel进行局部刷新呢？

下面就已局部刷新树控件来举例说明：

1）首先在vs2012 中新建一个SharePoint 2013 空项目，然后再新建一个应用程序页AppTest.axps。

在AppTest.axps前端添加引用。

<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>

在ontentPlaceHolderID="PlaceHolderMain"中添加代码如下：

 

<script type="text/javascript">
        function postBackByObject() {
            var o = window.event.srcElement;
            if (o.tagName == "INPUT" && o.type == "checkbox") {
                __doPostBack("ud1", "");
            }
        }

    </script>
    <asp:UpdatePanel ID="ud1" runat="server" ClientIDMode="Static">
        <ContentTemplate>
             <asp:TreeView ID="tvTest" runat="server" OnTreeNodeCheckChanged="tvTest_TreeNodeCheckChanged"></asp:TreeView>
        </ContentTemplate>
    </asp:UpdatePanel>

 

注意：

        1）此处不需要添加<asp:sciptManager run="server" id="sciptManager "></asp:sciptManager>控件，因为appTest.axps使用了母版页，sciptManager 已经在母版页中定义，如果在此处定义，就会存在一个页面有多个sciptManager 控件，一个页面存在多个sciptManager 控件就会报错。

        2）UpdatePanel控件需加上属性ClientIDMode="Static"，这样就能够保证该控件在客户端呈现时，id=ud1，否则，UpdatePanel在客户端呈现的Id=ctr100_PlaceHolderMain_ud1这样的格式。使用ClientIDMode="Static“属性，就是为了确保能够在js中找到UpdatePanel控件。当然，如果有其他的方法能够在客户端获取到UpdatePanel，可以不用ClientIDMode="Static“属性，比如给UpdatePanel加个class之类的。

2）appTest 后台代码如下：

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;

namespace SPGetTemplateNameAndUpdatePanel.Layouts.SPGetTemplateNameAndUpdatePanel
{
    public partial class appTest : LayoutsPageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                InitTreeView();
                this.tvTest.Attributes.Add("onclick", "postBackByObject()");
                tvTest.ShowCheckBoxes = TreeNodeTypes.All;
            }
        }

        private void InitTreeView()
        {
            tvTest.Nodes.Add(new TreeNode("Test UpadatePanel"));

            TreeNode node = null;
            TreeNode childnode = null;

            for (int i = 0; i < 10; i++)
            {
                node = new TreeNode(i.ToString());
                tvTest.Nodes[0].ChildNodes.Add(node);

                for (int j = 0; j < 3; j++)
                {
                    childnode = new TreeNode(j.ToString());
                    node.ChildNodes.Add(childnode);
                }
            }
        }

        /// <summary>
        /// 设置选中状态
        /// </summary>
        /// <param name="parNode">父级节点</param>
        /// <param name="isChecked">选择状态</param>
        private void SetCheckedStatic(TreeNode parNode, bool isChecked)
        {
            if (parNode.ChildNodes.Count <= 0) return;

            foreach (TreeNode node in parNode.ChildNodes)
            {
                node.Checked = isChecked;

                SetCheckedStatic(node, isChecked);
            }
        }

        protected void tvTest_TreeNodeCheckChanged(object sender, System.Web.UI.WebControls.TreeNodeEventArgs e)
        {
            if (e.Node == null) return;
            TreeNode node = e.Node;

            SetCheckedStatic(node, node.Checked);
        }
    }
}

 

3）部署

4）效果

    当勾选树控件前面的选择框时，该节点下的子阶段也会勾选上，并且没有界面的闪动，达到了我们预期的效果