How to use Ajax ScriptManager and ToolkitScriptManager in master page and content pages respectively without errors

See more:

ASP.NET

Ajax

I have an Ajax Script manager in my Master page since my pages use ajax. But in one of my content pages, I need to use AutoCompleteExtender in AjaxControlToolkit which requires the use of ToolScriptManager available in the toolkit. But this leads to an error saying Only one instance of a ScriptManager can be added to the page. I searched over the internet for a solution. Many programmers suggests the use of a ScriptManagerProxy to solve this issue. Another alternative is using ToolscriptManager in the master page instead of ScriptManager. Can anyone please demonstrate how to solve this issue by using ScriptManagerProxy since I think that is a better way of solving the issue?

Here is the code of my master page:

<form  runat="server" id="bodyForm">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ContentPlaceHolder ID="ContentPlaceHolderBodyMain" runat="server">
</asp:ContentPlaceHolder>
</form>

And here is the code of my content page:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:TextBox ID="TextBoxStudentID" runat="server" autocomplete="off"></asp:TextBox>
    <asp:AutoCompleteExtender ID="AutoCompleteExtenderStudentID" runat="server" 
    EnableCaching="true" BehaviorID="AutoCompleteEx" MinimumPrefixLength="2" 
       TargetControlID="TextBoxStudentID" ServicePath="~/CampusMateWebService.asmx" ServiceMethod="GetCompletionListForStudentID" 
       CompletionInterval="50" CompletionSetCount="30" 
       CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" 
       CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" 
       DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="true">
    <Animations>
      <OnShow>
      <Sequence>
      <%-- Make the completion list transparent and then show it --%>
      <OpacityAction Opacity="0" />
      <HideAction Visible="true" />

      <%--Cache the original size of the completion list the first time
        the animation is played and then set it to zero --%>
      <ScriptAction Script="// Cache the size and setup the initial size
                                    var behavior = $find('AutoCompleteEx');
                                    if (!behavior._height) {
                                        var target = behavior.get_completionList();
                                        behavior._height = target.offsetHeight - 2;
                                        target.style.height = '0px';
                                    }" />
      <%-- Expand from 0px to the appropriate size while fading in --%>
      <Parallel Duration=".2">
      <FadeIn />
      <Length PropertyKey="height" StartValue="0" 
        EndValueScript="$find('AutoCompleteEx')._height" />
      </Parallel>
      </Sequence>
      </OnShow>
      <OnHide>
      <%-- Collapse down to 0px and fade out --%>
      <Parallel Duration=".2">
      <FadeOut />
      <Length PropertyKey="height" StartValueScript=
        "$find('AutoCompleteEx')._height" EndValue="0" />
      </Parallel>
      </OnHide>
      </Animations>
    </asp:AutoCompleteExtender>