页面跳转一般分为两大类:服务器端跳转和客户端跳转,其一般的形式为:
<script language="javascript" type="text/javascript">
window.location.href
="WebForm1.aspx"
;;
</script>
<meta http-equiv="refresh" content="3"; url="WebForm1.aspx">
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="JS跳转" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="CS跳转" OnClick="Button2_Click" />
</div>
</form>
</body>
在页面中我定义了两个跳转按钮,其后台代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
Code
protected void Button1_Click(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
Js_ShowMessage("我要跳转了");
Js_Redirect("WebForm1.aspx");
}
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
protected void Button2_Click(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
Js_ShowMessage("我要跳转了");
Response.Redirect("WebForm1.aspx");
}
private void Js_ShowMessage( string message)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
Response.Write("<script language=javascript>alert(/"" + message.Replace("/r/n", "//n") + "/")</script>");
}
private void Js_Redirect(string url)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
{
Response.Write("<script language=javascript>window.location.href='" + url + "'</script>");
}
这两种跳转会有什么差别呢?通过执行代码,当触发Button1的click事件时,页面是先显示了一段信息(“我要跳转了”)后,跳转到别的页面,而触发Button2的click事件的时候,页面直接跳转,并没有显示我们所要求的信息。这是为什么呢?我们明明是要求在显示一段信息后,在跳转的阿。
原来,用Response.Redirect实现页面跳转的时候,客户段仅仅是读取了服务器端发送页面的头部,便执行了跳转,并没有执行页面中的JS代码,因此没有显示我们所要求显示的信息。二用JS跳转,客户段执行了服务器端发送的页面的js代码,因此是先显示了一段代码后,再实现的跳转。
由此我们可以看出,用Response.Redirect实现页面跳转,比用JS要节省资源。因此我们在后台执行一段代码后要求页面跳转的时候,尽量用Response.Redirect实现页面跳转。
但是,有这么一种情况:我要删除某一项信息,删除完毕后,我要求先提示一段信息,告诉我信息删除完毕,然后在跳转到别的页面。这时,用Response.Redirect显然是不能实现的,只能用JS实现页面的跳转。
总结:在后台执行一段代码后要求页面跳转的时候,用Response.Redirect实现页面跳转。
在后台执行一段代码,并显示一条提示信息后要求页面跳转的时候,用Response.Redirect实现页面跳转。
这里在讨论下button控件的onClientClick事件:如下代码:
<asp:Button ID="Button2" runat="server" Text="CS跳转" OnClick="Button2_Click" OnClientClick="alert('我要跳转了');return true;" />
<asp:Button ID="Button2" runat="server" Text="CS跳转" OnClick="Button2_Click" OnClientClick="alert('我要跳转了');return false;" />
在onClientClick()事件中,return false 和return true 有什么区别呢?通过执行代码,可以知道:
当return false时,并不执行页面的后台代码。
当return true 时,是要执行页面的后台代码的。
这和js中的Confirm对话框是一样的。
这样,我们要求先显示一段信息,再执行一段后台代码,在实现页面跳转的时候,可以在Button加上onClientClick事件。
Response.Redirect("WebForm1.aspx"
);
Response.End();
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
如果你要在服务器端跳转,可以这样:
如果你要在客户端跳转,可以这样:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
如果你要让页面显示几秒钟之后跳转,可以在html代码的<head></head>部分加上这样的代码:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
(3秒钟后自动跳转到WebForm1.aspx页面)
以上是实现页面跳转的基本方法,现在来看一个例子:我们定义一个页面,页面Html如下:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
在页面中我定义了两个跳转按钮,其后台代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/34031c708bfe702fe82d01ff5c6593aa.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0be121fa5b8988fbabbbc526af3b0fc0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/587e34b10dcf5efbc0859b53470a2db3.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4fd96b3cf02f4c7b5c8964ac8167f7af.gif)
这两种跳转会有什么差别呢?通过执行代码,当触发Button1的click事件时,页面是先显示了一段信息(“我要跳转了”)后,跳转到别的页面,而触发Button2的click事件的时候,页面直接跳转,并没有显示我们所要求的信息。这是为什么呢?我们明明是要求在显示一段信息后,在跳转的阿。
原来,用Response.Redirect实现页面跳转的时候,客户段仅仅是读取了服务器端发送页面的头部,便执行了跳转,并没有执行页面中的JS代码,因此没有显示我们所要求显示的信息。二用JS跳转,客户段执行了服务器端发送的页面的js代码,因此是先显示了一段代码后,再实现的跳转。
由此我们可以看出,用Response.Redirect实现页面跳转,比用JS要节省资源。因此我们在后台执行一段代码后要求页面跳转的时候,尽量用Response.Redirect实现页面跳转。
但是,有这么一种情况:我要删除某一项信息,删除完毕后,我要求先提示一段信息,告诉我信息删除完毕,然后在跳转到别的页面。这时,用Response.Redirect显然是不能实现的,只能用JS实现页面的跳转。
总结:在后台执行一段代码后要求页面跳转的时候,用Response.Redirect实现页面跳转。
在后台执行一段代码,并显示一条提示信息后要求页面跳转的时候,用Response.Redirect实现页面跳转。
这里在讨论下button控件的onClientClick事件:如下代码:
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
当return false时,并不执行页面的后台代码。
当return true 时,是要执行页面的后台代码的。
这和js中的Confirm对话框是一样的。
这样,我们要求先显示一段信息,再执行一段后台代码,在实现页面跳转的时候,可以在Button加上onClientClick事件。
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/f0cd6c7f9e7ae96feae062cb48f670f0.gif)