MyUpdatePanel 不仅具有UpdatePanel的所有功能,还能够处理回发事件。这样实现点击div显示完整的日期就很容易了。
<body>
<script type="text/javascript">
function showFullTime()
{
<%=ClientScript.GetPostBackEventReference(pnlTime, "click") %>;
}
function refreshTime()
{
<%=ClientScript.GetPostBackEventReference(pnlTime, "over") %>;
}
</script>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:MyUpdatePanel ID="pnlTime" runat="server" OnPostBack="Refresh">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" />
</ContentTemplate>
</asp:MyUpdatePanel>
<div onmouseover="refreshTime()" >鼠标划过时更新时间</div>
<div onclick="showFullTime()">点击显示完整时间</div>
</div>
</form>
</body>
Refresh的定义如下:
protected void Refresh(string type)
{
switch (type)
{
case "over":
lblTime.Text = DateTime.Now.ToString("hh:mm:ss");
break;
case "click":
lblTime.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
break;
}
}
<script type="text/javascript">
function showFullTime()
{
<%=ClientScript.GetPostBackEventReference(pnlTime, "click") %>;
}
function refreshTime()
{
<%=ClientScript.GetPostBackEventReference(pnlTime, "over") %>;
}
</script>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:MyUpdatePanel ID="pnlTime" runat="server" OnPostBack="Refresh">
<ContentTemplate>
<asp:Label ID="lblTime" runat="server" />
</ContentTemplate>
</asp:MyUpdatePanel>
<div onmouseover="refreshTime()" >鼠标划过时更新时间</div>
<div onclick="showFullTime()">点击显示完整时间</div>
</div>
</form>
</body>
Refresh的定义如下:
protected void Refresh(string type)
{
switch (type)
{
case "over":
lblTime.Text = DateTime.Now.ToString("hh:mm:ss");
break;
case "click":
lblTime.Text = DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss");
break;
}
}
这样我们就比较完善地实现了不添加辅助按钮,仅用JS刷新UpdatePanel了。