title: Asp.Net MVC Ajax Url Routing
body: <p>i am developing an ASP.NET MVC SPA Project, where i am loading different pages (partialview) using Ajax.
  Everything works fine, except the fact that i cant call an URL including my ajaxpage as Parameter.</p>
  
  <p>Lets say i call <a href="http://localhost:60452/Events/1" rel="nofollow">http://localhost:60452/Events/1</a> my JavaScript (history.js) appends /info as default page <a href="http://localhost:60452/Events/1/info" rel="nofollow">http://localhost:60452/Events/1/info</a> which is totally right. But when i enter the URL the same way in the browser field i get an resource not found error.
  My Routing May Looks like that:</p>
  
  <pre><code>        public static void RegisterRoutes(RouteCollection routes)
      {
          routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
          routes.MapRoute(
              name: "Events",
              url: "{controller}/{id}",
              defaults: new { controller = "Events", action = "Details" }
          );
  
          routes.MapRoute(
              name: "Default",
              url: "{controller}/{action}/{id}",
              defaults: new { controller = "Events", action = "Index", id = UrlParameter.Optional }
          );
      }
  </code></pre>
  
  <p>Here are my links that load the partial views:</p>
  
  <pre><code> &lt;div id="menucontent" class="dropdown-content"&gt;
                          &lt;div&gt;
                              @Ajax.ActionLink("Info", "EventInfo", new {id = "_id_" },
                              new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pagecontent", OnSuccess = "changePage('', 'info');", OnBegin = "showloader", OnComplete = "hideloader"  },
                              new { @id = "eventinfo" })
                          &lt;/div&gt;
                          &lt;div&gt;
                              @Ajax.ActionLink("Start Lists", "Startlists", new { id = "_id_" },
                              new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pagecontent", OnSuccess = "changePage('Start Lists', 'startlists');", OnBegin = "showloader", OnComplete = "hideloader" },
                              new { @id = "startlists" })
                          &lt;/div&gt;
                          &lt;div&gt;
                              @Ajax.ActionLink("Result Lists", "Resultlists", new { id = "_id_" },
                              new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pagecontent", OnSuccess = "changePage('Result Lists', 'resultlists');", OnBegin = "showloader", OnComplete = "hideloader" },
                              new { @id = "resultlists" })
                          &lt;/div&gt;
                          &lt;div&gt;
                              @Ajax.ActionLink("Live", "Live", new { id = "_id_" },
                              new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pagecontent", OnSuccess = "changePage('Live', 'live');", OnBegin = "showloader", OnComplete = "hideloader" },
                              new { @id = "live" })
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>And my Controller:</p>
  
  <pre><code> public class EventsController : Controller
  {
      private LiveContext db = new LiveContext();
  
      public ActionResult Index()
      {
          ViewResult vr = View(db.dbsEvents.ToList());
          return vr;
      }
  
      public ActionResult Details(int id)
      {
          Event ev = db.dbsEvents.Find(id);
          ViewResult vr = View(ev);
          return vr;
      }
  
      public ActionResult Startlists(int id)
      {
          Event ev = db.dbsEvents.Find(id);
          return PartialView("_Startlists", ev);
      }
  
      public ActionResult Resultlists(int id)
      {
          Event ev = db.dbsEvents.Find(id);
          return PartialView("_Resultlists", ev);
      }
  
      public ActionResult Live(int id)
      {
          Event ev = db.dbsEvents.Find(id);
          return PartialView("_Live", ev);
      }
  
      public ActionResult EventInfo(int id)
      {
          Event ev = db.dbsEvents.Find(id);
          return PartialView("_EventInfo", ev);
      }
  
      protected override void Dispose(bool disposing)
      {
          if (disposing)
              db.Dispose();
          base.Dispose(disposing);
      }
  }
  </code></pre>
  
  <p>And my Javascript:</p>
  
  <pre><code> var History = window.History;
  if (!History.enabled) {
      alert("disabled");
  }
  History.Adapter.bind(window, 'statechange', function () { // Note: We are using statechange instead of popstate
      var State = History.getState();
  });
  
  changePage = function (title, url) {
      $('#title').text(title);
      History.pushState({ page: url }, title, "/Events/" + $.currentevent.Id + "/" + url);
  }
  </code></pre>
  
  <p>What am i doing wrong or whats missing in my Routing?</p>
  
  <p>KR Manuel</p>