Return data from C# to jQuery UI autocomplete

Question

I want to populate my autocomplete with data from database. So I wrote a method in c# to read it from db:

public string[] GetNames()
{
    var names = unitOfWork.deviceRepository.Get().Select(w=>w.Name);
    return names.ToArray();
}

And this works just fine. All needed data is in names.

Now Ajax I'm using to get this data to client side:

$(function () {
    var availableTags;
    $.ajax({
        url: "/DeviceUsage/GetNames",
        type: "GET",
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            console.log(data);
            availableTags = data;
        }
    })
    $("#deviceName").autocomplete({
        source: availableTags
    });
});

As You can see I'm leaving dataType for intelligent guess. But the console.log in success writes System.String[] in console instead of data from GetNames. Can anyone suggest me how to modify my code to get the autocomplete work?

Make the return of the GetNames WEB API call a JSONResult and convert your string array to JSon before returning it. Ajax has no idea what to do with a C#/.Net CLR class. — iCollect.it Ltd
– iCollect.it Ltd, Commented May 6, 2014 at 8:13
refer to this tutorial on working sample instinctcoder.com/asp-net-mvc-4-jquery-autocomplete-json-2 — tsohtan
– tsohtan, Commented May 6, 2014 at 8:39

brainless coder · Accepted Answer · 2014-05-06 08:34:41Z

dataType is not for C# or MVC or server side, this is to tell jQuery that you are using json response and jQuery should parse it. Since you are not providing it, jQuery will not parse it and thus data is just an string. If you want json, then provide it or use JSON.parse to parse your data string.

Either -

$.ajax({
        url: "/DeviceUsage/GetNames",
        type: "GET",
        dataType: "json",
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            console.log(data);
            availableTags = data;
        }
    })

or -

$.ajax({
        url: "/DeviceUsage/GetNames",
        type: "GET",
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            var jsonData = JSON.parse(data);
            console.log(jsonData);
            availableTags = jsonData;
        }
    })

And also, you are not waiting for the ajax to complete before you assign -

$("#deviceName").autocomplete({
        source: availableTags
    });

you should wait for ajax to complete, so take this call inside success like this -

success: function (data) {
            //do proper parsing as mentioned earlier
            availableTags = jsonData;
            $("#deviceName").autocomplete({
                 source: availableTags
             }); 
        }

because at the moment of call availableTags has nothing in it.

Jite · Accepted Answer · 2014-05-06 08:23:38Z

1

If you are just expecting a comma-separated string as a return value you could change your GetNames function to return a string and concat the array using the String.Join function.

return String.Join(", ", unitOfWork.deviceRepository.Get().Select(w=>w.Name).ToArray());

But I would personally recommend using some type of json value response and return an array of strings as a json string (easily parsed by JavaScript).

Something like (using newtonsoft json.net, following sample is not tested):

return JsonConvert.SerializeObject(unitOfWork.deviceRepository.Get().Select(w=>w.Name).ToArray());

edited May 6, 2014 at 8:23

answered May 6, 2014 at 8:18

Jite

5,8772 gold badges28 silver badges40 bronze badges

2 Comments

szpic Over a year ago

I tried to get it work but anything I could get is Cannon implicitly convert string to Jsonresult

Jite Over a year ago

Think you could show the function where you call the GetNames() function?

Collectives™ on Stack Overflow

Return data from C# to jQuery UI autocomplete

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related