title: Calling WebApi from jQuery
body: <p>Just started with WebApi and have multiple problems. Read tons of info, but probably missing some concepts.</p>
  
  <p>In my controller:</p>
  
  <pre><code>    public IEnumerable&lt;Product&gt; GetProducts()
      {
          return db.Products.AsEnumerable();
      }
  
  
      public Product GetProduct(string name)
      {
          Product product = db.Products.FirstOrDefault(p =&gt; p.Name == name);
          if (product == null)
          {
              throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
          }
  
          return product;
      }
  </code></pre>
  
  <p>Javascript :</p>
  
  <pre><code> $('#Search').click(function () {
      jQuery.support.cors = true;
      var productName = $('#Name').val();
  
      $.ajax({
  
          url: "http://localhost:62178/api/product",
          //url: "http://localhost:62178/api/product/" + productName,
          type: "GET",
          success: function (data) {
              alertData(data);
          }
      });
  });
  </code></pre>
  
  <p>First of all, no matter if I pass a parameter productName, the parameterless GetProduct is called (and should return data back) . <strong>I need to be able to call both of these GET methods.</strong>
  Second, the success function is not called. so I don't get any data back from WebApi methods.</p>
  
  <p>Any tips or guidance is appreciated. Thanks.
  WebApiConfig.cs </p>
  
  <pre><code>public static class WebApiConfig
  {
      public static void Register(HttpConfiguration config)
      {
          config.Routes.MapHttpRoute(
              name: "DefaultApi",
              routeTemplate: "api/{controller}/{id}",
              defaults: new { id = RouteParameter.Optional }
          );
      }
  }
  </code></pre>
  
  <p>Only problem right now is that I don't get my data alerted :</p>
  
  <pre><code>$('#Search').click(function () {
      jQuery.support.cors = true;
      var productName = $('#Name').val();
  
      $.ajax({
  
          url: "http://localhost:62177/api/product/" + productName,
          //data: { name: productName },
          type: "GET",
          dataType: "jsonp",
          error: function (request, status, error) {
              alert(request.responseText);
          },
          success: function (data) {
              alert(data);
          }
      });
  });
  </code></pre>