modal popup extender

Question

0.00/5 (No votes)

See more:

Hi friends
I added modal popup extender for displaying blank Textboxes,When clicking Submit button.I am using this for validation.In my case,
I cant give conditions when using modal popup extender.
Aspx page:(for Modal pop up control)

C#

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

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<!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">

<!--CSS and JavaScript-->
 
  <link rel="shortcut icon" href="images/logo.ico"/>
<link rel="stylesheet" type="text/css" href="Stylesheets/exStyle.css" />
<link rel="stylesheet" type="text/css" href="Stylesheets/example.css"/>
<script type="text/javascript" src="Scripts/alternate_rows.js"></script>
<head runat="server">
    <title>Logicindia</title>

    <style type="text/css">
  .modalBackground
{
  background-color:#003040;
  filter:alpha(opacity=40);
  opacity:0.5;
  position:-1000px;
}
 
.ModalWindow
{
  border:1px solid #999999;
background-color:#FFFFFF;
cursor:default;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:292px;
  z-index:50;
  padding-bottom: 8px;
            top: 110px;
            left: 237px;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 25px;
            bottom: 148px;
            height: 220px;
            margin-left: 0;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        .style1
        {
            height: 23px;
            width: 204px;
            font-family: "Times New Roman", Times, serif;
            font-size: medium;
        }
        .style2
        {
            height: 23px;
            width: 199px;
        }
        .style3
        {
            height: 23px;
            width: 150px;
        }
        .style4
        {
            height: 23px;
        }
        .style5
        {
            font-family: "Times New Roman", Times, serif;
            font-size: medium;
        }
    </style>
</head>
<body>
  <form id="form1" runat="server">

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1"  runat="server"
TargetControlID="Sub_Popup"
PopupControlID="panEdit"
BackgroundCssClass="modalBackground"
CancelControlID="btnCancel"
PopupDragHandleControlID="panEdit">


  <asp:Panel ID="panEdit" runat="server" CssClass="ModalWindow" 
      BackImageUrl="~/Images/ss3.jpg" BorderColor="Black" BorderStyle="Solid">
        <table style="width: 105%">        
                <tr>
                    <td align="left" class="style1">
                         <asp:Image ID="Image1" runat="server" Height="19px" 
                            ImageUrl="~/Images/warning.png" Width="16px" />
                        Please Fill the Following Fields</td>
                </tr>
                 
       </table>
       <table style="width: 105%; margin-removed 0px">
           <tr>
               <td align="left" class="style2">
                    <asp:Label ID="Label9" runat="server" Text="YourName" CssClass="style5" Font-Size="medium">
                         
               </td>
               <td>
                   <asp:TextBox ID="txtFields2" runat="server"  BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput1" Style="font-size: medium">
               </td>
           </tr>
      </table>
      <table style="width: 105%; margin-removed 0px">
          <tr>
              <td align="left" class="formtext" style="height: 23px; width: 150px;">
                   <asp:Label ID="Label8" runat="server" Text="PhoneNumber" 
                      CssClass="style5" >
              </td>
              <td>
                  <asp:TextBox ID="txtFields3" runat="server"  BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput1" Style="font-size: medium">
              </td>
          </tr>
      </table>
      <table style="width: 105%; margin-removed 0px">
          <tr>
              <td align="left" class="formtext" style="height: 23px; width: 150px;">
                   <asp:Label ID="Label7" runat="server" Text="EmailAddress" 
                      CssClass="style5" >
              </td>
              <td>
                  <asp:TextBox ID="txtFields4" runat="server"  BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput1" Style="font-size: medium">
              </td>
          </tr>
      </table>
      <table style="width: 105%; margin-removed 0px">
          <tr>
              <td align="left" class="formtext" style="height: 23px; width: 150px;">
                   <asp:Label ID="Label6" runat="server" Text="CountryName" 
                      CssClass="style5" >
              </td>
              <td>
                  <asp:TextBox ID="txtFields5" runat="server"  BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput1" Style="font-size: medium">
              </td>
          </tr>
      </table>
      <table style="width: 105%; margin-removed 0px; height: 26px;">
          <tr>
             <td align="left" class="formtext" style="height: 23px; width: 150px;">
                   <asp:Label ID="Label10" runat="server" Text="EnquiryAbout" 
                      CssClass="style5" >
              </td>
              <td>
                  <asp:TextBox ID="txtFields6" runat="server"  BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput1" Style="font-size: medium">
              </td>
            </tr>
          <tr>
              <td align="left" class="style3">
                  <asp:Button ID="Button1" runat="server"  CssClass="registerInput2" OnClick="btnUpdate_Click" 
                      Text="Update" />
                   </td>
              <td class="style4">
                  <asp:Button ID="btnCancel" runat="server" CssClass= "registerInput2" Text="Cancel" />
              </td>
          </tr>
     

      </table>
       <br />
      
         
  
  
      <asp:ScriptManager 
      ID="ScriptManager1" runat="server">
  
 <asp:Button ID="Sub_Popup" runat="server" Text="Submit" 
      onclick="Sub_Popup_Click" />
     </form>

</body>
</html>
     


Aspx code :(Registration page using Side Toggle)
<pre lang="xml"><%@ Page Language="C#" AutoEventWireup="true" CodeFile="Wndw.aspx.cs" Inherits="Wndw" %>

<%--<%@ Register namespace="AjaxControlToolkit" tagprefix="AjaxControlToolkit" %>--%>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
<!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>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title>Logicindia</title>

<!--CSS and JavaScript-->
  <link rel="shortcut icon" href="images/logo.ico"/>
<link rel="stylesheet" type="text/css" href="Stylesheets/exStyle.css" />
<link rel="stylesheet" type="text/css" href="Stylesheets/example.css"/>
<script type="text/javascript" src="Scripts/alternate_rows.js"></script>


<!--External Files End-->

    <style type="text/css">
            .style2
            {
                color: #333399;
            }
            </style>


<script type="text/javascript">
    $(document).ready(function () {
        $(".flip").click(function () {
            $(".panel").slideToggle(2000);
        });
    });
</script>
<style type="text/css">
    .panel
{
margin:0px;
padding:5px;
text-align:left;
background:White;
border:solid 1px #c3c3c3;
width: 410px;
}
   .flip
{
margin:0px;
padding:5px;
text-align:left;
background:White;
border:solid 1px #c3c3c3;
width: 23px;
height: 109px;
}
.panel
{
height:336.1px;
width:250px;
display:none;
background-image:url('Images/brdrpic.png');
}
.style3
{
height: 123px;
}
<%--.modalBackground
{
  background-color:#CCCCFF;
  filter:alpha(opacity=40);
  opacity:0.5;
  position:-1000px;
}--%>
 .modalBackground
{
  background-color:#003040;
  filter:alpha(opacity=40);
  opacity:0.5;
  position:-1000px;
}


.ModalWindow
{
  border: solid1px#c0c0c0;
  background:#f0f0f0;
  padding: 0px10px10px10px;
  position:absolute;
  top:-1000px;
}

    </style>
</head>

<body style="width: 350px; height: 202px;">
<form id="form1" runat="server">


<div style="color: #666666; height: 168px;" >
  <table > <tr> <td style="background-image: none" class="style3">

   <table class="panel" >
    <tr>
                <td class="style2">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <br />
&nbsp;&nbsp;
                    <asp:Image ID="Image3" runat="server" Height="32px"
                        ImageUrl="~/Images/executive_community_17.png" Width="33px" />
    <asp:Label ID="Label3" runat="server" Height="21px" style="font-size: 16pt; color:#6700CE; font-family: 'Bodoni MT';"
        Text="Post Your Enquiry " Width="184px" ForeColor="#5200A4"></asp:Label>


                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;
                    <asp:TextBox ID="Name" runat="server" BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput" Style="font-size: medium"/>
                  <cc1:TextBoxWatermarkExtender ID="tbwe" runat="server" Enabled="True"
                TargetControlID="Name" WatermarkText="*Your Name ">
            </cc1:TextBoxWatermarkExtender>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;
                    <asp:TextBox ID="TextBox2" runat="server"  BackColor="White" ForeColor="Black"
                        Font-Names="Bodoni MT" CssClass="registerInput" Style="font-size: medium"
                        ToolTip="Enter Phone Number with country code" Width="200px"/>
                       <cc1:TextBoxWatermarkExtender ID="Phone_No" runat="server" Enabled="True"
                TargetControlID="TextBox2" WatermarkText="*Phone No:">
            </cc1:TextBoxWatermarkExtender>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;
                    <asp:TextBox ID="TextBox3" runat="server" BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput" Style="font-size: medium" ></asp:TextBox>
                <cc1:TextBoxWatermarkExtender ID="TextBox3_TextBoxWatermarkExtender" WatermarkText="*Email Id:"
                runat="server" Enabled="True" TargetControlID="TextBox3">
            </cc1:TextBoxWatermarkExtender>
                </td>
            </tr>
              <tr>
                <td class="style2">
                    &nbsp;
                    <asp:TextBox ID="TextBox10" runat="server" BackColor="White" ForeColor="Black"
                        Font-Names="Bodoni MT" CssClass="registerInput" Style="font-size: medium" ></asp:TextBox>
                           <cc1:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" WatermarkText="*CountryName "
                runat="server" Enabled="True" TargetControlID="TextBox10">
            </cc1:TextBoxWatermarkExtender>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    &nbsp;
                    <asp:TextBox ID="TextBox4" runat="server" BackColor="White" ForeColor="Black"  Font-Names="Bodoni MT" CssClass="registerInput" Style="font-size: medium" Height="25px" TextMode="MultiLine"></asp:TextBox>
                <cc1:TextBoxWatermarkExtender ID="TextBox4_TextBoxWatermarkExtender" WatermarkText="*Course Required "
                runat="server" Enabled="True" TargetControlID="TextBox4">
                </cc1:TextBoxWatermarkExtender>
                </td>
            </tr>
            <tr>
                <td

                 </td>
                               &nbsp;&nbsp;


                     <asp:Image ID="Image2" runat="server" Height="55px" ImageUrl="~/Captcha1.aspx"
                         Width="144px" />

            </tr>


            </tr>
            <tr>
                <td class="style2">
               &nbsp;
               <asp:TextBox ID="CodeNumberTextBox" runat="server" BackColor="White" ForeColor="Black"  CssClass="registerInput" Style="font-size: medium" Font-Names="Bodoni MT" ></asp:TextBox>
                <cc1:TextBoxWatermarkExtender ID="CodeNumberTextBox_TextBoxWatermarkExtender"   WatermarkText="Enter Above code here"
                    runat="server" Enabled="True" TargetControlID="CodeNumberTextBox">
                </cc1:TextBoxWatermarkExtender>
                </td>
            </tr>
            <tr>
                <td class="style2">
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   <asp:Button ID="btn_sbmt" runat="server" onclick="Button1_Click" Text="Submit"
                        Font-Bold="True" Font-Names="Bodoni MT" Font-Size="12pt" />
                    <asp:ScriptManager ID="ScriptManager1" runat="server">
                    </asp:ScriptManager>
                    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
                </td>
            </tr>

        </table>

        </td>
        <td align="left" valign="top" width="20" class="style3">
            <table >
            <tr>
            <td align="left">
              <img src="Images/e_img.png"class="flip"
                    style="background-position: 30px 102px; background-image: url('Images/xx.png')" />
            </td>
            </tr>
            </table>
        </td>
        </tr>
        </table>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


    <br />
    <br />
 </div>


        </td>
        <td align="left" valign="top" width="20">
        </td>
        </tr>
        </table>
  </form>

</body>

</html>

Posted 18-Jan-12 18:28pm

Nimisha Mary John

Updated 18-Jan-12 21:35pm

Anuja Pawar Indore

v3

Add a Solution

Comments

Jephunneh Malazarte 19-Jan-12 1:01am

so basically what you want to do with your extender?

Jephunneh Malazarte 19-Jan-12 1:43am

i read your question again and still don't get it :'(

I am confuse of what you are trying to do:

1. do you want to use modal popup extender as your validation?

2. do you want to use modal popup extender and if it showsup it should display empty textbox?

3. do you want to clear your textbox after click submit?
4. do you want to add validation in your submit button to make sure that the textbox in your modal popup extender is not empty?

Nimisha Mary John 19-Jan-12 1:53am

The 4'th one ,when i click on submit button,I want to display the blank text boxes in modal popup extender,The problem,I cant have to give condition on Button,for displaying only blank Textboxes,;
Currently when I am clicking on the submit button,extender displaying itself without checking conditions

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sahabiswarup · Answer 1 · 2012-01-18T20:04:00

Try Webservices that will help you to solve this Problem

C#

<script runat="server">
 [System.Web.Services.WebMethod(), System.Web.Script.Services.ScriptMethodAttribute()]
  
    public static string GetDynamicContent(string contextKey)
    {
 
        string constr = "Data Source=SAYAN-PC;Initial Catalog=nayuma;Trusted_connection=false;Integrated Security=false;User Id=sa;Password=lock;";
        string query = "SELECT Context FROM ProgrammeSchedule WHERE ProgrammeID = " + contextKey;

        System.Data.SqlClient.SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(query, constr);
        System.Data.DataTable table = new System.Data.DataTable();

        da.Fill(table);

        StringBuilder b = new StringBuilder();

        b.Append("<table style="background-color:#f3f3f3; border: #2A2A2A 3px solid; ");<br mode="hold" />        b.Append("width:280px; font-size:10pt; font-family:Verdana;" cellspacing="0" cellpadding="3">");

        b.Append("<tr><td colspan="3" style="background-color:#2A2A2A; color:white;">");
        b.Append("Context"); b.Append("</td></tr>");
        b.Append("<tr><td style="width:80px;">Details</td>");


        b.Append("<tr>");
        b.Append("<td>" + table.Rows[0]["Context"].ToString() + "</td>");

        b.Append("</tr>");

        b.Append("</tr></table>");

        return b.ToString();
    }
</script>