C Sharap Example
  1. Home
  2. C-Sharp Basic
  3. SQL-Basic
  4. Linq to SQL
  5. Grid View
  6. DataList
  7. DataTable
  8. Ajax Toolkit
  9. HTML
  10. CSS
  11. Privacy & Policy
  12. About
  13. Contact
Posted by : Anwar Hossain
Category : How to use ajax toolkit in asp.net C#

How to use ASP.Net AJAX Control Toolkit ModalPopupExtender Control in asp.net c#

Dear viewers I will show how to use Modal Popup using ASP.Net AJAX Control Toolkit ModalPopupExtender Control. By using this control a pop window is displayed to show detail content of panel or div. In this case I have used a panel for displaying panel content. I have registered the AJAX Control Toolkit Library by putting @PageDirective of AJAX Control Toolkit. Then I have taken ModalPopupExtender Control .After taking panel a close button and feedback table has been taken inside the panel.

AJAX Control Toolkit ModalPopupExtender

I have used following properties

TargetControlID – This property is used for which control will be activated to fire after clicking.

PopupControlID – This property is used for applying which control will be displayed as a model popup.

CancelControlID This property is used for applying which control will be used for closing the model popup.

BackgroundCssClass  - This property is used for applying display ModalPopupExtender  background Style.

HTML

<%@ 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>
  <style type="text/css">
  .modalBackground
  {
  background-color: Black;
 
  filter: alpha(opacity=90);
  opacity: 0.8;
  }
  .modalPopup
  {
   background-color: #CECEFF;
  border-width: 1px;
  border-style: solid;
  border-color: black;
  padding-top: 10px;
  padding-left: 10px;
  width: auto;
  height: auto;
  }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <asp:ScriptManager ID="ScriptManager1" runat="server">
  </asp:ScriptManager>
  <asp:Button ID="btnShow" runat="server" Text="Click to see sample modal popup" />
 
  <!-- Taking Modal Popup Control -->
  <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
  CancelControlID="btnClose" BackgroundCssClass="modalBackground" X="10"
   Y="60">
  </cc1:ModalPopupExtender>
  <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
  <asp:Button ID="btnClose" runat="server" Text="Close" />
  <br />
  <table style="margin-left: 0px" width="50%" cellpadding="0">
  <tr>
  <td align="right" valign="top">
  &nbsp;Name
  </td>
  <td width="10">
  &nbsp;
  </td>
  <td>
  <asp:TextBox ID="txtCompanyName" runat="server" Width="250px" CssClass="box17"></asp:TextBox>
  <span style="color: #CC3300">* </span>
  </td>
  </tr>
  <tr>
  <td align="right" valign="middle">
  Address
  </td>
  <td>
  &nbsp;
  </td>
   <td>
  <asp:TextBox ID="txtAddress" runat="server" CssClass="box17" Height="50px" TextMode="MultiLine"
  Width="250px"></asp:TextBox>
  </td>
  </tr>
  <tr>
   <td align="right" valign="middle">
  Area
  </td>
  <td>
  &nbsp;
  </td>
  <td>
  <asp:TextBox ID="txtArea" runat="server" CssClass="box17" Width="250px" Height="30px"
  TextMode="MultiLine"></asp:TextBox>
  </td>
  </tr>
  <tr>
  <td align="right" valign="middle">
  Contact No
  </td>
  <td>
  &nbsp;
  </td>
  <td>
  <asp:TextBox ID="txtPhone" runat="server" Width="250px" CssClass="box17"></asp:TextBox><span
  style="color: #CC3300">*
  </td>
  </tr>
  <tr>
  <td align="right" valign="middle">
  E-mail
   </td>
  <td>
  &nbsp;
  </td>
  <td>
  <asp:TextBox ID="txtEmail" runat="server" Width="250px" CssClass="box17"></asp:TextBox><span
   style="color: #CC3300">* </span>
  </td>
  </tr>
  <tr>
  <td align="right" valign="middle">
  Enquiry Details
  </td>
  <td>
   &nbsp;
  </td>
  <td valign="top">
  <asp:TextBox ID="txtEnquiry" runat="server" Height="100px" TextMode="MultiLine" Width="250px"
  CssClass="box17"></asp:TextBox>
  </td>
  </tr>
  <tr>
  <td>
  &nbsp;
  </td>
  <td>
  &nbsp;
  </td>
   <td>
  <asp:Label ID="lblMsg" runat="server"></asp:Label>
  </td>
  </tr>
  <tr>
  <td>
  &nbsp;
  </td>
   <td>
  &nbsp;
  </td>
  <td>
  <asp:Button ID="btnSend" runat="server" Text="Send" Width="100px" />
  <asp:Button ID="btnClear" runat="server" Text="Clear" Width="100px" />
  </td>
  </tr>
  <tr>
  <td>
  &nbsp;
  </td>
  <td>
  &nbsp;
  </td>
  <td>
  &nbsp;
  </td>
  </tr>
  </table>
  </asp:Panel>
  </div>
  </form>
</body>
</html>
 

Out Put

AJAX-Control-Toolkit-Modal-PopupExtender-Control
AJAX-Control-Toolkit-Modal-PopupExtender-Control-output

Realted Article Headline

How to use TextBoxWatermarkExtender in asp.net using c#
How to use Ajax AutoCompleteExtender control in asp.net using c#
How to use Ajax Collapsible panel control in asp.net c#
How to use ASP.Net AJAX Control Toolkit ModalPopupExtender Control in asp.net c#
how to add an Ajax Control Toolkit Accordion to a page
How to use html editor Ajax control toolkit example in c#
How to use Ajax ConfirmButtonExtender in asp.net using c#
how to use ajax calendar extender in asp net c#
How to use ajax toolkit FilteredTextBox Control in c#

Article Category

How to create asp.net control dynamically
Learn HTML for beginner
DataList example in C Sharp
Mail sending in asp.net c#
State Management in ASP C #
Basic sql tutorial for Beginner
DataTable example in ASP.Net C#
How to use LINQ in ASP.NET C#
asp.net c # basic tutorial
How to use ajax toolkit in asp.net C#
How to use different types of validation control using asp.net c#
How to use grid view in asp.net c#
Protected by Copyscape Online Plagiarism Detection