how to use modal popup in asp.net?

Question

0.00/5 (No votes)

See more:

hi,

I see some links about modalpopupextender but I am not understand clearly. just copy the code and run but I am not getting output..

Default.aspx file

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication8._Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"

TargetControlID="lnkPopup"

PopupControlID="panEdit"

BackgroundCssClass="modalBackground"

CancelControlID="btnCancel"

PopupDragHandleControlID="panEdit">

</ajaxToolkit:ModalPopupExtender>



<asp:PanelID="panEdit"runat="server"Height="180px"Width="400px"CssClass="ModalWindow">

        <h1>Edit/h1>

        <table width="100%">

            <tr>

                <td class="formtext" style="height: 23px; width: 150px;" align="left">

                    Fields1:

                </td>

                <td>

                    <asp:TextBox ID="txtFields1" runat="server"></asp:TextBox>

                </td>

            </tr>

       </table>

       <br />

       <asp:Button ID="Button1" runat="server" Text="Update" OnClick="btnUpdate_Click"/>

       <asp:Button ID="btnCancel" runat="server" Text="Cancel" />

</asp:Panel>

<a id="lnkPopup" runat="server">Show Popup</a>

    </div>
    </form>
</body>
</html>

style1.css file

CSS

.modalBackground

{

  background-color:#CCCCFF;

  filter:alpha(opacity=40);

  opacity:0.5;

}






.ModalWindow

{

  border: solid1px#c0c0c0;

  background:#f0f0f0;

  padding: 0px10px10px10px;

  position:absolute;

  top:-1000px;

}

please verify it,and inform where I a made mistake

Posted 4-Dec-11 23:34pm

vinayfirstblock

Add a Solution

7 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Abhi KA · Answer 1 · 2011-12-04T23:46:00

Solution 1

are you Registed?

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

add Script manager also

Posted 4-Dec-11 23:46pm

Abhi KA

Updated 5-Dec-11 0:23am

v2

Comments

Unareshraju 6-Aug-12 4:44am

you are right abhiram.

*Karthik Harve* · Answer 2 · 2011-12-04T23:47:00

you have not added the "script manager". The script manager is mandatory to use any of the ajax controls. The AjaxContolToolKit library may not has registered with the page. Ajax Tool kIt may has not installed in your machine.

follow these steps--

--> Install Ajax Tool Kit
--> Reset your Visual Studio Tool Box
--> Add new tab in your tool box and name it as Ajax Extensions
--> Right click on your new tab - Click Choose Items
--> Browse your downloaded "AjaxControlToolKit.dll"
--> verify the selected controls
--> Click Ok

Now your new tab in tool box will be filled with ajax controls

Now first drag and drop "ScriptManager" in to your page source.

check the below line has added in your page at the top:

HTML

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

From now you can add any ajax controls..

Hope this helps..

uspatel · Answer 3 · 2011-12-05T00:06:00

Download AjaxControlToolKit.
Add reference of AjaxControlToolKit from solution explorer.
you should add ScriptManager from ToolBox under AjaxExtensions
after form tag.
and use this

C#

<![CDATA[<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication8._Default" %>
 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

member60 · Answer 4 · 2011-12-05T00:11:00

Solution 4

Refer the following this night help you definitely:
ASP.NET AJAX Control Toolkit ModalPopupExtender Control in Action[^]

http://csharpdotnetfreak.blogspot.com/2011/03/ajax-modalpopupextender-example-aspnet.html[^]
http://www.karpach.com/ModalPopupExtender-Example.htm[^]

Posted 5-Dec-11 0:11am

member60

Eduard Lu · Answer 5 · 2011-12-05T14:43:00

You need to download and install ajax control toolkit library first before doing this so.

Here is the link where you can download it.
http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/[^]

Then drag the .dll file into your toolbox or add it as reference. Put the respective directive then drag drop of the toolkit.

Then after that, do the copy paste and im sure it will work :)

Regards,
Eduard

tim cadieux · Answer 6 · 2012-08-02T08:03:00

Solution 6

Complete Tutorial here

http://everymanprogrammer.com/index.php/using-the-ajax-modalpopup-a-beginners-guide/[^]

Posted 2-Aug-12 8:03am

tim cadieux

Ganesh Nikam · Answer 7 · 2012-08-05T22:42:00

Solution 7

hii,
1) you need to install ajax control toolkit
2) register it on page using

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

3) add this line in head tag

Posted 5-Aug-12 22:42pm

Ganesh Nikam