N2J N2J - 7 months ago 23
Javascript Question

Autocomplete on textbox returing 404 error , controller/action not found

I'm trying to integrate

autocomplete
on my
textbox
. But it's not hitting the
action
method to fetch the data from model. It throws the following error in console:


http://localhost:56393/Api/AutoCompleteChannelName 404 (Not Found)


Below is the .cshtml code :

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">


JavaScript:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>




$(document).ready(function () {

$("#channelName").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Api/AutoCompleteChannelName",
type: "POST",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.ChannelName,

};
}))
}
})
},

select: function (event, ui) {
event.preventDefault();
$("#channelName").val(ui.item.label);
$("#hdnChannelName").val(ui.item.label);
},

messages: {
noResults: "", results: ""
}
});


Input tag :

<input id="channelName" class="form-control" value="" name="channelName" placeholder="Enter Channel Name To Filter" />


ActionResult :

public JsonResult AutoCompleteChannelName(string term)
{

List<DIM_CHANNEL> obj = bc.DIM_CHANNEL.Where(m => m.CHANNEL_NAME.ToLower().Contains(term.ToLower())).Distinct().AsEnumerable().Select(i => new DIM_CHANNEL
{
ChannelName = i.CHANNEL_NAME,
ChannelKey = i.CHANNEL_KEY,
}).ToList();

return Json(obj, JsonRequestBehavior.AllowGet);
}


Any help would be very much appreciated.

Answer

first of all, change POST to GET. Also, do you have WebAPI route defined in your WebApiConfig.cs?

If it does, you either need to remove that routing, or rename your Controller to anything other than APIController