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.

Does it mean You want to host multiple Durandal SPAs in one MVC app ? Durandal usually has one entry point MVC controller and store views in App/views folder. Or You want to use server side render pages (*.cshtml) ? Please give some more info. — Krzysztof Cieslak, Jan 14 '14 at 12:00
You are correct. I tried to host multiple spa in single mvc application. The problem is when I tried to access application like localhost/sitename/Task. It excluded sitename and task from the url. is it possible to maintain these info always in the url.If i able to maintain those information,It would be fine — gopimanikandan, Jan 15 '14 at 05:33
may I ask You what is a reason behind such architecture? Why not use one Durandal app with child routers? — Krzysztof Cieslak, Jan 16 '14 at 12:49

Krzysztof Cieslak · Answer 1 · 2014-01-16T15:38:03.760

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" }

);

edited Jan 16 '14 at 15:38

answered Jan 16 '14 at 13:12

Krzysztof Cieslak

1,695
13
14

Thank you for your response.My goal would be based on url,have to choose SPA. I have developed the application on country basis. So if the user select localhost/gb, it will call the GB area. also my controller names are same in both the area. In the above case will work if the controller name is different. Please let me know how to use same controller name in both areas? – gopimanikandan Jan 16 '14 at 15:23
I have tried the above case, It works fine when only one route(either task or blog) is specified with {controller}/{action}/{id}. Because I have deployed the application like localhost/durandalapp and access each version by localhost/durandalapp/gb, the shell request throws 404. Since the request like localhost/durandalapp/home/shell. gb is missing in the url. we have specified the root like following app.setRoot('viewmodels/home/shell', 'entrance'); So the route map is not able to find the exact controller. – gopimanikandan Jan 16 '14 at 15:57
@gopimanikandan, Someone here is missing something ( not sure if it's me or You). I'm kinda sure that paths in Durandal are relative to the folder containing current Durandal main.js ( so for example to AppBlog). Why You have path 'viewmodels/home/shell' ? Are You sure its correct path ( do You have 'home' sub-folder in viewmodels folder? - it's not stated anywhere )? As for my code the accesing localhost/task would result in loading Durandal App from TaskApp and all paths in Durandal JS code would be relative to TaskApp folder. – Krzysztof Cieslak Jan 16 '14 at 19:02
yes, I have the sub folder inside the view models. The problem is mvc route not able to find the controller since gb is missing from the url. Is there any way to include gb in every route. – gopimanikandan Jan 19 '14 at 11:54

How to handle Durandal MVC routing?

1 Answers1