Introduction:
In modern web development every application targeting all devices, like desktop, mobile, and tablet, etc. For that, everyone follows the most common approaches like:
1. Design a Single page with responsiveness for all devices.
2. Maintaining multiple domains for devices like for desktop (https://example.com) and for mobile devices (https://m.example.com)
Existing Approach Problems:
In the first approach, a single page with responsiveness for all devices needs to write a lot of CSS and HTML code. This may result in affecting page load time with heavy CSS leads problems like CSS Render Blocking.
In the second approach, with multiple domains targets different pages for each domain like for desktop requests one page and mobile request another page gets loaded. With this approach, there is no unnecessary loading of CSS and Html gets loaded. But the problem in this approach needs to maintain different domains.
Solution (Asp.net Route Constraint):2. Maintaining multiple domains for devices like for desktop (https://example.com) and for mobile devices (https://m.example.com)
Existing Approach Problems:
In the first approach, a single page with responsiveness for all devices needs to write a lot of CSS and HTML code. This may result in affecting page load time with heavy CSS leads problems like CSS Render Blocking.
In the second approach, with multiple domains targets different pages for each domain like for desktop requests one page and mobile request another page gets loaded. With this approach, there is no unnecessary loading of CSS and Html gets loaded. But the problem in this approach needs to maintain different domains.
Asp.net Route Constraint provides a way to load different pages load conditionally for single Url.
To achieve it follow as below:
Step 1:
In Global.asax.cs file add code below.
1 2 3 4 5 6 7 | protected void Application_Start() { AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } |
Now add 2 routes mobile and desktop as below in App_Start folder.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | using MultiPageRouting.MvcSample.App_Start; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace MultiPageRouting.MvcSample { public class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); //routes.MapRoute( // name: "Default", // url: "{controller}/{action}/{id}", // defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } //); routes.MapRoute( name: "DesktopRoute", url: "{controller}/{action}/{id}", defaults: new { controller = "DesktopHome", action = "Index", id = UrlParameter.Optional }, constraints: new { IsDesktop = new CustomRouteDeskTopConstraint() } ); routes.MapRoute( name: "MobileRoute", url: "{controller}/{action}/{id}", defaults: new { controller = "MobileHome", action = "Index", id = UrlParameter.Optional }, constraints: new { IsMobile = new CustomRouteMobileConstraint() } ); } } } |
CustomRouteDeskTopConstriant and CutomRouteMobileConstraint are implemented IRoutingConstraint which helps to load pages conditionally.
Step 3: Now create desktop route constraint in App_Start folder, name file as CustomRouteDeskTopConstraint and add below code.
1 2 3 4 5 6 7 | public class CustomRouteDeskTopConstraint : IRouteConstraint { public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection) { return !httpContext.Request.Browser.IsMobileDevice; } } |
Now create mobile route constraint in App_Start folder, name file as CustomRouteMobileConstraint and add below code.
1 2 3 4 5 6 7 | public class CustomRouteMobileConstraint : IRouteConstraint { public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection) { return httpContext.Request.Browser.IsMobileDevice; } } |
By inheriting IRouteConstraint, the need implements the "Match" method whose value of boolean return type. If the method returns true corresponding route will be executed, the false route will be skipped and match with another route.
Step 5:
Now run the asp.net application from the visual studio by clicking ctrl+f5. Now application opens, using chrome browser developers tools we can change device type and request the applciation. we can observer with single domain different pages get rendered by device request
above image show desktop output.
the above image shows mobile output
Benefits Of Asp.Net Route Constraint:
The page will lightweight get loads fast.No need to maintain multiple domains.
Source code click Git
Comments
Post a Comment