I have taken a button control on my page, click which the page would show a pop up window. On that popup window, there is a 'ok' button, clicking which it would redirect you to another page. I have done it with ajax modal pop up extender. It is showing the pop up window, but it's not getting redirected to the next page. please correct my code:
here is the .aspx.cs code:
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="DemoAjaxModalPopUp.aspx.cs" Inherits="DemoAjaxModalPopUp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="../Shopping Cart Pages/ShopStyles/StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
function pageLoad() {
$addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);
$addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);
}
function showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
function HideModalPopup() {
$find("programmaticPopup").hide();
}
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
}
setBodyHeightToContentHeight();
$addHandler(window, "resize", setBodyHeightToContentHeight);
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<ajaxtoolkit:toolkitscriptmanager runat="server" ID="ScriptManager1" />
<p id="Paragraph1"></p>
<ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup"
BehaviorID="programmaticModalPopupBehavior"
TargetControlID="hiddenTargetControlForModalPopup"
PopupControlID="programmaticPopup"
BackgroundCssClass="modalBackground"
RepositionMode="RepositionOnWindowScroll"
OkControlID="OkButton"
DropShadow="true"
PopupDragHandleControlID="Panel3">
</ajaxToolkit:ModalPopupExtender>
<asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
<asp:Panel ID="programmaticPopup" runat="server" CssClass="modalPopup" Style="display: none; width: 350px; padding: 10px">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black">
<div class="align_center">
<h3> Login Success</h3>
<hr />
</div>
</asp:Panel>
<div class="align_center">
<p>
You have successfully Logged in.
</p>
<p class="align_center">
<asp:Button ID="OkButton" runat="server" Text="OK" OnClientClick="return HideModalPopup();" OnClick="OkButton_Click" />
</p>
</div>
</asp:Panel>
<asp:Panel ID="Panel4" runat="server" CssClass="style48" Height="148px">
<asp:Button ID="Button_Fire" runat="server"
Text="Show Pop Up and then redirect to another page" CssClass="style49"
Height="59px" Width="453px" onclick="Button_Fire_Click" />
</asp:Panel>
</asp:Content>
here is the .aspx code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class DemoAjaxModalPopUp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void showModalPopupServerOperatorButton_Click(object sender, EventArgs e)
{
this.programmaticModalPopup.Show();
}
protected void hideModalPopupViaServer_Click(object sender, EventArgs e)
{
this.programmaticModalPopup.Hide();
}
protected void OkButton_Click(object sender, EventArgs e)
{
Response.Redirect("DemoJoin.aspx");
}
protected void Button_Fire_Click(object sender, EventArgs e)
{
programmaticModalPopup.Show();
}
}