如何在ASP.NET使用JavaScript阻止页面回传postbacks

在ASP.NET中,页面回传(postback)是很常见的一种形式,它用于客户端和服务端进行交互,从而执行新的页面生命周期,加载ViewState等,对于客户端的效果来说,就是你会看到页面被刷新了,但是这不同于Javascript的刷新。 对于ASP.NET开发者来说,防止页面刷新最常见的是使用HTML控件并使用JavaScript代码达到你的目的,或者使用Ajax来执行服务端代码。而这里介绍如何阻止Asp.net 服务端控件Button执行postbacks事件,对于复杂一点的GridView控件,我们可以用Update panel或者集成ICallbackEventHandler接口来防止页面刷新,这些内容将会在以后介绍到:

这里我们介绍怎么防止服务器端Button的Postbacks事件,你甚至可以使用CheckBox来选择是否需要Postback:

原理:使用OnClientClick事件判断CheckBox状态,返回bool值。注意OnClientClick事件定义为“ return onClientClickEvent()”

[本示例完整源码下载(0分)]http://download.csdn.net/source/3450349

StopPostBack.aspx 代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        //Use ClientClick event to check stop this postback or not. 
        function onClientClickEvent() {
            var text = document.getElementById('textDisplay');
            var checkbox = document.getElementById('chkStopPostback');
            text.value = "This is a client click";
            if (checkbox.checked == true) {
                return false;
            }
            else {
                return true;
            }
        }
    </script>
    <style type="text/css">
        .style1
        {
            width: 105px;
        }
        #textDisplay
        {
            width: 271px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width:100%;">
            <tr>
                <td class="style1">
                    <asp:Label ID="Label1" runat="server" Text="Stop postback:"></asp:Label>
                </td>
                <td>
                    <input id="chkStopPostback" type="checkbox" />Is stop?</td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label2" runat="server" Text="Cause postback:"></asp:Label>
                </td>
                <td>
                    <asp:Button ID="btnCausePostback" runat="server" Text="Click me to get info" 
                        OnClientClick="return onClientClickEvent()" οnclick="btnCausePostback_Click" />
                </td>
            </tr>
            <tr>
                <td class="style1">
                    <asp:Label ID="Label3" runat="server" Text="Postback result:"></asp:Label>
                </td>
                <td>
                    <input id="textDisplay" readonly="readonly" type="text" runat="server" /></td>
            </tr>
        </table>  
    </div>
    </form>
</body>
</html>

StopPostBack.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CSASPNETStopPostbackInJS
{
    public partial class StopPostBack : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnCausePostback_Click(object sender, EventArgs e)
        {
            // Postback code
            textDisplay.Value += "  This is a server click";
        }
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值