Wednesday, November 16, 2011
implement Nested Modal popup extender and BehaviorId of ModalPopupExtender in AJAX
Example of implementation of implement Nested Modal popup extender and BehaviorId of ModalPopupExtender in AJAX
Complete Example:
-----------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RoleMgmt._Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ 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>Untitled Page</title>
<script language="javascript" type="text/javascript">
function ok(sender, e)
{
$find('ctl00_ContentPlaceHolder1_mpeTask').hide();
__doPostBack('ctl00_ContentPlaceHolder1_btnSave', e);
}
</script>
<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:LinkButton ID="lnkAddOtherTask" runat="server">add Task</asp:LinkButton></div>
<br />
<cc1:ModalPopupExtender ID="mpeTask" runat="server" BackgroundCssClass="modalBackground"
CancelControlID="btnCancel" DropShadow="false" PopupControlID="Panel1"
TargetControlID="lnkAddOtherTask" BehaviorID="MsgPopup">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" Width="100%" Style="display: none">
Role: <asp:DropDownList ID="ddlusers" runat="server"></asp:DropDownList>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Add Category</asp:LinkButton>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound" Width="50%">
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#E3EAEB" />
<EditRowStyle BackColor="#7C6F57" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Form Name">
<ItemStyle Width="50%" />
<ItemTemplate>
<asp:Label ID="lblFormName" runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Add">
<ItemTemplate>
<asp:CheckBox ID="chkAdd" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:CheckBox ID="chkEdit" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:CheckBox ID="chkDel" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="View">
<ItemTemplate>
<asp:CheckBox ID="chkView" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" /><br />
<asp:Button ID="btnCancel" runat="server" OnClick="btnSave_Click" Text="Cancel" />
<br />
</asp:Panel>
<br /><cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
CancelControlID="btnOtherTaskCancel" DropShadow="false" PopupControlID="Panel2"
TargetControlID="LinkButton1">
</cc1:ModalPopupExtender>
<br />
<br />
<asp:Panel ID="Panel2" runat="server" Width="100%" Style="display: none" >
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%" class="tblsection">
<tr>
<td align="right">
<asp:Label ID="lblOtherTaskNameTitle" runat="server" Text="Task Name:" Width="88px"></asp:Label></td>
<td>
<asp:TextBox ID="txtOtherTaskName" runat="server" CssClass="txtbox" Width="185px"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvTaskName" runat="server" ControlToValidate="txtOtherTaskName"
ErrorMessage="Please enter task name." ValidationGroup="e"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td align="right" style="height: 22px">
<asp:Label ID="lblCat" runat="server" Text="Category:" Width="88px"></asp:Label></td>
<td style="height: 22px">
<asp:DropDownList ID="ddlCat" runat="server">
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Label ID="lblOtherTaskDesc" runat="server" Text="Description:"></asp:Label></td>
<td>
<asp:TextBox ID="txtOtherTaskDesc" runat="server" CssClass="txtbox" Height="136px"
TextMode="MultiLine" Width="617px"></asp:TextBox></td>
</tr>
<tr>
<td align="right" valign="top">
<asp:Label ID="lblEstmtdHr" runat="server" Text="Estmtd. Hours:"></asp:Label></td>
<td>
<asp:TextBox ID="txtEstmtdHr" runat="server" CssClass="txtbox" Width="47px" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEstmtdHr" runat="server" ControlToValidate="txtEstmtdHr"
ErrorMessage="Please enter hours." ValidationGroup="e"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td align="left">
<asp:Button ID="btnOtherTaskSave" runat="server" CommandName="up" CssClass="buttonBlue"
Text="Save" ValidationGroup="e" OnClick="btnOtherTaskSave_Click" /></td>
<td align="left">
<asp:Button ID="btnOtherTaskCancel" runat="server" CommandName="can" CssClass="buttonBlue"
Text="Cancel" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
</table>
</asp:Panel>
<br />
<br />
<br />
<br />
</form>
</body>
</html>
Example for BehaviorId of ModalPopupExtender
-----------------------------------------------------------------
-----------------------------------------------------------------
<cc1:modalpopupextender id="ModalPopupExtender1" runat="server" BehaviorID="MsgPopup" targetcontrolid="LinkButton1" BackgroundCssClass="modalBackground" PopupControlID="Panel2"></cc1:modalpopupextender>
instead id, you can use BehaviorId to show and hide ModalPopupExtender.
$find('MsgPopup').show() // to show the ModalPopupExtender.
$find('MsgPopup').hide() // to hide the ModalPopupExtender.
