• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1323
  • Last Modified:

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

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
ubo-jfeeney
Asked:
ubo-jfeeney
  • 2
  • 2
1 Solution
 
djon2003Commented:
Which version of ASP.NET are you using ?
0
 
ubo-jfeeneyAuthor Commented:
I am programming with Visual Studio 2008 Standard and .Net Framework 3.5 SP1
0
 
David RobitailleAnalyst ProgrammerCommented:
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
 
David RobitailleAnalyst ProgrammerCommented:
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
 
ubo-jfeeneyAuthor Commented:
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.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now