Loading ...

Open Ajax ModelpopupExtender from Javascript | CodeAsp.Net

Open Ajax ModelpopupExtender from Javascript

 /5
0 (0votes)

Many times we want same model popup is open on the different buttons(links) without postback.i.e. by using client side script. Consider we have a page default.aspx on this page we have two button or link for same work like in your project there is two links (button) for login. If we want open same model popup on the different buttons then we add a dummy button and set their visibility false.

<div style="display: none">
<asp:Button ID="btnDummy" runat="server" Text="Button" />
</div>

now we set targercontrolId of Modelpopup is btnDummy. Below is our model popup design.

<ajaxToolkit:ModalPopupExtender ID="mpeLogin" runat="server" TargetControlID="btnDummy"
PopupControlID="divLoginModal"
DropShadow="false"
BackgroundCssClass="modalBackground"
EnableViewState="true"
CancelControlID="btnCancelPopup">
</ajaxToolkit:ModalPopupExtender>

Below is the design which we want ot open.

<div runat="server" id="divLoginModal" style="display:none;">
<div>
<p>Enter Name:
<asp:TextBox ID="txtname" runat="server" CssClass="textBox"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfdValidator" runat="server" ControlToValidate="txtname" ErrorMessage="Required"></asp:RequiredFieldValidator>
<asp:Button ID="btnSave" runat="server" Text="Save
<asp:Button ID="btnCancelPopup" runat="server" Text="Cancel" CausesValidation="false" />
</p>
</div>
</div>

On my page I have Two links as follows,consider following link is on the top of page

<asp:LinkButton ID="lnkOpen" runat="server" Text="Login" CausesValidation="false"></asp:LinkButton>

And following is on the page bottom

<asp:LinkButton ID="lnkOpen1" runat="server" Text="Login" CausesValidation="false"></asp:LinkButton>

following is the javascript to open/hide modelpopupextender.

<script language="javascript" type="text/javascript">
function ShowMPE()
{
$find('<%= mpeLogin.ClientID%>').show();
}

function HideMPE()
{
$find('<%= mpeLogin.ClientID%>').hide();;
}
</script>

Comments (1)

   
vijil
vijil
how can i validate the username and password from the modalpopupextender ajax control.
7/13/2010
 · 
by
  • :*
  • :*
  • :
 *

Top Posts