c# - Getting error on jQuery Tag-it UI widget Failed to load resource -

i using jquery ui widget tagit in asp.net. code working fine want highlight tags not available list.

previously asked question , using same method highlight tags not available list

my code

.aspx code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <link href="../css/jquery.tagit.css" rel="stylesheet" />         <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>           <script src="../javascript/tag-it.js"></script>         <link href="../css/tagit.ui-zendesk.css" rel="stylesheet" />     <script>     $(function () {         $.ajax({             url: 'updatesingimgkwds.aspx/getkeywords',             type: 'get',             datatype: "json",             contenttype: "application/json; charset=utf-8",             success: function (res) {                  console.log(res.d);                   $('#singlefieldtags').tagit({                     casesensitive: false,                     availabletags: res.d,                     allowspaces: true,                     singlefield: true,                     singlefieldnode: $('#txtcompkwds'),                     beforetagadded: function (event, ui) {                         if ((res.d).indexof(ui.taglabel.tolowercase()) == -1) {                             $(ui.tag).css('background', '#f9999a')                         }                     }                  });                },             failure: function (err) {                 alert(err);             }         });          }); 

cs code

   [webmethod]     [scriptmethod(usehttpget = true, responseformat = responseformat.json)]     public static string[] getkeywords()     {         list<string> lst = new list<string>();         string querystring = "select keyword sib_kwd_library";         using (sqlconnection connection = new sqlconnection(configurationmanager.appsettings["vconnstring"].tostring()))         {             using (sqlcommand command = new sqlcommand(querystring, connection))             {                 connection.open();                 using (sqldatareader reader = command.executereader())                 {                      while (reader.read())                     {                         lst.add(reader["keyword"].tostring());                     }                 }             }         }         lst = lst.convertall(d => d.tolower());         return lst.toarray();     } 

when length of array list up-to 7345 getting error resource: server responded status of 500 (internal server error)

js fiddle

stuck issue please help.

okay problem length of data sending result , when traced used below error message in console:

error during serialization or deserialization using json javascriptserializer. length of string exceeds value set on maxjsonlength property.

so need make setting in web.config file allow maxjsonlength jsonserialization 1 below:

<system.web.extensions>     <scripting>       <webservices>         <jsonserialization maxjsonlength="2147483644"/> //this max value integer       </webservices>     </scripting> </system.web.extensions> 

and make few changes webmethod , way of loading source below:

webmethod

[webmethod] [scriptmethod(usehttpget = true, responseformat = responseformat.json)] public static list<string> getkeywords() {     list<string> lst = new list<string>();     string querystring = "select keyword sib_kwd_library";     using (sqlconnection connection = new sqlconnection(configurationmanager.appsettings["vconnstring"].tostring()))     {         connection.open();         using (sqlcommand command = new sqlcommand(querystring, connection))         {              using (sqldatareader reader = command.executereader())             {                  while (reader.read())                 {                     lst.add(reader["keyword"].tostring());                 }             }         }     }     lst = lst.convertall(d => d.tolower());     return lst; //return list } 

now way call ajax source:

$(document).ready(function () {      var source = []; //declare source array      $.when(//get source first             $.ajax({                 url: '<%= resolveurl("default.aspx/getkeywords") %>',                 type: 'get',                 datatype: "json",                 contenttype: "application/json; charset=utf-8",                 success: function (res) {                     source = res.d;                 },                 error: function (jqxhr, textstatus, errorthrown) {                     console.log(jqxhr);                     console.log(textstatus);                     console.log(errorthrown);                 }             })      ).done(function () { //once done assign cannot directly assign source availabletags:res.d             $('#mysinglefieldtags').tagit({                   casesensitive: false,                   availabletags: source,                   allowspaces: true,                   singlefield: true,                   singlefieldnode: $('#txtcompkwds'),                   beforetagadded: function (event, ui) {                        console.log(source);                        if ((source).indexof(ui.taglabel.tolowercase()) == -1) {                             $(ui.tag).css('background', '#f9999a')                         }                   }              });      }); }); 

check console once done. have array of values.

note : check error remove above setting in web.config file , keep other codes mentioned , check console once done!!