jsroutecontroller's Introduction

Overview

A very simple plugin to generate routes dynamically for client side script (javascript) calls in ASP.NET MVC.

It scans all existing controllers in the executing assembly looking for actions that match the specified sufix and generates a javascript file to be included by calling client script.

To get started

Step 1. Nuget - Add Controller

PM> Install-Package JSRouteController

Step 1. Add controller manually

Simply drop the JSRouteController.cs into you Controllers folder in your ASP.NET MVC project.

Step 2. Global.asax

public static void RegisterRoutes(RouteCollection routes)
{	
	routes.MapRoute(
		"JavascriptRoutes", //Route name
		"Scripts/Routes.js", //The desired URL to access the generated routes
		new { 
			controller = "JSRoute", 
			action = "GetAll", 
			@namespace = "MyAppRoutes", //Desired namespace to hold the routes
			sufix = "JSON"  //Sufix used to identify actions that should be included in the output script
		}
	);
	
	/* Other mapped routes */
}

Step 3. Script Tag

Now you can include it in your view as you would with any other javascript library

<script src="@Url.Content("~/Scripts/Routes.js")" type="text/javascript"></script>

Step 4. Javascript code

From the client side script, just use javascript variable that holds the route address

MyAppRoutes.SomeController.SomeAction() //returns /SomeController/SomeAction

If the action responds to a GET verb and has parameters you can also pass them when using the route

MyAppRoutes.SomeController.ActionWithParameter(pmt1value, pmt2value) //returns /SomeController/ActionWithParameter?pmt1=pmt1value&pmt2value

All other actions with parameters, but without the HttpGet attribute have the parameters ommited in the resulting javascript

How it works

Conventions

From this on all actions ending with "JSON" will be parsed and added to the output javascript

public ActionResult MyActionJSON() { /* some code */ }

The generated Javascript file will look like the following sample :

MyAppRoutes = {
				Controller1: {
					Action1: function() { return '/Controller1/Action1'; }
				},
				Controller2: {
					Action1: function() { return '/Controller2/Action1'; },
					Action2WithPmts: function(pmt1) { return '/Controller2/Action2WithPmts' + '?pmt1=' + pmt1; }
				}
			}

Disclaimer

Tested with ASP.NET MVC 3 only
Currently it does not add any kind of caching (which is a smart thing to do) besides the one IIS already uses with JS files (which is client side using expiration headers)

jsroutecontroller's People

Contributors

Stargazers

Watchers

jsroutecontroller's Issues

Variables getting messed up

I've set the namespace to be : RecebimentoRoutes

I have a controller called : DetalheValidacaoController

This is my controller action :

public ActionResult GridJSON(Guid identificadorProcessamento, int skip, int take)

And this is the result in Javascript :

RecebimentoRoutes = {DetalheValidacao: {Grid: function(identificadorProcessamento,skip,take) { return '/DetalheValidacao/GridJSON'+'?identificadorProcessamento=' + identificadorProcessamentoskip=' + skiptake=' + take; }},EstabelecimentoFiscal: {GridEstabelecimentosFiscais: function() { return '/EstabelecimentoFiscal/GridEstabelecimentosFiscaisJSON'; }}};

As you can see, the variables identificadorProcessamento and skip didn't get properly separated and the same happened for skip and take.

Thanks,

Alvaro Oliveira.

Kendo and possibly others Compatibility

The way this library works, the javascript generated function will always concatenate the action arguments to the URL.

But when using libraries like Kendo, the library already takes care of building the arguments for me, therefore I should be able to get only the url without any parameters.

Today it returns :

function Grid (identificadorProcessamento,skip,take) {
return '/DetalheValidacao/GridJSON'+'?identificadorProcessamento=' + identificadorProcessamentoskip=' + skiptake=' + take; }

It could probably return something like :

function Grid(identificadorProcessamento,skip,take) {
var url = '/DetalheValidacao/GridJSON';
if(identificadorProcessamento != undefined)
{
url.indexOf('?') == -1 ? url += '?' : url += '&';
url += 'identificadorProcessamento=' + identificadorProcessamento;
}

if(skip != undefined)
{
    url.indexOf('?') == -1 ? url += '?': url += '&';
    url += 'skip=' + skip;
}

if(take != undefined)
{
    url.indexOf('?') == -1 ? url += '?': url += '&';
    url += 'take=' + take;
}

return url;

};

That would allow it to be more flexible.

Thanks.