My AJAX is not binding the UL list item below is the code

Mark Tabor

Here is my html and ajax

"utf-8" />
"Scripts/jquery-3.3.1.min.js">
"text/javascript">
$(document).ready(function (){
var UserLists = $('#Userlist');
$('#btnUsers').click(function () {
$.ajax({
type: 'GET',
url: 'api/employees/',
dataType: 'json',
success: function (data) {
UserLists.empty();
$.each(data, function (index, val) {
var Username = val.Username;
UserLists.append('
' + Username+'

)

});
}
});
});
$('#btnClear').click(function () {
UserLists.empty();
});
});
"button" id="btnUsers" value="GetUsersList"/>
"button" id="btnClear" value="Clear Users"/>
"Userlist"/>

My controller code is here

public class EmployeesController : ApiController
{
[HttpGet]
public IEnumerable Get()
{
using (LoginEntities ln = new LoginEntities())
{
return ln.Users.ToList();
}
}
[HttpGet]
public HttpResponseMessage Get(int id)
{
using (LoginEntities dd = new LoginEntities())
{
var entity = dd.Users.FirstOrDefault(e => e.UserId == id);
if (entity != null)
{
return Request.CreateResponse(HttpStatusCode.OK, entity);
}
else
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, "Employee Id " + id.ToString() + "Not found");
}
}
}

when i inspect the data is there but the UL is not binding and not showing the data on page there is no error on console Jquery is working fine i check it with alert.

12 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mario Scheeren7y ago
Accepted answer
I see the Problem: Your API sends XML and AJAX expects JSON.

Let the WebAction

return new JSON(userArrayObject) ;

Just out of couriosity: Why you try learning old stuff nobody uses anymore? This example is totally out of date. In nower days use DotNet.Core + Angular.
Mario Scheeren7y ago
Glad you found it ;)
Mark Tabor7y ago
Sorry brother really sorry i have that line in WebAPIconfig
//config.Formatters.Remove(config.Formatters.JsonFormatter);

removing this line and without converting result to json it works fine thank you
Mario Scheeren7y ago
You are using VS2017 with all updates, right?

You have a reference to NuGet "Newtonsoft.JSON" right?

You have all the required "using" - directives in the class code, right?
[HttpGet]
public Task Get()
{
  using (LoginEntities ln = new LoginEntities())
   {
     return JSON(ln.Users, JsonRequestBehavior.AllowGet);
   }
}
Mark Tabor7y ago
public JsonResult Get()

{

using (LoginEntities ln = new LoginEntities())

{

return Json(ln.Users.ToList(),JsonRequestBehavior.AllowGet);

//return ln.Users.ToList();

}

}

still
Mark Tabor7y ago
here it shows red lines
Mario Scheeren7y ago
Here you'll find an explanation how to send JSON:

https://www.c-sharpcorner.com/UploadFile/2ed7ae/jsonresult-type-in-mvc/
public JsonResult GetWhatEver()
{
    return Json(myOutputObject, JsonRequestBehavior.AllowGet);
}
But llike I said ... this is really oldschool ... you should learn new stuff C# 7.3, DotNetCore, Angular, Selfhosting - MVC is not state of the art anymore ...
Mark Tabor7y ago
I changed my method to like that

public HttpResponseMessage Get()

{

using (LoginEntities ln = new LoginEntities())

{

return Request.CreateResponse(HttpStatusCode.OK, ln.Users.ToList());

// return ln.Users.ToList();

}

}

My script is running the failure block but i do not know the exact failure error
"text/javascript">
$(document).ready(function () {
var UserLists = $('#Userlist');
$('#btnUsers').click(function () {
$.ajax({
type: 'GET',
data: "{}",
url: 'http://localhost:56085/api/employees/',
dataType: 'json',
success: function (data) {
UserLists.empty();
$.each(data, function (index, val) {
var Username = val.Username;
UserLists.append('
' + Username + '
')
});
},failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
$('#btnClear').click(function () {
UserLists.empty();
});
});
Mark Tabor7y ago
return new JSON(userArrayObject) ;
Even i change
public IEnumerable Get()
{
using (LoginEntities ln = new LoginEntities())
{

return Json(ln.Users.ToList());
}
}
it says No Json can take one paramters
Mark Tabor7y ago
Mario Scheeren Thanks for the response I am following this link
http://csharp-video-tutorials.blogspot.com/2016/09/call-aspnet-web-api-from-jquery.html

And even i change the li to console.log(username) still on console window there is nothing to display when i go to network tab click m button it shows the api with data as shown below
Mario Scheeren7y ago
Btw, I don't know if
Mario Scheeren7y ago
Just to be sure...

if you change "UserLists.append('
' + Username+'
')" to "console.Log(Username)"
and check the log, you get entries there (F12 to open console in browser)?