Ajax Control Toolkit ModalPopupExtender not working in Visual Studio 2012

asp.net ajax visual-studio-2012 ajaxcontroltoolkit

19,212

You should change the line:

<asp:ScriptManager ID="ScriptManager1" runat="server">

with this one:

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true">

19,212

Author by

Mohit

Updated on June 05, 2022

Comments

Mohit almost 2 years

I had been using Visual Studio with Ajax Control Toolkit Version 7.1213 from Nuget. But when i try to use the ModalPopupExtender it was not doing anything at all. I had done a lot of surfing at Stackoverflow, Codeproject as well as other reputed sites but none of their suggestion work on my code.

I had also found from the search that Many users who are using Latest AjaxControlToolkit with Visual Studio 2012 are facing the issue.

Here is the Master Page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Attendance1.Site1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
<!DOCTYPE html>

<html lang="en">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %> - My ASP.NET Application</title>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">     
          <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>  
    <webopt:BundleReference ID="BundleReference1" runat="server" Path="~/Content/css" /> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
    <form id="Form1" runat="server">

    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">
                    <img src="Images/logo.png"  />
                </p>
            </div>
            <div class="float-right">
                <section id="login">
                    <asp:LoginView ID="LoginView1" runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul>


                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <p>
                                Hello, <a id="A1" runat="server" class="username" href="~/Account/Manage" title="Manage your account">
                                    <asp:LoginName ID="LoginName1" runat="server" CssClass="username" /></a>!
                                <asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
                            </p>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </section>
                <nav>
                    <ul id="menu">


                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
        <section class="content-wrapper main-content clear-fix">

            <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>

            <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
            <%--Framework Scripts--%>

           <asp:ScriptReference Name="MsAjaxBundle" />
            <asp:ScriptReference Name="jquery" />
            <asp:ScriptReference Name="jquery.ui.combined" />
            <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
            <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
            <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
            <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
            <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
            <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
            <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>

        </Scripts>
    </asp:ScriptManager>
            <asp:ContentPlaceHolder runat="server" ID="MainContent" />
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </div>
        </div>
    </footer>
    </form>
</body>
</html>

this is my Content Page

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site1.Master" CodeBehind="Login.aspx.cs" Inherits="abc" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                <asp:panel ID="Panel1" style="display:none" runat ="server">
                <div class="HelloWorldPopup">
                    <div class="PopupHeader" id="PopupHeader">Header</div>
                    <div class="PopupBody">
                        <p>This is sample modal dialog</p>
                    </div>
                    <div class="Controls">
                        <input id ="btnOk" type="button" value="Done" />
                        <input id="btnCancel" type="button" value="Cancel" />
                    </div>
                </div>
            </asp:panel>
                    <asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DynamicServicePath="" PopupControlID="Panel1" Enabled="True" CancelControlID="btnCancel" TargetControlID="Button1">
                    </ajaxToolkit:ModalPopupExtender>
        </ContentTemplate>
    </asp:UpdatePanel>

</asp:Content>

Thanks in advance

yrazlik about 10 years

thanks A LOT! i have been trying to figure out why it was not working for about 2 hours!
Clay Smith over 8 years

In modern versions of Ajax toolkit they actually got rid of ToolkitScriptManager. I had the same problem and stupidly I never checked the console. Turns out I was missing Scripts\WebForms\MsAjax that are automatically created with new projects.