How to handle Durandal MVC routing?

Question

I have introduced mvc area concept with the durandal

My hierarchy would be

Area.Web
    Areas
        Blog
           Controller
                 SocialController
                   Social
           View
        Task
           Controller
           View
    Scripts
        App
          Blog
            ViewModels

I have route to the area based on my url. For example, localhost/blog

My route woule be:

routes.MapRoute(
name: "blog",
url: "blog/{action}/{id}",
defaults: new { controller = "blog", action = "Index", id = UrlParameter.Optional },
                        namespaces: new string[] { "Area.Web.Blog.Controllers" }
                    );

routes.MapRoute(
    name: "Task",
    url: "Task/{action}/{id}",
defaults: new { controller = "task", action = "Index", id = UrlParameter.Optional},
    namespaces: new string[] { "Area.Web.Task.Controllers" }
);

When I try to navigate to localhost/blog, it call the correct controller and render the correctly. when the durandal route happen blog is excluded.So that my route url not able to fetch the controller.

 app.setRoot('viewmodels/social/home', 'entrance');

The following route throws 404 exception, since it ignored the blog in the route url (localhost/social/home)

Please let me know, how to resolve this issue. Is it possible to include area name in all the route and app.set.

Answer 1

Firstly IMHO You should reconsider Your project architecture. For example, if you need to optimize this app with Weyland, both SPAs will end up in the same file what does not gives You required separation.

However, instead of having them both under the app folder, you can make separate folders, and give each SPA it's own main.js file.

In such case You would have following project structure:

Area.Web
    AppBlog
        Services
        Views
        ViewModels
        main.js
    AppTask
        Services
        Views
        ViewModels
        main.js 
    Areas
        Blog
           Controller
           View
        Task
           Controller
           View
    Scripts
       durandal
       etc.
    Content
    etc.

Your View in Blog Area would use follwoing JS import:

<script src="~/Scripts/require.js" data-main="@Url.Content("~/AppBlog/main")"></script>

while Task Area would use

<script src="~/Scripts/require.js" data-main="@Url.Content("~/AppBlog/main")"></script>

In such setup Your routes would look similar to exactly the same as in Your code

EDIT

routes.MapRoute(
name: "blog",
url: "blog/{action}/{id}",
defaults: new { controller = "home", action = "Index", id = UrlParameter.Optional },
                        namespaces: new string[] { "Area.Web.Blog.Controllers" }
                    );

routes.MapRoute(
    name: "Task",
    url: "Task/{action}/{id}",
defaults: new { controller = "home", action = "Index", id = UrlParameter.Optional},
    namespaces: new string[] { "Area.Web.Task.Controllers" }

);