Solved

Modal Popup - I want to call code behind of the Modal Ok Button

Posted on 2009-04-04
5
1,303 Views
Last Modified: 2012-05-06
This is my first try at the Modal Popup. I want to be able to call some code behind when the ok button of the Modal is clicked. I suspect that I will be calling okButton_Click event.

I have a Label that I am trying to change the text. The purpose is just to show that I was able to call the code-behind.

I my code looks a little "off"...I have been reading code from the Internet, Asp.net forums and Expert forums trying to figure this out. No one has a nice straight forward example. And some that think they do...don't work.
HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="vStyleSheet.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        function okButtonClick(sender, e) {
            alert("alert caught");
            __doPostBack(sender,e);
        }
        function onCancel(sender, e) {
        } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <div>
    <asp:Button runat="server" ID="theButton" Text="Go" />
    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
    <br />
    <asp:Panel ID="popupPanel" runat="server" CssClass="modalPopup" Style="display:none" >
        <p>This looks awesome....really</p>
        <asp:Button runat="server" ID="okButton" Text="ok" OnClick="okButton_Click" />
        <br />
        
        <asp:Button runat="server" ID="cancelButton" Text="cancel" />
    </asp:Panel>
    </div>
    <div>
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                            TargetControlID="theButton"
                            PopupControlID="popupPanel"
                            BackgroundCssClass=".modalBackground"
                            DropShadow="true"
                            OkControlID="okButton"
                            CancelControlID="cancelButton">
    </cc1:ModalPopupExtender>
    </div>
    </div>
    </form>
</body>
</html>
 
Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }
    protected void okButton_Click(object sender, EventArgs e)
    {
         Label3.Text = "Got here";
    }
}

Open in new window

0
Comment
Question by:ubo-jfeeney
  • 2
  • 2
5 Comments
 
LVL 9

Expert Comment

by:djon2003
ID: 24069909
Which version of ASP.NET are you using ?
0
 

Author Comment

by:ubo-jfeeney
ID: 24071112
I am programming with Visual Studio 2008 Standard and .Net Framework 3.5 SP1
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 24071310
OnClick="okButton_Click".
ty it with OnClientClick.
if it cont work, try to also remove the OkControlID and use the hide function to hide the popup from the code behind
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 24071337
and I dont think you need to use those javascript function if you do nothing on the client side.
so you could remove the OkControlID and set the ok button has a normal button and use ModalPopupExtender1.hide form code behind. i think the cancel should be ok.
 
0
 

Accepted Solution

by:
ubo-jfeeney earned 0 total points
ID: 24073598
I got this to work.

I will post all of my code for the benefit of someone else. Two key items to look at: 1) In the first line you need EnableEventValidation="false" or you will get a big error message. To see the error message set this to true. and 2) I copied to script by looking at another code example on the Internet. Basically, what you are doing is hiding the modalpopup and then the line _doPostBack is sending a okButton Click event. This then calls the OnClick="okButton_Click -- which is the code behind.

 

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="vStyleSheet.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        function okModalButton(sender, e)
        {
            $find('ModalPopupExtender1').hide();
            __doPostBack('okButton',e);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <div>
    <asp:Button runat="server" ID="theButton" Text="Go" />
    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
    <br />
    <asp:Panel ID="popupPanel" runat="server" CssClass="modalPopup" Style="display:none" >
        <p>This looks awesome....really</p>
        <asp:Button runat="server" ID="okButton" Text="ok" OnClick="okButton_Click" />
        <br />
       
        <asp:Button runat="server" ID="cancelButton" Text="cancel" />
    </asp:Panel>
    </div>
    <div>
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
                            TargetControlID="theButton"
                            PopupControlID="popupPanel"
                            BackgroundCssClass=".modalBackground"
                            DropShadow="true"
                            OkControlID="okButton"
                            OnOkScript="okModalButton()"
                            CancelControlID="cancelButton">
    </cc1:ModalPopupExtender>
    </div>
    </div>
    </form>
</body>
</html> using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void okButton_Click(object sender, EventArgs e)
    {
        Label3.Text = "Got here";
    }
}
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How can I build my own IDE using ASP.NET MVC? 2 45
encoding an href string 2 21
transaction in asp.net, sql server 6 33
C# LINQ ForEach() question 6 28
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question