CODEWITHSUNDEEP
c#javascriptjqueryajaxasp.net-mvc
Kyle
Kyle

Reputation: 33749

Why does this AJAX call take so long?

This takes between 2-4 seconds normally, which seems like far too long for the work it is doing. Here is the AJAX:

$("#IngTable").html("<center><img src=../img/loading.gif /></center>");

    var search = document.getElementById("IngSearch").value;
    var apiLink = "/API/Ingredient/Search?search=" + search;
    $.ajaxSetup({ accepts: "application/json" });
    $.ajax({
        url: apiLink,
        type: "GET",
        success: function(data) {
            var ingredients = JSON.parse(data);
            var htmlIngred = "";
            for (var i = 0; i < ingredients.length; i++) {
                htmlIngred += "<tbody><td><span>" + ingredients[i].Name + "</span></td><td><a class='btn btn-success btn-mini' onclick='addIngred(" + ingredients[i].IngredientId + ");'>Add</a></td></tbody>";
            }
            document.getElementById("IngTable").innerHTML = htmlIngred;
        },
        error: function (a, b, c) { }
    });

And here is the Web API Controller:

    [HttpGet]
    public string IngredientSearch(string search)
    {
        var sw = Stopwatch.StartNew();
        var db = new Glubee.Model.GlubeeEntities();
        var results = db.Ingredients.Where(x => x.Name.Contains(search)).ToArray();
        sw.Stop();
        return JsonConvert.SerializeObject(results);
    }

There is only 16 things in the ingredients table, each being no more than 20 characters long.

Does anyone have any idea where the issue might be in this that makes it take so long?

Edit: Here is my Global.asax.cs page if it is helpful:

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }

And here is my RouteConfig:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

Upvotes: 2

Views: 3364

Answers (1)

Russ Clarke
Russ Clarke

Reputation: 17919

Have you identified exactly what's slow yet ?

For example; in your IngredientSearch method, if you change the code from

[HttpGet]
public string IngredientSearch(string search)
{
    var sw = Stopwatch.StartNew();
    var db = new Glubee.Model.GlubeeEntities();
    var results = db.Ingredients.Where(x => x.Name.Contains(search)).ToArray();
    sw.Stop();
    return JsonConvert.SerializeObject(results);
}

to 

[HttpGet]
public string IngredientSearch(string search)
{
    return String.Empty;
}

Does it still take a long time ?

If so; then we've got to look at a script library problem; if not - then it's your DB layer that's at fault.

Bugs like this are often a pain to track down, so you must forget assumptions and test things bit by bit. The above change eliminates a lot of problems, for very little effort gives you a big clue.

PS: Sorry, I know this isn't an answer as such; but I wanted to post it as one so that I could highlight the code change clearly; please don't down-vote!

Upvotes: 6

Related Questions