CODEWITHSUNDEEP
asp.netjqueryasp.net-mvc
Saravanan I M
Saravanan I M

Reputation: 1155

Problem in JsonResult

I am using the jsonresult for listing all the cities under a country. I retrieve the data from database and load it to a dropdown list using jquery. The problem is if the cities goes beyond 3000 then the jsonresult is not working. 

<script type="text/javascript">
  $(document).ready(function () {
    //Hook onto the MakeID list's onchange event       
    $("#Country").change(function () {
        //build the request url
        $("#HomeTown").empty();

        var url = '<%= Url.Content("~/") %>' + "Location/GetCitiesByCountry/" + $("#Country").val();

        $.getJSON(url, function (data) {

            $.each(data, function (index, optionData) {

                $("#HomeTown").append("<option value='" + optionData.geonameid + "'>" + optionData.asciiname + "</option>");

            });
            $("#HomeTown").option[0].selected = true;
        });
    }).change();
  });
</script>

Upvotes: 0

Views: 340

Answers (5)

Amarghosh
Amarghosh

Reputation: 59471

Apart from being slow to load or possibilities of crashing, a 3000 item list in a web page is a poor design from the user experience point of view. Imagine the size of the page when the drop-down list is open. I wouldn't possibly come back to a site that gives me such a big list to choose from.

Instead of having whole 3000 cities in the list, think of a way to page them. Classify the cities based on their location(country/state/province) or name (alphabetic order) or whatever criteria that makes sense for your application.

Upvotes: 0

RPM1984
RPM1984

Reputation: 73123

Too many items in the dropdown.

Either limit the items, or consider using another control - such as an AutoComplete control.

Upvotes: 1

griegs
griegs

Reputation: 22770

I agree with @Ken. What you might be able to do is a progressive load of the data.

So you could load in the first say 500 and while those are displaying you could load the next 500 using jQuery.

Or, and you need to research this, you can probably get a jQuery drop down which allows you to do a post back when you hit the bottom of the dropdown.

But I think the best option is to try and limit the amount of data in the dropdown.

Upvotes: 1

Gabriel
Gabriel

Reputation: 18780

http://forums.asp.net/p/1090853/1634922.aspx This link has a discussion regarding maximum length exceeded errors from json serialization. Apparently you can increase the max size in web.config.

Upvotes: 0

Ken Redler
Ken Redler

Reputation: 23943

3000 is an awfully large number for a dropdown list. You should consider some sort of ajax interaction with your server to page results as needed. Something like the jQuery DataTables plugin (or any number of similar options, as discussed here) should give you a good start. Some of these can be simplified so that they're little more than a dropdown list, visually -- but with server-side paging.

Upvotes: 0

Related Questions