MvcControllerToProxyGenerator

Creates JavaScript or TypeScript AJAX proxies for Angular 5.x, AngularJs 1.x or jQuery for .NET Controller or WebApi functions.

Download and install the NuGet package for "TypeScriptAngularJsProxyGenerator" into your WebProject.

Or install the NuGet package with the package manager console:

PM > Install-Package TypeScriptAngularJsProxyGenerator

Be carefull on updating the package, save your custom settings first, because updating this package will replace your settings for ProxyGenerator or use the web.config to store your Settings.

For questions or problems please open a GitHub Issue!

Improvements: Now you can also Load 64Bit DLLs with T4.

Now Supports HttpClient for Angular 5.x

---

Setup / Usage

The NuGet package installs a T4 Template Scripts\ProxyGeneratorScript.tt in your WebProject.

1. Configure the T4 template settings
2. Configure your controllers by adding the right CreateProxy attribute to each function (AJAX call)
3. Build the entire Solution, because the T4 Script looks up your compiled assemblies for the added attributes
4. Run the T4 Script with "Run Custom Tool"

For detailed infos, please read the complete Readme :-)

The NuGet Package "TypeScriptAngularJsProxyGenerator"

The package installs a T4 Template into your WebProject under the path

Scripts\ProxyGeneratorScript.tt

and adds a refrence to a installed DLL named

ProxyGenerator.dll

which is set in the T4 template as required reference.

In a earlier version of this NuGet package I've installed also the depended NuGet Package "Microsoft.VisualStudio.TextTemplating.14.0" but then you can't use the ProxyGenerator in .NET 4.0 projects. So I've removed this package, if you got some excecute problems, that dependency "Microsoft.VisualStudio.TextTemplating" was not found, you need to Install this package manual.

If you want to create TypeScript proxies then, you need to install manually the NuGet Package for TypeLite

(If you use TypeScript don't forget to install the TypeDefinitions for jQuery and/or AngularJs)

T4 Configruation Settings

When you have installed all NuGet Packages, you need to configure the T4 Template install location:

Scripts\ProxyGeneratorScript.tt

in the config section "SETTINGS for MANUAL adjustments", here you can find some settings you can/need to change, that the generator works right.

Here you NEED to set the name of your current WebPoject. Warning: If you have manually renamed the web directory where your website is located, then you need to insert the foldername here and NOT the WebprojectName.

settings.WebProjectName = "ProxyGeneratorDemoPage";

If you want to set the output directory for your created proxy files, then you set a path from the root of your WebProject. If you want to create the files directly below the T4 template set this setting to null or empty string.

settings.ProxyFileOutputPath = @"ScriptsApp\Services\";

If you want to create a TypeScript Proxy, don't forget to install TypeLite and you need to add to the TypeLite T4 template the following line:

.WithFormatter((type, f) => "I" + ((TypeLite.TsModels.TsClass)type).Name)

or if you use the original TypeLite Interface name without the "I" then, you need to remove the "I" from my T4 Template.

settings.TypeLiteInterfacePrefix = "";

Alternative: Store the proxysettings in the Web.config

You can also store the settings in the web.config, then its not possible that you overwrite your proxysettings, when you upgrade the ProxyGenerator via NuGet. You can only add the settings you need to your web.cofig, the remaining settings will be loaded from the T4 Template, the proxysettings in the web.config will overwrite the T4 proxysettings:

<appSettings>
   <!-- Proxy Generator Settings - START -->
   <add key="ProxyGenerator_WebProjectName" value="ProxyGeneratorDemoPage" />
   <add key="ProxyGenerator_ProxyFileOutputPath" value="ScriptsApp\Services\" />
   <add key="ProxyGenerator_LowerFirstCharInFunctionName" value="true" />
   <add key="ProxyGenerator_TypeLiteInterfacePrefix" value="I" />
   <add key="ProxyGenerator_ServicePrefixUrl" value="" />
   <!-- Tell the ProxyGenerator which suffix the generated controllername will have -->
   <add key="ProxyGenerator_TemplateSuffix_AngularJs" value="AngularJsSrv" />
   <add key="ProxyGenerator_TemplateSuffix_AngularTs" value="PService" />
   <add key="ProxyGenerator_TemplateSuffix_Angular2Ts" value=".service" />
   <add key="ProxyGenerator_TemplateSuffix_jQueryJs" value="jQueryJs" />
   <add key="ProxyGenerator_TemplateSuffix_jQueryTs" value="jQueryTs" />
   <!-- Set Different Output Pathes for each ScriptType. If no value is the or the keys are missing in the Web.config the default outputpath "ProxyGenerator_ProxyFileOutputPath" is used. The Outpath Settings can only be set in the web.config! -->
   <add key="ProxyGenerator_OutputPath_jQueryTsModule" value="ScriptsApp\ServicesJQuery\" />
   <add key="ProxyGenerator_OutputPath_jQueryJsModule" value="ScriptsApp\ServicesJQuery\" />
   <add key="ProxyGenerator_OutputPath_AngularJsModule" value="ScriptsApp\Services\" />
   <add key="ProxyGenerator_OutputPath_AngularTsModule" value="ScriptsApp\Services\" />
   <add key="ProxyGenerator_OutputPath_Angular2TsModule" value="ScriptsAppNg2\Services\" />
   <!-- Proxy Generator Settings - END -->
</appSettings>

"ServicePrefixUrl" in Detail

When you need to add a prefix Url before each Service Call then you need to use this Option and fill in e.g. "api" or "api/test". For the "api" example the T4 Proxy would create a service call with the "api" before the original address like

	 public loadTsCallByParams(name: string,vorname: string,alter: number) : Observable<ProxyGeneratorDemoPage.Models.Person.Models.IPerson> { 
			return this.http.get('api/Proxy/LoadData').map((response: Response)  => <ProxyGeneratorDemoPage.Models.Person.Models.IPerson>response.json() as ProxyGeneratorDemoPage.Models.Person.Models.IPerson);
	 } 

How to tell the T4 template to create a proxy

The T4 template only creates proxies for controller functions which are decorated with the right Attribute. For each controller, framework and language a new file with the ControllerName (Classname) + Suffix is created (you can change the Suffix in the T4 Template).

The ProxyGenerator DLL provides four different attributes.

| Attribute Name | Language | Framework | required Attribute Parameter | optional Parameter |----------------|----------|-----------|-----------------|---------| |CreateAngularJsProxyAttribute| JavaScript | AngularJs | -|CreateWindowLocationHrefLink |CreateAngularTsProxyAttribute| TypeScript | AngularJs | ReturnType|CreateWindowLocationHrefLink |CreateAngular2TsProxyAttribute| TypeScript | Angular 2 | ReturnType|CreateWindowLocationHrefLink |CreateJQueryJsProxyAttribute| JavaScript | jQuery | -|CreateWindowLocationHrefLink |CreateJQueryTsProxyAttribute| TypeScript | jQuery | ReturnType|CreateWindowLocationHrefLink

You can mix these attributes in any combination. It is possible to use all on the same controller function, then for this function five different proxies are create (one for each language and framework).

Attribute Parameter:

• ReturnType => is only used in TypeScript proxies and generates proxies with the right ReturnType of your .NET JSON Call in TypeScript (you also need TypeLite T4 Template)
• CreateWindowLocationHrefLink => The controller methods with this attribute parameter set to true only generates a "window.location.href" function in the proxy. It can be used to call download links like in the examples further down.

Before you can start the proxy creation, you need to rebuild your solution, because the T4 template looks up your compiled assemblies for the added proxy creation attributes.

When the rebuild was successfull, then start the proxy creation by right clicking on the T4 Template ProxyGeneratorScript.tt and choose Run Custom Tool.

(Hint: Take a look at the GitHub code, there you find a solution with the T4 template and also a website with examples for the attribute usage shown below)

Example: Angular 2 TypeScript Proxy - CreateAngular2TsProxyAttribute

Creates a proxy for Angular 2 in TypeScript.

The .NET controller functions are decorated with the attribute "CreateAngular2TsProxyAttribute" and you also need to add the "ReturnType" to the attribute params. The "ReturnType" is the .NET type of the Json which is returned by the Json Function.

using ProxyGenerator.ProxyTypeAttributes;

public class ProxyController : Controller
{  
    [CreateAngular2TsProxy(ReturnType = typeof(Person))]
    public JsonResult AddTsEntryOnly(Person person)
    {
        return Json(person, JsonRequestBehavior.AllowGet);
    }

    [CreateAngular2TsProxy(ReturnType = typeof(Auto))]
    public JsonResult AddTsEntryAndName(Person person, string name)
    {
        return Json(new Auto() { Marke = name }, JsonRequestBehavior.AllowGet);
    }

    [CreateAngular2TsProxy(ReturnType = typeof(Person))]
    public JsonResult LoadTsCallById(int id)
    {
        return Json(new Person() { Id = id }, JsonRequestBehavior.AllowGet);
    }

    [CreateAngular2TsProxy(ReturnType = typeof(Person))]
    public JsonResult LoadTsCallByParams(string name, string vorname, int alter)
    {
        return Json(new Person() { Name = name, Id = alter }, JsonRequestBehavior.AllowGet);
    }

    [CreateAngular2TsProxy(ReturnType = typeof(Auto))]
    public JsonResult LoadTsCal