C#.net

Ajax Pop Up Box

By Shefeek Jinnah - For Technical Information ⋅ May 22, 2009 ⋅ Post a comment


 

Its been quite long since I wrote something on .net .So here comes a tutorial or rather some code snippets. I mentined this as code snippets because I cant explain much on this code.We are using the ajax tools kit provided by Microsoft and there is nothing much to do with code).I hope this might be interesting for you.

Check out the two screen shot below

ajaxpopup.gif
SO I guess you understood what I am trying to explain .Its nothing but how you can bring a pop up or rather named as “Model Pop Up” with .net .The pop up can be brought to the front with out any page refresh and when it is made visible,the background page got disabled .

Prerequisites

1.Ajax Tool Kit

Download Link

2.Style Sheet which I used (Required only if you need your page look exactly as)

Save the code below as StyleSheet.css

StyleSheet.css

body, div, p, h1, h2, h3, h4, ul, li, table
{
margin:0;
padding:0;
border:none;
}

body
{
background: #EBEBEB url(images/body_bg.gif) repeat left top;
font-family: Tahoma, Arial, sans-serif;
font-size:75%;
}

/* Master Page Layout */
#master_header
{
margin: -1px auto 0 auto;
width: 800px;
}

#master_headertop
{
background: url(images/headertop_img.jpg) no-repeat left top;
}

#master_headerbottom
{
background: url(images/headerbottom_img.png) no-repeat left top;
}

#master_page
{
margin: 5px auto 20px auto;
width: 800px;
}

#master_menu
{
float: left;
width: 240px;
padding-right: 10px;
}

.sidebar
{
width: 100%;
margin-bottom: 10px;
}

.sidebarheader
{
height: 24px;
padding: 10px 0 0 35px;
background: url(images/sidebar_header.png) no-repeat left top;
color: #FFF;
font-family: Arial, Sans-Serif;
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
}

.sidebarcontent
{
border: 1px solid #0F2543;
padding: 20px 20px 20px 30px;
line-height: 1.5em;
font-weight: bold;
}

#master_sidebarSamples
{
padding-top: 72px;
background: #FFF url(images/samples_bg.gif) no-repeat left top;
}

#master_sidebarWalkthroughs
{
padding-top: 72px;
background: #FFF url(images/walkthrough_bg.gif) no-repeat left top;
}

.sidebarcontent a
{
padding: 2px 5px;
color: #5377A9;
text-decoration: none;
}

.sidebarcontent a:hover
{
background-color: #0F2543;
color: #FFF;
}

.sidebarcontent a:visited
{
font-weight: normal;
}

#master_content
{
float: left;
width: 550px;
margin-right: -550px;
color: #666666;
}

#master_content ul
{
margin: 0 25px 0 30px;
}

#master_content ul li ul li
{
list-style-type: disc;
}

#master_contentheader
{
height: 19px;
background: url(images/rightcoltop.gif) no-repeat right top;
}

#master_contentplaceholder
{
padding: 30px 20px 40px 20px;
border-left: 1px solid #0F2543;
border-right: 1px solid #0F2543;
border-bottom: 1px solid #0F2543;
background-color: #EFEFEF;
line-height: 1.5em;
}

#master_contentfooter
{
clear: both;
padding: 10px 0 5px 10px;
color: #333;
font-size: 0.8em;
letter-spacing: 0.1em;
}

/* Content Page Layout */
.demoarea {
padding:20px;
background:#FFF url(images/demotop.png) no-repeat left top;
}

.demoarea p
{
padding:5px;
}

.demoheading {
padding-bottom:20px;
color:#5377A9;
font-family:Arial, Sans-Serif;
font-weight:bold;
font-size:1.5em;
}

.demobottom {
height:8px;
background:#FFF url(images/demobottom.png) no-repeat left bottom;
}

.heading {
padding: 1em 0 1em 0;
color:#5377A9;
font-family:Arial, Sans-Serif;
font-weight:bold;
font-size:1.2em;
}

.subheading{
padding:.8em 0 0.5em 0;
color:#0F2543;
font-weight:bold;
font-family:Arial, Sans-Serif;
font-size:1.1em;
}

p {}

em {font-style:italic}

i {font-style: italic;}

strong {font-weight:bold;}

.codeReference
{
font-family: 'Courier New', Monospace;
font-style: normal;
font-weight: bold;
}

pre, code {
display:block;
margin:15px 15px 15px 0;
padding:10px;
border:1px dashed #CCC;
background-color:#FFF;
color:#000;
font-family:'Courier New', Monospace;
font-size:0.9em;
font-style:normal;
}

.releaseList {
list-style-type:disc;
}

/* Styles for the Animation Reference */
.animationReferenceTable
{
}

.animationReferenceRow
{
}

.animationReferenceField
{
text-align: right;
vertical-align: top;
padding-top: 5px;
}

.animationReferenceCode
{
margin-top: 5px;
vertical-align: top;
font-family: 'Courier New', Monospace;
font-style: normal;
font-weight: bold;

display:block;
background-color:#FFF;
color:#000;
font-family:'Courier New', Monospace;
font-size:0.9em;
font-style:normal;
font-weight: bold;
margin-bottom: 5px;
}

.animationReferenceItems
{
vertical-align: top;
}

.animationReferenceItemTable
{
width: 100%;
padding: 0px;
margin: 0px;
}

.animationReferenceItemRow
{
width: 100%;
padding: 0px;
margin: 0px;
}

.animationReferenceItem
{
width: 100%;
padding: 0px;
margin: 0px;
padding-bottom: 10px;
}

.animationReferenceItemCode
{
display:block;
background-color:#FFF;
color:#000;
font-family:'Courier New', Monospace;
font-size:0.9em;
font-style:normal;
font-weight: bold;
}

/******************************/
/**Styling information specific to individual content pages**/

/* Accordion */
.accordionHeader
{
border: 1px solid #2F4F4F;
color: white;
background-color: #2E4d7B;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}

#master_content .accordionHeader a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}

#master_content .accordionHeader a:hover
{
background: none;
text-decoration: underline;
}

.accordionHeaderSelected
{
border: 1px solid #2F4F4F;
color: white;
background-color: #5078B3;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
margin-top: 5px;
cursor: pointer;
}

#master_content .accordionHeaderSelected a
{
color: #FFFFFF;
background: none;
text-decoration: none;
}

#master_content .accordionHeaderSelected a:hover
{
background: none;
text-decoration: underline;
}

.accordionContent
{
background-color: #D3DEEF;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
}

/*AutoComplete flyout */

.autocomplete_completionListElement
{
visibility : hidden;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : 'default';
overflow : auto;
height : 200px;
text-align : left;
list-style-type : none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
background-color: #ffff99;
color: black;
padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem
{
background-color : window;
color : windowtext;
padding : 1px;
}

/*Cascading DropDown*/

/*CollapsiblePanel*/
.collapsePanel {

background-color:white;
overflow:hidden;
}

.collapsePanelHeader{
width:100%;
height:30px;
background-image: url(images/bg-menu-main.png);
background-repeat:repeat-x;
color:#FFF;
font-weight:bold;
}

#master_content .collapsePanelHeader a {color:#FFF;}
#master_content .collapsePanelHeader a:hover {text-decoration:none;background:none;}

/*Confirm Button*/

/* DropShadow */

#master_content .dropShadowPanel span {color:white;text-decoration:underline;}
#master_content .dropShadowPanel span:hover {text-decoration:none;}

.dropShadowPanel
{
width:300px;
background-color:#5377A9;
color:white;
font-weight:bold;
}

/*Drag Panel*/
.dragMe {
width:100%;
height:21px;
background-color:#FFF;
background-image:url(images/header-opened.png);
text-align:center;
cursor:move;
font-weight:bold;
}

.overflowHidden {overflow:hidden;}

.overflowScroll {overflow:hidden;}

/*Hover Menu*/
.popupMenu {
position:absolute;
visibility:hidden;
background-color:#F5F7F8;
opacity:.9;
filter: alpha(opacity=90);
}

.popupHover {
background-image:url(images/header-opened.png);
background-repeat:repeat-x;
background-position:left top;
background-color:#F5F7F8;
}

/* PagingBulletedList */
.selectIndex {
font-weight: bold;
text-decoration:none;
}
.unselectIndex {
font-weight:normal;
text-decoration:underline;
}

/*Modal Popup*/
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}

.sampleStyleA {
background-color:#FFF;
}

.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}

.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}

.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}

/*Popup Control*/
.popupControl{
background-color:White;
position:absolute;
visibility:hidden;
}

/*Reorder List*/
.dragHandle {
width:10px;
height:15px;
background-color:Blue;
background-image:url(images/bg-menu-main.png);
cursor:move;
border:outset thin white;
}

.callbackStyle {
border:thin blue inset;
}

.callbackStyle table {
background-color:#5377A9;
color:Black;
}

.reorderListDemo li {
list-style:none;
margin:2px;
background-image:url(images/bg_nav.gif);
background-repeat:repeat-x;
color:#FFF;
}

.reorderListDemo li a {color:#FFF !important; font-weight:bold;}

.reorderCue {
border:dashed thin black;
width:100%;
height:25px;
}

.itemArea {
margin-left:15px;
font-family:Arial, Verdana, sans-serif;
font-size:1em;
text-align:left;
}

/* Rounded Corners*/

.roundedPanel
{
width:300px;
background-color:#5377A9;
color:white;
font-weight:bold;
}

/* ResizableControl */

.frameImage
{
width:130px;
height:65px;
overflow:hidden;
float:left;
padding:3px;
}

.frameText
{
width:100px;
height:100px;
overflow:auto;
float:left;
background-color:#ffffff;
border-style:solid;
border-width:2px;
border-color:Gray;
font-family:Helvetica;
line-height:normal;
}

.handleImage
{
width:15px;
height:16px;
background-image:url(images/HandleHand.png);
overflow:hidden;
cursor:se-resize;
}

.handleText
{
width:16px;
height:16px;
background-image:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}

.resizingImage
{
padding:0px;
border-style:solid;
border-width:3px;
border-color:#B4D35D;
}

.resizingText
{
padding:0px;
border-style:solid;
border-width:2px;
border-color:#7391BA;
}

/*Textbox Watermark*/

.unwatermarked {
height:18px;
width:148px;
}

.watermarked {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;
}

/* Rating */
.ratingStar {
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}

.filledRatingStar {
background-image: url(Images/FilledStar.png);

}

.emptyRatingStar {
background-image: url(Images/EmptyStar.png);
}

.savedRatingStar {
background-image: url(Images/SavedStar.png);
}

/*Toggle Button*/

/*Setup*/
.walkthrough li {padding-bottom:5px;}

/*Using a sample extender*/

/*Creating a new extender*/
.walkthroughNote {
padding-left:25px;
font-style:italic;
}

/*Other neat stuff*/

/************ PasswordStrength Related Styles ***********************/
.TextIndicator_TextBox1
{
background-color:Gray;
color:White;
font-family:Arial;
font-size:x-small;
font-style:italic;
padding: 2px 3px 2px 3px;
}

.BarIndicator_TextBox2_weak
{
color:Red;
background-color:Red;
}
.BarIndicator_TextBox2_average
{
color:Blue;
background-color:Blue;
}
.BarIndicator_TextBox2_good
{
color:Green;
background-color:Green;
}

.BarBorder_TextBox2
{
border-style:solid;
border-width:1px;
padding:2px 2px 2px 2px;
width:200px;
vertical-align:middle;
}

.TextIndicator_TextBox3
{
background-color:Blue;
color:Yellow;
font-size:small;
font-variant:small-caps;
padding: 2px 3px 2px 3px;
}

.TextIndicator_TextBox3_Handle
{
width:16px;
height:14px;
background-image:url(images/Question.png);
overflow:hidden;
cursor:help;
}

.TextIndicator_TextBox1_Strength1
{
background-color:Gray;
color:White;
font-family:Arial;
font-size:x-small;
font-style:italic;
padding: 2px 3px 2px 3px;
font-weight:bold;
}
.TextIndicator_TextBox1_Strength2
{
background-color:Gray;
color:Yellow;
font-family:Arial;
font-size:x-small;
font-style:italic;
padding: 2px 3px 2px 3px;
font-weight:bold;
}
.TextIndicator_TextBox1_Strength3
{
background-color:Gray;
color: #FFCAAF;
font-family:Arial;
font-size:x-small;
font-style:italic;
padding: 2px 3px 2px 3px;
font-weight:bold;
}
.TextIndicator_TextBox1_Strength4
{
background-color:Gray;
color:Aqua;
font-family:Arial;
font-size:x-small;
font-style:italic;
padding: 2px 3px 2px 3px;
font-weight:bold;
}
.TextIndicator_TextBox1_Strength5
{
background-color:Gray;
color: #93FF9E;
font-family:Arial;
font-size:x-small;
font-style:italic;
padding: 2px 3px 2px 3px;
font-weight:bold;
}

.dynamicPopulate_Normal
{
border:silver 1px inset;
padding:2px;
text-align:center;
height:2em;
margin:5px;
width:200px;
}

.dynamicPopulate_Updating
{
background-image:url(images/loading.gif);
background-repeat:no-repeat;
border:silver 1px inset;
text-align:center;
padding:2px;
height:2em;
margin:5px;
width:200px;
}
/************ MaskedEdit Related Styles ***********************/
.MaskedEditFocus
{
background-color: #ffffcc;
color: #000000;
}
.MaskedEditMessage
{
color: #ff0000;
font-weight: bold;
}
.MaskedEditError
{
background-color: #ffcccc;
}
.MaskedEditFocusNegative
{
background-color: #ffffcc;
color: #ff0000;
}
.MaskedEditBlurNegative
{
color: #ff0000;
}

.MyCalendar .ajax__calendar_container {
border:1px solid #646464;
background-color: #FF9900;
color: red;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
color: black;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
color: black;
font-weight:bold;
}

/* SlideShow styles */

.slideTitle
{
font-weight:bold;
font-size:small;
font-style:italic;
}

.slideDescription
{
font-size:small;
font-weight:bold;
}

.validatorCalloutHighlight
{
background-color: lemonchiffon;
}

.ListSearchExtenderPrompt
{
font-style:italic;
color:Gray;
background-color:white;
}
/* grid */
.GridViewStyle
{
font-family: Arial, Sans-Serif;
font-size:small;
table-layout: auto;
border-collapse: collapse;
border:#91a7b4 1px solid;
}
/*Header and Pager styles*/
.HeaderStyle, .PagerStyle /*Common Styles*/
{
background-image: url(Images/YahooSprite.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#d1dbe0;
}
.HeaderStyle th
{
padding: 5px;
color: #16387c;
border:#91a7b4 1px solid;
}
.HeaderStyle a
{
text-decoration:none;
color:#16387c;
display:block;
text-align:left;
font-weight:normal;
}
.PagerStyle table
{
text-align:center;
margin:auto;
}
.PagerStyle table td
{
border:0px;
padding:5px;
}
.PagerStyle td
{
border-top: #91a7b4 1px solid;
}
.PagerStyle a
{
color:#16387c;
text-decoration:none;
padding:2px 10px 2px 10px;
border-top:solid 1px #fff;
border-right:solid 1px #91a7b4;
border-bottom:solid 1px #91a7b4;
border-left:solid 1px #fff;
}
.PagerStyle span
{
font-weight:bold;
color:#16387c;
text-decoration:none;
padding:2px 10px 2px 10px;
}
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
{
padding: 5px;
border-right: solid 1px #91a7b4;
}
.RowStyle td
{
background-color: #f1f5f6;
border:#91a7b4 1px solid;

}
.AltRowStyle td
{
background-color: #9ab2ca;
background-image: url(Images/YahooSprite.gif);
background-position:0 -80px;
background-repeat:repeat-x;
border:#91a7b4 1px solid;
}
.SelectedRowStyle td
{
background-color: #fcb814;
background-image: url(Images/YahooSprite.gif);
background-position:center;
background-repeat:repeat-x;
}

;
Here is the Source Code

Sample.aspx

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

 

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title></title>

    <link href="StyleSheet.css" type="text/css" rel="Stylesheet" />

 

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table style="width: 100%">

                  <tr>

                      <td>

                          <br />

                          <br />

                          <br />

                  <asp:LinkButton ID="lnkbtn_newReligion" runat="server" style="text-align: right">NewReligion</asp:LinkButton>

                                                <br />

                      </td>

                  </tr>

                                                <asp:ScriptManager ID="ScriptManager1" 

                      runat="server">

                  </asp:ScriptManager>

                                                <tr>

                                                    <td>

&nbsp;&nbsp;&nbsp;

                                                    </td>

                  </tr>

                  <tr>

                      <td>

&nbsp;&nbsp;&nbsp;

                      </td>

                  </tr>

                                                </td>

                                            </tr>

<tr>

<td>

  <asp:Panel ID="panel_NewReligion" runat="server" Style="display: none" CssClass="modalPopup">

                                                        <asp:Panel ID="Panel4" runat="server" Style="cursor: move; background-color: #DDDDDD;

                                                            border: solid 1px Gray; color: Black">

                                                            <table class="style1">

                                                                <tr>

                                                                    <td>

                                                                        Religion Name

                                                                    </td>

                                                                    <td>

                                                                        <asp:TextBox ID="txt_religionName" runat="server" ValidationGroup="newReligion"></asp:TextBox>

 

                                                                        <asp:Button ID="btn_NewReligion" ValidationGroup="newReligion" runat="server" Text="Add"

                                                                            OnClick="btn_NewReligion_Click" />

                                                                    </td>

                                                                </tr>

                                                                <tr>

                                                                    <td>

                                                                        <asp:LinkButton ID="lnkbtn_CancelReligion" runat="server" Text="Close"></asp:LinkButton>

                                                                    </td>

                                                                </tr>

                                                            </table>

                                                        </asp:Panel>

                                                    </asp:Panel>

                                                </td>

                                            </tr>

                                            <tr>

                                                <td>

                                                    <ajax:ModalPopupExtender ID="ModalPopupExtender_Religion" runat="server" TargetControlID="lnkbtn_newReligion"

                                                        PopupControlID="panel_NewReligion" BackgroundCssClass="modalBackground" CancelControlID="lnkbtn_CancelReligion"

                                                        DropShadow="true" PopupDragHandleControlID="Panel4" />

                                                </td>

                                            </tr>

    </div>

    </form>

</body>

</html>

Here is the C# code section

Sample.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btn_NewReligion_Click(object sender, EventArgs e)
{
try
{

}
catch (Exception ex)
{
HttpContext.Current.ClearError();
}
}
}

Code Explanation

Step 1 : Register Ajax Tool Kit

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

Note : Make sure you copied ajax tool kit file that you downloaded to your project

Step 2: Insert Script manager to the page from

Tools>Ajax Extensions>Script Manager

Step 3 : Design the Page

What I have done is i kept a link button on the page

                  <asp:LinkButton ID="lnkbtn_newReligion" runat="server" style="text-align: right">NewReligion</asp:LinkButton>

I created a panel which needs to be displayed on the center when the button is clicked
Panel

<asp:Panel ID="panel_NewReligion" runat="server" Style="display: none" CssClass="modalPopup">

<asp:Panel ID="Panel4" runat="server" Style="cursor: move; background-color: #DDDDDD;

border: solid 1px Gray; color: Black">

<table class="style1">

<tr>

<td>

Religion Name

</td>

<td>

<asp:TextBox ID="txt_religionName" runat="server" ValidationGroup="newReligion"></asp:TextBox>

<asp:Button ID="btn_NewReligion" ValidationGroup="newReligion" runat="server" Text="Add"

OnClick="btn_NewReligion_Click" />

</td>

</tr>

<tr>

<td>

<asp:LinkButton ID="lnkbtn_CancelReligion" runat="server" Text="Close"></asp:LinkButton>

</td>

</tr>

</table>

</asp:Panel>

</asp:Panel>

Step 5 : Insert code for displaying the panel when the button is clicked

    <ajax:ModalPopupExtender ID="ModalPopupExtender_Religion" runat="server" TargetControlID="lnkbtn_newReligion"

                                                        PopupControlID="panel_NewReligion" BackgroundCssClass="modalBackground" CancelControlID="lnkbtn_CancelReligion"

                                                        DropShadow="true" PopupDragHandleControlID="Panel4" />

 

And you are done..Please comment on if you need more clarifications about this code snippet or if its not working for you

Share

Thanks for reading my blog. If you like what I write, why not subscribe to my feed?

If you are busy, I can send the latest post to your email. Just subscribe to my email updates.

 

Enter your email address:

Delivered by FeedBurner

Tags :  , ,

Discussion

No comments for “Ajax Pop Up Box”

Post a comment