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.

Lets say i call http://localhost:60452/Events/1 my JavaScript (history.js) appends /info as default page http://localhost:60452/Events/1/info 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:

        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 }
        );
    }

Here are my links that load the partial views:

 <div id="menucontent" class="dropdown-content">
                        <div>
                            @Ajax.ActionLink("Info", "EventInfo", new {id = "_id_" },
                            new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pagecontent", OnSuccess = "changePage('', 'info');", OnBegin = "showloader", OnComplete = "hideloader"  },
                            new { @id = "eventinfo" })
                        </div>
                        <div>
                            @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" })
                        </div>
                        <div>
                            @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" })
                        </div>
                        <div>
                            @Ajax.ActionLink("Live", "Live", new { id = "_id_" },
                            new AjaxOptions { HttpMethod = "Get", UpdateTargetId = "pagecontent", OnSuccess = "changePage('Live', 'live');", OnBegin = "showloader", OnComplete = "hideloader" },
                            new { @id = "live" })
                        </div>
                    </div>

And my Controller:

 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);
    }
}

And my Javascript:

 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);
}

What am i doing wrong or whats missing in my Routing?

KR Manuel

share|improve this question
    
Try "{controller}/{id}"/{info}. new { controller = "Events", action = "Details", info = UrlParameter.Optional } – Martin Mazza Dawson Mar 22 at 14:33
    
hm, Events/1/info does not match your Events-route with {controller}/{id} pattern, what do you expect? – teran Mar 22 at 14:34
    
and provide your controller's method soruce with attribues – teran Mar 22 at 14:36
    
actually the right URL should look like this /Events/Details?id=1#info but i wanted to get rid of Details?id=1 therefore i created the Events Route. If i Change the route to {Controller}/{id}/{page} my links are not working anymore. – Manuel Bleimuth Mar 22 at 14:36
    
You should use RouteDebugger to debug routes. Also try [Route({info?}")] on your controller – Martin Mazza Dawson Mar 22 at 14:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.