Skip to main content

Strong typed MVC routing on TypeScript/JavaScript

Very often we mess up with routing by giving path which does not exist due to various reason like spelling mistake, name confusions etc. for forming correct URLs . This happens on both server side codes and client side code. There are few strong typed routing provider library present for server side but none is present on the client side.

We will look into creating a classes and function to set up our routing paths which will help us to give correct URL based on MVC routing.
The idea is to create T4 template file which will be generating client side codes based on MVC routing.

I have tried to keep it simple in this version which reads up MVC controllers and public function.

The end result looks like this, which is TypeScript code. Makes it pretty simple to use these classes directly without worrying about correct URLs.

 module Routing {  
   export declare var DomainName: string;  
   export function GetDomainName(): string {  
     return (DomainName != undefined && DomainName.length) ?  
       (DomainName.lastIndexOf("/") == -1 ? DomainName + "/" : DomainName)  
       : "";  
   }  
   // Routing for Web.Controllers.TestController  
   export class TestRoute {  
         static TestConfiguration() : string  
     {  
       return GetDomainName() + "Test/" + "QuestionConfiguration";  
     }  
     static GetAnswerTypes() : string  
     {  
       return GetDomainName() + "Test/" + "GetAnswerTypes";  
     }  
     static GetCascadeValues() : string  
     {  
       return GetDomainName() + "Test/" + "GetCascadeValues";  
     }  
   }  
 }  

The DomainName variable can be initialized out of the class to get full path for URLs.
Ex:
 Routing.DomainName = '@MvcApplication.WebsiteDomainName';  

Let's look into T4 template, which generates above code.

 <#@ template debug="true" hostSpecific="true" #>  
 <#@ assembly name="System.Core" #>  
 <#@ Assembly Name="EnvDTE" #>  
 <#@ import namespace="EnvDTE" #>  
 <#@ import namespace="System.Linq" #>  
 <#@ import namespace="System.Text" #>  
 <#@ import namespace="System.Collections.Generic" #>  
 <#@ output extension=".ts" #>  
 module Routing {  
   export declare var DomainName: string;  
   export function GetDomainName(): string {  
     return (DomainName != undefined && DomainName.length) ?  
       (DomainName.lastIndexOf("/") == -1 ? DomainName + "/" : DomainName)  
       : "";  
   }  
 <#  
   // TODO: Give any controllers which need to be avoided.  
   var avoidClassNames = new List<string>{"BaseController"};  
   // TODO: Function names to avoid in code generation.  
   var avoidFunctionNames = new List<string>();  
   var env = (DTE)((IServiceProvider)this.Host)  
     .GetService(typeof(EnvDTE.DTE));  
   var project = env.ActiveDocument.ProjectItem.ContainingProject;  
   foreach(CodeClass clas in   
     GetAllCodeElementsOfType(project.CodeModel.CodeElements,EnvDTE.vsCMElement.vsCMElementClass,false)  
     .OfType<CodeClass>()  
     .Where(cc => cc.IsDerivedFrom["System.Web.Mvc.Controller"] &&  
         !avoidClassNames.Contains(cc.Name)  
       )  
     )  
   {  
     var clasName = clas.Name.Substring(0, clas.Name.Length-10);  
     #>  
   // Routing for <#= clas.FullName #>  
   export class <#=      clasName #>Route {  
     <#  
     var allFunctions = GetAllCodeElementsOfType(clas.Members, EnvDTE.vsCMElement.vsCMElementFunction, false);  
         foreach(var funcName in allFunctions.OfType<CodeFunction>()  
             .Where(fun => fun.Access == EnvDTE.vsCMAccess.vsCMAccessPublic &&   
               fun.Name != clas.Name &&  
               !avoidFunctionNames.Contains(fun.Name)  
             )          
             .Select(fun=>fun.Name).Distinct()  
           )          
     {  
 #>  
     static <#=funcName #>() : string  
     {  
       return GetDomainName() + "<#=clasName #>/" + "<#=funcName #>";  
     }  
 <#  
     }  
     #>  
   }  
 <#  
   }  
     #>  
 }  
 <#+  
   // https://github.com/PombeirP/T4Factories/blob/master/T4Factories.Testbed/CodeTemplates/VisualStudioAutomationHelper.ttinclude  
   // This function is from Tangible T4. All credit goes to them  
   public List<EnvDTE.CodeElement> GetAllCodeElementsOfType(EnvDTE.CodeElements elements, EnvDTE.vsCMElement elementType, bool includeExternalTypes)  
   {  
     var ret = new List<EnvDTE.CodeElement>();  
     foreach (EnvDTE.CodeElement elem in elements)  
     {  
       // iterate all namespaces (even if they are external)  
       // > they might contain project code  
       if (elem.Kind == EnvDTE.vsCMElement.vsCMElementNamespace)  
       {  
         ret.AddRange(GetAllCodeElementsOfType(((EnvDTE.CodeNamespace)elem).Members, elementType, includeExternalTypes));  
       }  
         // if its not a namespace but external  
         // > ignore it  
       else if (elem.InfoLocation == EnvDTE.vsCMInfoLocation.vsCMInfoLocationExternal  
         && !includeExternalTypes)  
         continue;  
         // if its from the project  
         // > check its members  
       else if (elem.IsCodeType)  
       {  
         ret.AddRange(GetAllCodeElementsOfType(((EnvDTE.CodeType)elem).Members, elementType, includeExternalTypes));  
       }  
       // if this item is of the desired type  
       // > store it  
       if (elem.Kind == elementType)  
         ret.Add(elem);  
     }  
     return ret;  
   }  
  #>  

Mark that avoidClassNames and avoidFunctionNames is used to avoid classes and function which we want to avoid in generation of codes. In my case, class named with BaseController.

There are few things which are not supported in this version:
1. Attribute routing of MVC.
2. WebApi routing.

Note: GetAllCodeElementsOfType is taken from https://github.com/PombeirP/T4Factories/blob/master/T4Factories.Testbed/CodeTemplates/VisualStudioAutomationHelper.ttinclude 
.


Popular posts from this blog

Architecture solution composting Repository Pattern, Unit Of Work, Dependency Injection, Factory Pattern and others

Project architecture is like garden, we plant the things in certain order and eventually they grow in similar manner. If things are planted well then they will all look(work) great and easier to manage. If they grow as cumbersome it would difficult to maintain and with time more problems would be happening in maintenance.

There is no any fixed or known approach to decide project architecture and specially with Agile Methodology. In Agile Methodology, we cannot predict how our end products will look like similarly we cannot say a certain architecture will fit well for entire development lifespan for project. So, the best thing is to modify the architecture as per our application growth. I understand that it sounds good but will be far more problematic with actual development. If it is left as it is then more problems will arise with time. Just think about moving plant vs a full grown tree.

Coming to technical side, In this article, I will be explaining about the various techniques tha…

LDAP with ASPNet Core Identity in MVC Core

Lightweight Directory Access Protocol (LDAP), the name itself explain it. An application protocol used over an IP network to access the distributed directory information service.

AspNet Identity Core is a new offering from Microsoft in replacement of AspNet Identity for managing users.

In this tutorial, we would be looking for implementing LDAP with AspNet Identity Core to allow users to be able to log in through AD or AspNet Identity Core members.

The first and foremost thing is to add references for consuming LDAP. This has to be done by adding reference from Global Assembly Cache (GAC) into project.json

"frameworks": { "net461": { "frameworkAssemblies": { "System.DirectoryServices": "4.0.0.0", "System.DirectoryServices.AccountManagement": "4.0.0.0" } } },
These System.DirectoryServices and System.DirectoryServices.AccountManagement references are used to consume LDAP functiona…

Configuring Ninject, Asp.Net Identity UserManager, DataProtectorTokenProvider with Owin

It can be bit tricky to configure both Ninject and Asp.Net Identity UserManager if some value is expected from DI to configure UserManager. We will look into configuring both and also use OwinContext to get UserManager.

As usual, all configuration need to be done on Startup.cs. It is just a convention but can be used with different name, the important thing is to decorate class with following attribute to make it Owin start-up:

[assembly: OwinStartup(typeof(MyProject.Web.Startup))]
Ninject configuration

Configuring Ninject kernel through method which would be used to register under Owin.

Startup.cs
public IKernel CreateKernel() { var kernel = new StandardKernel(); try { //kernel.Bind<IHttpModule>().To<HttpApplicationInitializationHttpModule>(); // TODO: Put any other injection which are required. return kernel; } catch { kernel.Dispose(); throw; }…