Solved

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

Posted on 2009-04-04
5
1,304 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

860 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