I have created list of REST Web Services using MVC Web API 2.0, Entity Framework 6.0.
My problem is if i am making call to show list of images using jQuery then my request will automatically canceled see below image
and it will not showing any result at client side, but my server side code will return the correct result set. see below screen of my server side code:
I am using following code: Model
public partial class MAItem
{
public MAItem()
{
this.MACartItems = new HashSet<MACartItem>();
this.MAItemImages = new HashSet<MAItemImage>();
this.MAOrderDetails = new HashSet<MAOrderDetail>();
}
public int ItemId { get; set; }
public int CategoryId { get; set; }
public string ItemName { get; set; }
public string Code { get; set; }
public string Brand { get; set; }
public decimal Price { get; set; }
public Nullable<decimal> Discount { get; set; }
public Nullable<decimal> Points { get; set; }
public string Description { get; set; }
public int StoreId { get; set; }
public virtual ICollection<MACartItem> MACartItems { get; set; }
public virtual MACategory MACategory { get; set; }
public virtual MAStore MAStore { get; set; }
public virtual ICollection<MAItemImage> MAItemImages { get; set; }
public virtual ICollection<MAOrderDetail> MAOrderDetails { get; set; }
}
public partial class MACategory
{
public MACategory()
{
this.MAItems = new HashSet<MAItem>();
}
public int CategoryId { get; set; }
public string CategoryName { get; set; }
public virtual ICollection<MAItem> MAItems { get; set; }
}
public partial class MAStore
{
public MAStore()
{
this.MAItems = new HashSet<MAItem>();
this.MAMembershipCards = new HashSet<MAMembershipCard>();
this.MAOrders = new HashSet<MAOrder>();
}
public int StoreId { get; set; }
public string StoreName { get; set; }
public Nullable<double> Latitude { get; set; }
public Nullable<double> Longitude { get; set; }
public string Address { get; set; }
public string Phone { get; set; }
public virtual ICollection<MAItem> MAItems { get; set; }
public virtual ICollection<MAMembershipCard> MAMembershipCards { get; set; }
public virtual ICollection<MAOrder> MAOrders { get; set; }
}
public partial class MAItemImage
{
public int ItemImageId { get; set; }
public int ItemId { get; set; }
public string ImagePath { get; set; }
public string AlternateText { get; set; }
public virtual MAItem MAItem { get; set; }
}
Controller - MAItemController.cs
[HttpGet]
[Route("items")]
public IQueryable<MAItem> GetItems()
{
try
{
return _service.GetMAItems().AsQueryable<MAItem>();
}
catch (Exception e)
{
Console.WriteLine(e);
}
return null;
}
Services - MAItemService.cs
public List<MAItem> GetMAItems()
{
string[] Includes = new[] { "MAStore", "MACategory", "MAItemImages" };
List<MAItem> items = new List<MAItem>();
items = _repository.GetAll(Includes).ToList();
return items;
}
Java Script Code
function getAllItem() {
var req = Object.create(ajax);
req.parameters = { url: API + '/api/mobileapp/items' };
req.callback.success = successGetAllItem;
req.get();
}
function successGetAllItem(data) {
$(".loading").hide();
$.each(data, function (idx, d) {
alert(d);
});
}
var ajax = {
parameters: {
url: '',
dataType: 'json',
data: {},
contentType: 'application/json',
loading: false,
crossDomain: true,
async: true,
processData: true,
timeout: 60000,
otherData: {}
},
callback: {
success: null,
error: null
},
get: function () {
this.send('GET');
},
post: function () {
this.send('POST');
},
del: function () {
this.send('DELETE');
},
send: function (type) {
self = this;
if (!navigator.userAgent.match(/iPad|iPhone|iPod|android|blackberry|IEMobile/i)) {
this.loadingIcon.show();
if (this.isUndefined(this.parameters.dataType)) this.parameters.dataType = 'json';
if (this.isUndefined(this.parameters.contentType)) this.parameters.contentType = 'application/json';
if (this.isUndefined(this.parameters.loading)) this.parameters.loading = false;
if (this.isUndefined(this.parameters.crossDomain)) this.parameters.crossDomain = true;
if (this.isUndefined(this.parameters.async)) this.parameters.async = true;
if (this.isUndefined(this.parameters.processData)) this.parameters.processData = true;
if (this.isUndefined(this.parameters.timeout)) this.parameters.timeout = 30000;
if (this.isUndefined(this.callback.error)) this.callback.error = this.defaultError;
return $.ajax({
type: type,
url: this.parameters.url,
dataType: this.parameters.dataType,
data: (this.parameters.processData) ? JSON.stringify(this.parameters.data) : this.parameters.data,
processData: this.parameters.processData,
contentType: this.parameters.contentType,
crossDomain: this.parameters.crossDomain,
async: this.parameters.async,
timeout: this.parameters.timeout,
success: function (data) {
var args = arguments[2];
if (!self.isUndefined(self.callback.success)) {
if (self.isUndefined(self.parameters.otherData))
self.callback.success.call(this, data, args.statusText, args);
else
self.callback.success.call(this, data, args.statusText, args, self.parameters.otherData);
}
self.loadingIcon.hide();
},
error: function (xhr, ajaxOptions, thrownError) {
xhrServerObj = xhr;
self.callback.error.call(xhr, ajaxOptions, thrownError);
self.loadingIcon.hide();
}
});
}
},
isUndefined: function (param) {
return (typeof param == 'undefined' || param == null);
},
defaultError: function (data, textStatus, jqXHR) {
},
loadingIcon: {
show: function () {
if (self.parameters.loading) {
console.log('Show loading....');
}
},
hide: function () {
if (self.parameters.loading) {
console.log('Hide loading....');
}
}
}
}
Please Note: I am able to get the responses from the different methods like /category
, /stores
, /users
but the only issue is with /items
. This problem also persist in Firefox browser as well.
Can anybody let me know the root cause of the issue.