Poor Performance -Building Cascading DropDown using JQuery

Poor Performance -Building Cascading DropDown using JQuery

Hi,

Problem - Filling Dropdownlist Cascadively. e.g. On Change of States, filling Cities in the other dropdown. For reference follow the below link.

e.g. http://www.codedigest.com/Articles/jQuery/224_Building_Cascading_DropDownList_in_ASPNet_Using_jQuery_and_JSON.aspx

I tried implementing it using $.getJSON approach. Things works fine till the records are less than 1000 (1k). It dies when the count reaches to 5k & becomes worst at 10k.

Here is the implementation code.

[color=darkblue]<script type="text/javascript">

        $(document).ready(function() {

            $("#ddlStates").change(function() {
                $("#ddlCities").html("");
                var stateValue = $("#ddlStates > option[selected]").attr("value");
                if (stateValue != 0) {
                    $.getJSON('LoadCities.aspx', { StateID: stateValue }, function(data) { FillCities(data); });
                    }
                }
            );
            });

            // Below both works perfectly
            function FillCities(cities) {

                $("#ddlCities").html();
                for (i = 0; i < cities.length; i++) {
                    opt1 = cities[i].ID;
                    opt2 = cities[i].City;
                    $("#ddlCities").append($("<option></option>").val(opt1).html(opt2));
                }
            }

    </script>
[/color]


Here is the HTML -

[color=orange]<body>
    <table border="1">
        <tr>
            <td>
                State
            </td>
            <td>
                <select id="ddlStates" runat="server">
                    <option id="" value="0">Select</option>
                    <option id="Option1" value="1">Tamil Nadu</option>
                    <option id="Option2" value="2">Karnataka</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Cities
            </td>
            <td>
                <select id="ddlCities" runat="server">
                </select>
            </td>
        </tr>       
    </table>
</body>
[/color]


Here is the page code - LoadCities.aspx.cs

[color=green]public partial class LoadCities : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string state = Request["StateID"].ToString();
        StringBuilder strCities = null;
        strCities = JSONSerailizeXML();

        Response.ContentType = "application/json";
        Response.ContentEncoding = Encoding.UTF8;
        Response.Write(strCities.ToString());
        Response.End();
    }

    private StringBuilder JSONSerailizeXML()
    {
        try
        {
            DataSet ds = new DataSet();
            ds.ReadXml(Server.MapPath("~\\XML\\Dropdown1k.xml"));
            DataTable dt = ds.Tables[0];
            JSONObject obj1 = null;
            List<JSONObject> list = new List<JSONObject>();

            foreach (DataRow dr in dt.Rows)
            {
                obj1 = new JSONObject(dr[0].ToString(), dr[1].ToString());
                list.Add(obj1);
            }

            JavaScriptSerializer json = new JavaScriptSerializer();
            StringBuilder strCities = new StringBuilder();
            json.Serialize(list, strCities);

            ds.Dispose();
            return strCities;
        }
        catch (Exception ex)
        {
            throw;
        }
    }
}[/color]


The noticeable thing is that the time is taken in rendering and not while generating the JSON.

Please help if there is any problem in the existing code, or suggest if something can be more better than this.
Your quick help will be highly appreciated.

Regards,
Arun Manglick