【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>
...
<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>
<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>