Problem in calling web method from Jquery-Ajax ..Error:Internal Server Error
<p>I am learning JQuery and today what I am making is a cascading dropdown (Country State and City).</p>

<p>My code so far is as under</p>

<pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
    &lt;title&gt;Untitled Page&lt;/title&gt;
    &lt;script type="text/javascript" src="JQuery/jquery-1.6.1.min.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        $(document).ready(function() {
            $("#ddlCountry").change(function() {
                var CountryID = $("#ddlCountry option:selected").val();

                $.ajax(
            {
                type: "POST",
                url: "CascadingDropDown.aspx/GetSelectedStates",
                data: "{countryID:'" + CountryID + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    alert(data);

                },
                error: function() { alert(arguments[2]); }
            });

            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
    &lt;div&gt;
    &lt;table&gt;
        &lt;tr&gt;
        &lt;td&gt;Country&lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlCountry" runat="server"/&gt;
        &lt;/td&gt;
        &lt;td&gt;State&lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlState" runat="server"/&gt;
        &lt;/td&gt;
        &lt;td&gt;City&lt;/td&gt;
        &lt;td&gt;
            &lt;asp:DropDownList ID="ddlCity" runat="server"/&gt;
        &lt;/td&gt;
        &lt;/tr&gt;

        &lt;tr&gt;
        &lt;td colspan="2"&gt;
            &lt;asp:Button ID="btnSave" runat="server" Text="Save" /&gt;

        &lt;/td&gt;
        &lt;td&gt;
        &lt;asp:Label ID="lblMessage" runat="server"&gt;&lt;/asp:Label&gt;
        &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The web method is as under</p>

<pre><code>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Services;

public partial class CascadingDropDown : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            PopulateCountry();
        }
    }

    private void PopulateCountry()
    {
        DataSource ds = new DataSource();
        ddlCountry.DataSource = ds.GetCountryList();
        ddlCountry.DataValueField = "CountryCode";
        ddlCountry.DataTextField = "CountryName";
        ddlCountry.DataBind();
    }

    [WebMethod]
    public List&lt;State&gt; GetSelectedStates(string countryID)
    {     
        DataSource ds = new DataSource();
        var stateList = ds.GetStateList();

        var result = stateList.Where(i =&gt; i.CountryCode == countryID);
        return result.ToList&lt;State&gt;();
    }
}
</code></pre>

<p>But while I am choosing any country from the country drop down, I am getting <strong>"Internal Server Error".</strong></p>

<p>Could anyone please help me in point out what mistake I am making and how to overcome this?</p>

<p>Thanks</p>
