技术开发 频道

使用js刷新UpdatePanel

  【IT168技术】假设我们有一个展示产品信息的列表。其中的某几列需要添加排序的功能,当然可以选择使用gridview本身的排序功能,但效率太低,一般我们会选择使用AJAX来实现。

  OK,将这个列表置入UpdatePanel,这时点击需要排序的列的列头(标题)就需要触发一个回发事件,很常见的方式就是在在UpdatePanel内添加一个隐藏的按钮(或updatepanel外并设置该按钮为updatepanel的异步触发器),然后在点击列头时触发按钮的click事件即可。

  下面以一个更简单的例子来描述上面的情形:

...
<body>
<script type="text/javascript">
    
function doRefresh() {
        document.getElementById(
'<%= btnRefresh.ClientID %>').click();
    }
    
</script>
    
<form id="form1" runat="server">
    
<div>
        
<asp:ScriptManager ID="sm" runat="server">
        
</asp:ScriptManager>
        
<asp:UpdatePanel ID="pnlTime" runat="server">
            
<ContentTemplate>
                
<asp:Label ID="lblTime" runat="server" />
                
<asp:Button ID="btnRefresh" runat="server" style="display:none"  OnClick="btnRefresh_Click"/>
            
</ContentTemplate>
        
</asp:UpdatePanel>
        
        
<div onmouseover="doRefresh()">鼠标划过时更新时间</div>
    
</div>
    
</form>
</body>
...

            在Building Interactive User Interfaces with Microsoft ASP.NET AJAX: Refreshing An UpdatePanel With JavaScript 这篇文章中还介绍了一种方式:

<body>
<script type="text/javascript">
    
function doRefresh() {
        
<%=ClientScript.GetPostBackEventReference(pnlTime, "") %>;
    }
    
</script>
    
<form id="form1" runat="server">
    
<div>
        
<asp:ScriptManager ID="sm" runat="server">
        
</asp:ScriptManager>
        
<asp:UpdatePanel ID="pnlTime" runat="server">
            
<ContentTemplate>
                
<asp:Label ID="lblTime" runat="server" />
            
</ContentTemplate>
        
</asp:UpdatePanel>
        
        
<div onmouseover="doRefresh()">鼠标划过时更新时间</div>
    
</div>
    
</form>
</body>
0
相关文章