|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Announcements
Services
Chapters
Feature Zones
|
Note: This is an unedited contribution. If this article is inappropriate,
needs attention or copies someone else's work without reference then please
Report This Article
IntroductionI want to take this opportunity to introduce a sample application which shows how to use ModalPopupExtender for Logging and Signup for any ASP.NET web application. In this quick demonstration, I am going to show you how we can implement Modal Dialog Box using AJAX in ASP.NET. Modal Dialog Box (Formally called ModalPopupExtender) is extremely essential in today’s application as it avoids redirecting to a new page just to login or signup the users. A simple example can show how to implement the same. BackgroundI was just looking around to use modalpopupextender for login & signup for my site...but I could not find one. So finally ended up creating this login sample application so it might be useful for everyone. Using the CodeTo start with lets understand about Modalpopup... ModalPopup Description The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it. When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing. When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script. ModalPopup Properties: The control above is initialized with this code. The display on the modal popup element is set to none to avoid a flicker on render. The italic properties are optional: <ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="OkButton" OnOkScript="onOk()" CancelControlID="CancelButton" PopupDragHandleControlID="Panel3" />
This shows how you define modalpopup extender for login and signup screen buttons... <modalpopupextender id="ModalPopupExtenderLogin" runat="server" targetcontrolid="Loginlnk" popupcontrolid="LoginPanel" backgroundcssclass="modalBackground" dropshadow="true" okcontrolid="LoginBtn" önokscript="ok()" cancelcontrolid="CancelBtn" /><modalpopupextender id="ModalPopupExtenderSignup" runat="server" targetcontrolid="Signuplnk" popupcontrolid="SignupPanel" backgroundcssclass="modalBackground" dropshadow="true" okcontrolid="JoinBtn" önokscript="okJoin()" cancelcontrolid="CancelBtn2" /> Installation:Download Ajax toolkit Version 1.0.20229 from this link... Also you need ASP.NET AJAX Extensions 1.0 for ASP.NET 2.0...you can get this from this link... Once you have all those....open the sample project in VS2005 and it should work. HistoryApril 3rd 2008. Initial version published
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||