Deep linking in MVC App

by

Hi Friends,

This is the continuation of the last section where in we tried converting our app to Single Page App. But, there is one limitation to this as of now. If you see the below page.
65th

So, when i click on the link of Movies or Reviews, below mentioned urls with the following section will get produced.

66th

67th

so, what is happening here, only div is getting replaced in the <Ng-view> section, but it’s not making any server request. so, eventually when any request directly requested from the user as “http://localhost:63102/Common/MoviesReview” or “http://localhost:63102/Common/Movies“, it will result below error because there is no action called MoviesReview or Movies in the MVC controller Common.

68th

so, the problem is if someone try to bookmark this url, user will get 404 error. so, how to fix this issue. so, in order to fix the same, we need to catch all the routes within the Common section of our site. so, i’ll write a new definition for route to catch all the write.

69th

so, it says that if the incoming request starts with Common followed by anything even if there is multiple parameters inside the request, it will work, so it will load the Common controller and index action. so, let’s build the same and try now, so if i try now to navigate the url directly, it will work as expected. And if type “http://localhost:63102/Common/anything” url, it will still work, it will load the index page as shown below.

70th

However, i can tweak this behavior as well, let’s suppose if want to return 404 error when any garbage loads, then in that case i can go ahead and define specific routes for action based like one route for Movie and the other one Reviews, so what will happen, if any thing else will come in picture, then it will return a 404 error. so, This mechanism is called deep linking in MVC. so, this was the example of mini spa in a nutshell. In, the next section will start looking server side behavior with angular. We’ll see how Web Api is interaction is getting done with Angular. so, till then stay tuned and Happy Coding.

Thanks,
Rahul
Happy Coding

Thanks, Rahul Happy Coding