title: friendly url causes ajax to not get the correct url
body: <p>I converted the URL to user friendly, but the problem is, it caused my AJAX to not work properly: instead of returning JSON, it responds with <code>text/html; charset=utf-8</code>, any idea?</p>
  
  <p><em><strong>localhost/Home/Ticket?tab=0</em></strong></p>
  
  <p><strong>to</strong></p>
  
  <p><em><strong>localhost/Home/Ticket/0</em></strong></p>
  
  <p><strong>jquery Datatable</strong></p>
  
  <pre><code>self.$('#tblticket').dataTable({
      "bDestroy": true,
      "bServerSide": true,
      "sAjaxSource": '/Home/Ticket/AjaxHandler',
      "fnServerParams": function (aoData){
       aoData.push( { "name": "sStatus", "value": status } );
   },
  </code></pre>
  
  <p><strong>Routers</strong></p>
  
  <pre><code>routes.MapRoute(
     name: "TicketRoute",
     url: "Ticket/{tab}",
     defaults: new { controller = "Ticket", action = "Index", tab = UrlParameter.Optional }
  );
  </code></pre>
  
  <p><strong>Update 1</strong></p>
  
  <p>If I change the router to this, it works, but the url will look like
  <strong><em>localhost/Home/Ticket/Index/0</em></strong>. The router interferes with the ajax call, any idea? I want the url to look like this <strong><em>localhost/Home/Ticket/0</em></strong> and still be able to ajax call, I have no idea, what can be done?</p>
  
  <pre><code>        routes.MapRoute(
              name: "TicketRoute",
              url: "Ticket/Index/{tab}",
              defaults: new { controller = "Ticket", action = "Index", tab = UrlParameter.Optional }
          );
  </code></pre>