OmegaMan's Musings

Could not find any resources appropriate for the specified culture or the neutral culture.  Make sure “AjaxControlToolkit.Properties.Resources.resources” was correctly embedded or linked into assembly “AjaxControlToolkit” at compile time, or that all the satellite assemblies required are loadable and fully signed.

System.Resources.MissingManifestResourceException: Could not find any resources appropriate for the specified culture or the neutral culture.  Make sure “AjaxControlToolkit.Properties.Resources.resources” was correctly embedded or linked into assembly “AjaxControlToolkit” at compile time, or that all the satellite assemblies required are loadable and fully signed.

AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure the correct version of the scripts are referenced. If you are using an ASP.NET ScriptManager, switch to the AjaxScriptManager in System.Web.Ajax.dll, or use the ToolkitScriptManager in AjaxControlToolkit.dll.

The latest incarnation (3.6.097 as of this writing) of the asp.net Ajax Control Toolkit needs to be setup using its script manager and not the standard asp.net Script Manager.

So one way to avoid the above issues is to drag the ToolkitScriptManager (found in the control toolkit) onto the Form tag and then use any other Ajax Controls. Here is an example of it using the TabContainer:

<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server"/>
<div>
    <asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
        <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1">
            <ContentTemplate><p>Hello</p></ContentTemplate>
        </asp:TabPanel>
        <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
        <ContentTemplate><p>Hello2</p></ContentTemplate>
     </asp:TabPanel>
    </asp:TabContainer>
</div>
</form>

This breaks down step by step what to do to create a cascading drop down using the Ajax Control toolkit in C# and Asp.net 3.5.

1. Create a web service outside the html page. Decorate the class with the below attribute

// To allow this Web Service to be called from script,
// using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class AjaxServices : System.Web.Services.WebService
{ ... }

2. Now create a webmethod with any name. Note if the webmethod resides on the same page (a page level service method) as your html page, make it a static method. But normally if you are creating an asmx web page, do not make it static.  This example is not creating a page level service method. The return is a CascadingDropDownNameValue [] type which is found in the ajax toolkit. The parameters of the webservice method has to be as

   string knownCategoryValues
   string category.

   Those parameters have to be in that case and format; do anything else and a general ajax failure will occur when ajax calls the method. The below shows a Linq db call returning the proper object, and handling the category and the value which will be sent. See the notes in the code about what ajax actually sends. .

[WebMethod]
public CascadingDropDownNameValue[] GetExportTypes   ( string knownCategoryValues, string category )
{

GTCDataContext gtdc       = new GTCDataContext( Utilities.GetConnectionString() );
IEnumerable<CascadingDropDownNameValue> vals = null;
int targetID = 0;

// The data comes in as "XXXX:1" where XXXX is the originating
// control category, which is *not* the same as the category.
// The 1st control will pass in nothing (empty) for the
// knownCategory while 2+ control will pass in
// the originating category and its ID with a :.// Remove the XXXX: and extract an integer value.
if (string.IsNullOrEmpty( knownCategoryValues ) == false)
    int.TryParse(
        Regex.Match( knownCategoryValues,
                     @"(\d+)",
                     RegexOptions.Compiled).Groups[0].Value,
                     out targetID);

switch ( category )
{
    case "Type" : // 1st Initiating DropDownList
        vals = from tp in gtdc.Type_Exports
               select new CascadingDropDownNameValue
               {
                   name = tp.Text,
                   value = tp.Export_Type_ID.ToString(),
               };
        break;

    case "SubType": // Next/child DropDownList
        vals = from tp in gtdc.Type_Export_SubTypes
               where tp.ID_Type_Export == targetID
               select new CascadingDropDownNameValue
               {
                   name = tp.Text,
                   value = "0",
               };

        break;
}

return vals.ToArray<CascadingDropDownNameValue>();

}

3. Test your webservice before trying to hook it up! Very important.
4. Add an ajax ScriptManager  to the target html page.
5. Add an ajax UpdatePanel to the page.
6. Within the panel add the DropDownLists, two in this example.
7. Add a CascadingDropDown control extender to the page for each dropdownlist which will be used. Set the TargetControlID to the id of desired dropdown to work with.

<asp:DropDownList ID="DropDownList1" runat="server" />
<cc1:CascadingDropDown ID="CascadingDropDown1"
                       runat="server"
                       Category="Type"
                       TargetControlID="DropDownList1"
                       LoadingText="Acquiring ..."
                       PromptText="Select Type Of Export"
                       ServiceMethod="GetExportTypes"
                       ServicePath="~/AjaxServices.asmx"

                       >
</cc1:CascadingDropDown>

<asp:DropDownList ID="DropDownList2"
                  runat="server"
                  AutoPostBack="false">
</asp:DropDownList>
<cc1:CascadingDropDown ID="CascadingDropDown2"
                       runat="server"
                       Category="SubType"
                       TargetControlID="DropDownList2"
                       ParentControlID="DropDownList1"
                       LoadingText="Acquiring ..."
                       PromptText="Select End Use"
                       ServiceMethod="GetExportTypes"
                       ServicePath="~/AjaxServices.asmx"

                       >
</cc1:CascadingDropDown>

8. If your last drop down is doing a postback on the page tag turn off event validation or a postback javascript error will be thrown. (The above example has AutoPostBack turned off so no need to do step 7). EnableEventValidation=”false”

This article demonstrates in a step by step fashion how to use the Ajax Control Toolkit’s AutoCompleteExtender control with an animated gif progress indicator while the target dropdown of the AutoCompleteExtender is waiting to be loaded.

This article relies on the fact that you, the developer, already have the toolkit loaded and that a medium level of knowledge of Asp.net, C# and Visual Studio operations are understood. This targets VS2008 SP1, .Net/Asp.net 3.5 SP1,  Ajax Control Toolkit 3.0.20820.

Steps

1. Create the  animated GIF which will be used. Go to the site AjaxLoad.Infowhere one can create animated loading gifs and download them for free. Use firefox to view the site because one can see the types of icons in the dropdown, on the site, where IE does not. Once done save your the icon to your project.
2. The Ajax extender will need to call a webservice to get the data. Create a webservice (.asmx oldstyle type), in this example named AjaxServices.asmx. Within that service add, or uncomment out,  the following attribute declaration to allow the service to have communication from the page to the service in a scriptable manner.

   // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
   [System.Web.Script.Services.ScriptService]
   public class AjaxServices : System.Web.Services.WebService
   {

3. Create a web method, the actual method name can be anything, but it must have the exactinput parameters and return value as shown below. Note we introduce a delay for this demonstration effect (highlighted line) you will not need to do that. Right. :-)

   [WebMethod]
   public string[] GetUsers( string prefixText, int count )
   {
       List<string> names
      = new List<string>()
       { "Alpha", "Beta", "Gamma", "Delta", "Omega" };
   
       // Fake delay to see the update gif
       System.Threading.Thread.Sleep( 5000 );
   
       return names.ToArray();
   }

4. On the web page where the controls will be, add the asp:ScriptManager control. Within the manager we need to let it know our web service we have created and it will be using.

   <asp:ScriptManager ID="ScriptManager1"
       runat="server"
       EnablePartialRendering="true">
   
    <Services>
      <asp:ServiceReference Path="~/AjaxServices.asmx" />
    </Services>
   
   </asp:ScriptManager>

5. Add three more controls, an asp.net textbox  the autoCompleteExtender and the image gif. Here are the controls all added. Note how the extender references the webservice and webmethod, the textbox and calls a javascript function which we will show in step 6. Change the MinimumPrefixLength to two or three if the data list is quite huge. in your system.

   <table>
   <tr>
       <td>User:&nbsp;&nbsp;</td>
       <td><asp:TextBox ID="tbUser" runat="server"></asp:TextBox></td>
       <td>&nbsp;</td>
       <td><img id="processing" style="visibility:hidden" src="ajax-loader.gif" /></td>
       <td>&nbsp;</td>
       <td><cc1:AutoCompleteExtender
      ID="AutoCompleteExtender1"
      runat="server"
      TargetControlID="tbUser"
      ServicePath="AjaxServices.asmx"
      ServiceMethod="GetUsers"
      MinimumPrefixLength="1"
      EnableCaching="true"
      CompletionSetCount="25"
      onclientpopulating="ShowIcon"
      onclientpopulated="ShowIcon"/>
       </td>
   </tr>
   </table>

6. The image starts off hidden. We will write a javascript method, to swap its state.  Place the code on the page after the <Head> section. The code has to know the name of the img tag. The code should look like this:

<script language ="javascript">

function ShowIcon() {

    var e = document.getElementById("processing");

    e.style.visibility =  (e.style.visibility == 'visible') ? 'hidden' : 'visible';

}

</script>

That is it! When done and the extender calls the webservice the gif gets displayed and the user knows something is happening. When the processing is done the same javascript method is called to turn it off.

Note: If no data is found, the final hook call to onclientpopulated is not done and the icon will still be displayed. Possibly you can send back text like “No data found”, but that will be populated in the textbox and has its drawbacks. That is the monkey’s paw wish caveat of using this methodology.