ASP.NET AJAX Control Toolkit

Re: Inconsistencies in Ajax tutorial

sunny74 — Mon, 13 Jul 2009 07:06:17 GMT

Hi Zhi-Qiang,

Thanks for ur reply.

I think the above problem will be solved.I will confirm shortly.

But there a few other problems dogging me.

1) I am unable to get the selected value of the Features dropdown using javascript.

I hav wriiten the following code:

var IndexValue = $get('<%=Features.ClientID %>').selectedIndex;
var SelectedVal = $get('<%=Features.ClientID %>').options[IndexValue].value;
alert(SelectedVal);

It didn't work.It doesn't get the object.

Then I changed my code to:

var featuresdd = $find('<%=Features.ClientID %>',qbuild);
        alert(featuresdd);
        var IndexValue = $get('featuresdd').selectedIndex;
        var SelectedVal = $get('<%=Features.ClientID %>').options[IndexValue].value;
        alert(SelectedVal);

here featuresdd is coming null so again I am getting error "object required" in the next line.

2) You hav not answered my query regarding use of namespace in the web service for the cascading dropdowns.

Re: Inconsistencies in Ajax tutorial

Zhi-Qiang Ni - MSFT — Mon, 13 Jul 2009 02:33:42 GMT

Hi sunny74,

Now, I know where the problem lies. The UpdatePanel is different to a Panel. We need to place controls into the UpdatePanel’s ContentTemplate Tag:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <YourControls>
        </ContentTemplate>
    </asp:UpdatePanel>

The documentations:

http://www.asp.net/AJAX/Documentation/Live/overview/UpdatePanelOverview.aspx
http://www.asp.net/AJAX/Documentation/Live/tutorials/UsingUpdatePanelControls.aspx
Understanding Partial Page Updates with ASP.NET AJAX
How Do I:Implement Dynamic Partial-Page Updates with ASP.NET AJAX?

Every time I provide a link, I believe it is helpful. If you have seen my sample in my last reply, you will understand how to place the DropDownList inside UpdatePanel. So, please be patient to refer to the detailed information inside.

Best regards,

Zhi-Qiang Ni

Re: Inconsistencies in Ajax tutorial

sunny74 — Fri, 10 Jul 2009 12:50:46 GMT

Hi Zhi-Qiang,

Thanks for ur reply.

If I put table inside UpdatePanel I get an error which says "table cannot be an element of updatepanel".

If I put UpdatePanel inside table around the Features DropDown I get 2 errors which "the name Features does not exist in the current context".

There is another problem.

If I put a namespace in my webservice it stops working even though all other code remains the same. What change shud I make in the markup for the cascading ones so that it accepts the webservice with a namespace.

How to tackle these issues?

Re: Inconsistencies in Ajax tutorial

Zhi-Qiang Ni - MSFT — Fri, 10 Jul 2009 06:22:24 GMT

Hi sunny74,

No, this code is just a simple client javascript code, the $find method is belong to the ASP.NET Ajax.
http://www.asp.net/AJAX/Documentation/Live/ClientReference/Global/default.aspx

Thus using a <asp:Button/> would cause both the server side as well as client side code to fail.

In my last reply, I have already said that the server side event can not change the DropDownList’s selection. So, you just need to use the Client Click event to achieve this goal. Do not let the button do a Post Back, OK??

I can’t understand why your table will crash in the UpdatePanel, you can refer to my client code in this thread:
http://forums.asp.net/p/1256084/2344897.aspx#2344897
What error would be raised in your code?

Best regards,

Zhi-Qiang Ni

Re: Inconsistencies in Ajax tutorial

sunny74 — Fri, 10 Jul 2009 05:36:32 GMT

Hi,

Thanks for ur reply.

<asp:Button ID="btnReset" Text="Reset" runat="server" OnClientClick="resetClicked();return false;" />
<script type="text/javascript">
function resetClicked() {
var cdd = $find('the CascadingDropDown’s BehaviorID');
cdd.set_SelectedValue(cdd._promptText);
}
</script>

Is this Jquery code? If so I think I need to add Reference to the Jquery Library.

But I have already achieved this using Client side code js code, but it works only if the control is a HTML control not server side Button bec' a server Button causes a postback,and on the postback the values are set to their original ones and not to the default ones.

Thus using a <asp:Button/> would cause both the server side as well as client side code to fail.

Regarding 3,

I think u r putting the DropDowns directly on the web page and putting the Dropdowns within Update panel.

But that is not possible in my case because I have a div within which a table and within that all the dropdowns i.e within<tr><td></TD></tr> tags. But I cannot put the update panel within a the table or the table within the Update Panel. So this is my problem.

Re: Inconsistencies in Ajax tutorial

Zhi-Qiang Ni - MSFT — Fri, 10 Jul 2009 03:08:35 GMT

Hi sunny74,

1. Let’s clarify the function of the CascadingDropDown. In the description of the CascadingDropDown, it is mentioned that: CascadingDropDown enables a common scenario in which the contents of one list depends on the selection of another list and does so without having to embed the entire data set in the page or transfer it to the client at all. All the logic about the contents of the set of DropDownList controls lives on the server in a web service.

This means the CascadingDropDown would help us build the DropDownList’s options based on the service method’s returned value in the web service instead of we build the options manually at the client side. That’s why the DropDownList is only a blank tag without any ListItem:

<asp:DropDownList ID="ddlColors" runat="server" Width="240px" />
<ajaxToolkit:CascadingDropDown ID="cddColors" 
                                       runat="server" 
                                       TargetControlID="ddlColors" 
                                       ParentControlID="ddlModels"
                                       Category="Color" 
                                       PromptText="Choose a Color...." 
                                       LoadingText="Please wait ..." 
                                       ServicePath="CarsService.asmx" 
                                       ServiceMethod="GetColors">

Besides, all the events of calling web service and changing the child’s options are dynamically client event. We can not control these events from the code-behind but client side. So, in the Button server click event, we can not change the DropDownList’s SelectedItem’s text. To set the DropDownList’s selection to the initialize value, we can use this client method:

<asp:Button ID="btnReset" Text="Reset" runat="server" OnClientClick="resetClicked();return false;" />
    <script type="text/javascript">
        function resetClicked() {
            var cdd = $find('the CascadingDropDown’s BehaviorID');
            cdd.set_SelectedValue(cdd._promptText);
        }
    </script>

2. Most of the AjaxControlToolkit extenders only fire their events from the client side, but some extenders enable us to handle their server side events, such as TabContainer’s ActiveTabChanged (Event), Rating control’s AutoPostBack can be set as true, and so on.

3. To achieve your goal without the CascadingDropDown extenders, you can follow these steps:

.Build a new web site with your DropDownLists and DataBase.
.Set all the DropDownLists’ AutoPostBack property with true.
.In PageLoad function, bind the first DropDownList with the DataBase.
.In each DropDownList’s SelectedIndexChanged event, rebind the child DropDownList’s Data by the selection of their parent’s selection.
For example:

    Protected Sub ddlModels_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlModels.SelectedIndexChanged
        Dim carMakeAdapter As New dsCarsTableAdapters.CarsTableAdapter()
        ddlMakes.Enabled = True

        'Please modify the DataAdapter's method by yourself
        ddlMakes.DataSource = carMakeAdapter.GetCarsByModel(ddlModels.SelectedItem.Text)
        ddlMakes.DataValueField = "CarId"
        ddlMakes.DataTextField = "CarName"
        ddlMakes.DataBind()
    End Sub

.At the client side, place all the controls into an UpdatePanel.

The difference between this method and using the CascadingDropDown is:
In this method, the UpdatePanel helps us change the classic server events of the DropDownLists to dynamic events.
The CascadingDropDown extender is an Ajax control, it would achieve the partial-refresh cascading function automatically.

Best regards,

Zhi-Qiang Ni

Re: Inconsistencies in Ajax tutorial

sunny74 — Thu, 09 Jul 2009 13:19:43 GMT

Hi Zhi-Qiang,

Thanks for ur reply.

I found that when I try to reset the cascading dropdowns to their default values the server side code does not work.

My code is:

protected void Button8_Click(object sender, EventArgs e)
    {
        Features.SelectedItem.Text = "Select a Feature";
        Attributes.SelectedItem.Text = "Select an Attribute";
        @operator.SelectedItem.Text = "Select One";
        Values.SelectedItem.Text = "Select a Value";
        btnOR.Visible = false;
        btnADD.Text = "ADD";
    }

1)Do u hav an explanation as to why this happens?

2)Does this happen with all Ajax controls?

3)You have not given an answer to your other suggestion of putting all Dropdowns in a Update Panel for giving them Ajax functionality.It does not work in my case.What to do?

Warm Regards.

Re: Inconsistencies in Ajax tutorial

Zhi-Qiang Ni - MSFT — Thu, 09 Jul 2009 08:03:31 GMT

Hi sunny74,

I think you have noticed my suggestion about fixing this error in your last reply. So, would you please try to test it firstly?

And, I think finding out the cause ourselves is better than asking others. The documentation about this attribute is as below:
http://msdn.microsoft.com/en-us/library/system.web.ui.page.enableeventvalidation.aspx

Of course, the code would be executed in the event after adding this attribute. It just disables the event validation.

Finally, I would recommend you download the tutorial video’s sample code and test it once again. I believe all these notes are already included in the video.
http://www.asp.net/learn/ajax-videos/video-77.aspx
http://www.asp.net/learn/ajax-videos/video-278.aspx

Best regards,

Zhi-Qiang Ni

Re: Inconsistencies in Ajax tutorial

sunny74 — Thu, 09 Jul 2009 07:34:59 GMT

Hi Zhi-Qiang,

I am now facing a new problem.

After converting my 3 DropDowns to AJAX Cascading ones all the events of the DropDowns have ceased to work. I have written some code in the SelectedIndexChanged event of the DropDowns but they aren't working.

I have a ADD button on the page, when I press it I get the following error:

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Server Error in '/WrMapTracking' Application.

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentException: Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Source Error:

An unhandled exception was generated during the execution of the 
current web request. Information regarding the origin and location of the 
exception can be identified using the exception stack trace below.

Stack Trace:

[ArgumentException: Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.]
   System.Web.UI.ClientScriptManager.ValidateEvent(String uniqueId, String argument) +8620921
   System.Web.UI.Control.ValidateEvent(String uniqueID, String eventArgument) +72
   System.Web.UI.WebControls.DropDownList.LoadPostData(String postDataKey, NameValueCollection postCollection) +53
   System.Web.UI.WebControls.DropDownList.System.Web.UI.IPostBackDataHandler.LoadPostData(String postDataKey, NameValueCollection postCollection) +13
   System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad) +346
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1743

Version Information: Microsoft .NET Framework Version:2.0.50727.3053; ASP.NET Version:2.0.50727.3053

So it seems server side event validation has gone crazy.How to set things right?

If I add the code “EnableEventValidation="false" will the code in the events get executed?

Thanks for your reply.

Re: Inconsistencies in Ajax tutorial

Zhi-Qiang Ni - MSFT — Thu, 09 Jul 2009 07:01:58 GMT

Hi sunny74,

The ServicePath should be “XXX.asmx” rather than “XXX.cs.asmx”, I believe the code in the tutorial is a careless mistake.

For the third DropDownList, because the two parameters can be sent by the CascadingDropDown’s service method, I would recommend you use this method:

        StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
        //int FeaturesID;
        //DictionaryEntry[] myArr = new DictionaryEntry[kv.Count];
        //kv.CopyTo(myArr, 0);
        string ddval1 = myArr[0].Value.ToString();//you should use the kv["the first Category"], for example: kv[“Make”].
        string ddval2 = myArr[1].Value.ToString();//you should use the kv["the second Category"], for example: kv[“Modal”].
        //Then, send the two selected value into the GetData method, for example:
        colorTable = carColorAdapter.GetColorByModelAndMake(ddval1, ddval2);

Please copy and test my sample code of how to control parent by child locally, you will understand the relationship between each of these CascadingDropDowns:
http://forums.asp.net/p/1319523/2626490.aspx#2626490

Best regards,

Zhi-Qiang Ni

Re: Inconsistencies in Ajax tutorial

sunny74 — Thu, 09 Jul 2009 06:10:40 GMT

Hi Zhi_Qiang,

Thanks for ur reply.

Zhi-Qiang Ni - MSFT:
1.The constructor function of CascadingDropDownNameValue class is like this:
New CascadingDropDownNameValue(name, value)

So, you can set both the “value” as the parameters:
values.Add(new CascadingDropDownNameValue(features, features));

The above suggestion of yours works.

if i put values.Add(new CascadingDropDownNameValue(features, features));

I get the actual DropDownList text which is what i need because my query doesn't have Id's with the features or attributes.

But for getting this value from knownCategoryValues if I use

string ddval1 = kv[knownCategoryValues];

I get ddval1 as null.

Then on searching the net I found that StringDictionary can be converted into DictionaryEntry array.

In regard to the webservice function for the 3rd Dropdown knownCategoryValues has the Key,value pair for both the 1st and 2nd DropDowns and I am getting their values in the following way.

StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(
         knownCategoryValues);
        //int FeaturesID;
        DictionaryEntry[] myArr = new DictionaryEntry[kv.Count];
        kv.CopyTo(myArr, 0);
        string ddval1 = myArr[0].Value.ToString();
        string ddval2 = myArr[1].Value.ToString();

But there are still some problems with regard to the 4 tuturials in this site.The mark up as given there is:

<ajaxToolkit:CascadingDropDown ID="ccd1" runat="server" ServicePath="CascadingDropdown0.cs.asmx" ServiceMethod="GetVendors" TargetControlID="VendorsList" Category="Vendor" />

Now the webservice file given in service path is .cs.asmx. But I have created so many web services but didn't get any file with that extension.

Zhi-Qiang Ni - MSFT:
Please refer to my reply carefully: http://forums.asp.net/p/1274181/2427806.aspx#2427806

I went thru' the post given in the link above and your suggestion:

"2. There is no relation between them

Each of the two DropDownLists – the ddlMake, theddlYear could get data from the DataBase separately. Then, we simply need to tie both of them to the DataBase. And, in the SelectedChange events of them, tie the filtered Data to the ddlStyle. There is no need to use the CascadingDropDown Control if more than one parent can control the child control."

U r saying that if that if a child dropdown has to depend on 2 or more parents for its value then there is no need to make it a Cascading DropDown. But in my case the situation is the same but I have made the second dropdown as the parent of third one but its getting the value of both the first and second thru' knownCategoryValues. So I think it can work for more than 2 dropdowns also.'

Ur another suggestion:

Note:

Place all of the Controls into an UpdatePanel, and set the property AutoPostBack as true. Then, the behavior of selection change would seem more smooth.
Add this code “EnableEventValidation="false"” into the page code, otherwise, an error “Sys.WebForms.PageRequestManagerServerErrorException: Invalid postback or callback argument.” would be thrown. "

I tried to do that but I get error in the HTML mark up itself.It doesn't allow me to put the UpdatePanel. My mark is given in the previous reply.

How to overcome this problem?

Warm Regards.

Re: Inconsistencies in Ajax tutorial

Zhi-Qiang Ni - MSFT — Wed, 08 Jul 2009 07:33:29 GMT

Hi sunny74,

1.The constructor function of CascadingDropDownNameValue class is like this:
New CascadingDropDownNameValue(name, value)

So, you can set both the “value” as the parameters:
values.Add(new CascadingDropDownNameValue(features, features));

2.For the third CascadingDropDown
We can’t set two parents on one CacadingDropDown extender. The logic of the cascading is: the second DropDownList’s options are searched by the first one’s selection, the third one is depend on the second one, and so on. The Data in the DB should also be in this relationship:
For example: Make-Modal-Color.
So, when the first two values are selected, the third options have already been searched by this: select * from db where Make=”make” and Modal=”Modal”.
Please refer to my reply carefully: http://forums.asp.net/p/1274181/2427806.aspx#2427806

Best regards,

Zhi-Qiang Ni

Re: Inconsistencies in Ajax tutorial

sunny74 — Tue, 07 Jul 2009 06:29:26 GMT

Hi,

In a reply to one of the posts u had mentioned that if a child dropdown has multiple parents then the 3 dd's should be placed in a update panel and on doing so it will get the Ajax functionality.

I tried to put all my my dropdowns within a update panel. My mark up is as below:

<table>

    <tr><td colspan='4'>Choose the Options</td></tr>
    <tr><th><b>Features</b></th><th><b>Attributes</b></th><th><b>Operators</b></th><th><b>Values</b></th></tr>
    <tr><td>
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        </td>
        <td> <asp:DropDownList ID="DropDownList2" runat="server"
                onprerender="DropDownList2_PreRender"
                onselectedindexchanged="DropDownList2_SelectedIndexChanged">
        </asp:DropDownList></td>
        <td> <asp:DropDownList ID="DropDownList3" runat="server" Height="16px">
            <asp:ListItem Value="0">Select One</asp:ListItem>
            <asp:ListItem Value="1">=</asp:ListItem>
            <asp:ListItem Value="2">!=</asp:ListItem>
            <asp:ListItem Value="3"><</asp:ListItem>
            <asp:ListItem Value="4">></asp:ListItem>
            <asp:ListItem Value="5"><=</asp:ListItem>
            <asp:ListItem Value="6">>=</asp:ListItem>
            <asp:ListItem Value="7">Like</asp:ListItem>
        </asp:DropDownList></td>
        <td> <asp:DropDownList ID="DropDownList4" runat="server">
        </asp:DropDownList></td></tr>
        <tr><td>Selected Value</td><td>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></td><td>

                <cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" ServicePath="FeatureService.asmx" ServiceMethod="GetFeatures" PromptText="Select a Feature" TargetControlID="DropDownList1" Category="Features">
                </cc1:CascadingDropDown>
            </td>
            <td>
               <cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" ServicePath="FeatureService.asmx" ServiceMethod="GetAttributes" PromptText="Select an Attribute" TargetControlID="Attributes" Category="Column" ParentControlID="Features">
                </cc1:CascadingDropDown>
            </td></tr>
                <tr><td>
                <asp:Button ID="btnADD" runat="server" Text="ADD" /> <asp:Button ID="btnOR"
                        runat="server" Text="OR" /></td><td></td><td>
                             </td><td>
                             </td></tr>
        <tr><td colspan="4">
            <asp:TextBox ID="TextBox4" runat="server" Height="16px" Width="437px"></asp:TextBox>
            </td>
            </tr>
        <tr><td>
             </td>
        <td><asp:Button ID="Button7" runat="server" Text="Submit"
                onclick="Button7_Click" /></td>
        <td>
            <asp:Button ID="Button8" runat="server" Text="Clear Selection" /></td>
        <td>
             </td>
            </tr>
        <tr><td>
            <asp:Label ID="Label2" runat="server"></asp:Label>
            </td>
        <td> </td>
        <td>
             </td>
        <td>
             </td>
            </tr>

    </table>

But if I put the table within the update panel I get error and also if i put update panel inside the table.

So this suggestion of yours doesn't work in my case.Any other suggestions?

Re: Inconsistencies in Ajax tutorial

sunny74 — Tue, 07 Jul 2009 06:10:19 GMT

Hi,

Thanks for your reply.

I had gone thru' the following tutorials before making this post ,I found the problems to which I am referring now.

http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-14-cs.aspx
http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-15-cs.aspx
http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-16-cs.aspx
http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-17-cs.aspx

My scenario is like this: I have 3 DropDowns Features, Attributes and Values.Now Attributes is filled on the basis of Features but Values is filled on the basis of Features as well as Attributes.

Now I am having 2 problems:

1)The Features Dropdown is filled by the GetFeatures function of the webservice.You will see that the featureid is not coming from the database but I am adding it thru code in the values List. So in the function for the next DropDown when I write the code:

StringDictionary kv =
      CascadingDropDown.ParseKnownCategoryValuesString(
          knownCategoryValues);
        int FeaturesID;
        if (!kv.ContainsKey("Features") || !Int32.TryParse(kv["Features"], out FeaturesID))
        {
            return null;
        }

I get the featureid value of 1,2 etc but I need the actual feature name

because then I can get the Attributes i.e Column names from the selected Feature table.

How can I get the actual dropdown texts?

2)For the third DropDown I hav 2 parents i.e Features and Attributes.

How to get their values in the function for the 3rd DD?

In the markup can I write multiple ParentControlID like

ParentControlID="Features" ParentControlID="Attributes"

Thanks.

Re: Inconsistencies in Ajax tutorial

Zhi-Qiang Ni - MSFT — Tue, 07 Jul 2009 04:13:51 GMT

Hi,

Firstly, I would recommend you refer to the tutorials of CascadingDropDown and the download the sample code inside:

http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-14-cs.aspx
http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-15-cs.aspx
http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-16-cs.aspx
http://www.asp.net/learn/Ajax-Control-Toolkit/tutorial-17-cs.aspx

1. About the knownCategoryValues parameter, I think this description is detailed enough:

The knownCategoryValues parameter will return a string containing the currently selected category values, as well as the category to retrieve values for. For example, if the extender is populating the "Color" field, you will be passed the values for the "Make" and "Model" fields, as well as "Color" to specify the field to return values for.

The GetFeature method is the first CascadingDropDown's service method, this control can not get any knownCategoryValues because there are no parents control's options are selected. But for your second CascadingDropDown, you can find its parent's selection and category in its ServiceMethod's knownCategoryValues parameter.

2. You can use any DataBase to get the Data in the ServiceMethod. The key is accessing the parent's seleted value as the DataMethod's parameter. At last, we have to change the return type to the CascadingDropDownNameValue.

Here are some similar threads, you can understand the relationship between the parent and child after referring to these:
http://forums.asp.net/p/1274181/2429707.aspx#2429707
http://forums.asp.net/p/1319523/2626490.aspx#2626490
http://forums.asp.net/p/1424307/3178232.aspx#3178232

Best regards,

Zhi-Qiang Ni