Solved

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

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

708 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now