About T4JS
Your JavaScript should be as beautiful as your code!

T4JS works with your MVC project to create "strongly typed," fully namespaced, and wonderfully beautified JavaScripts for your AJAX request paths. Stop building query strings manually... start using T4JS.

You Could Replace This

// This is ugly and hard to manage.
var url = "/home/index?id=" + 9 + "&email=me@site.com&key=" + 456;
$.get(url, function(){...});


With This

// "app" is a (customizable) JavaScript namespace object.
var url = app.endpoints.home.index.build([9, "me@site.com", 456]);
$.get(url, function(){...});


How it Works
T4JS works much like T4MVC by scouring your MVC project for areas, controllers, and action methods.  T4JS compiles a list of action methods that you specify as "AJAX Endpoint" and builds the actions into friendly JavaScript objects containing all the details needed to build AJAX requests.


Getting Started

  • Add T4JS to your ASP.NET MVC project.  Even better, install the NuGet package.
  • Decorate Action Methods you want to include with the supplied [AjaxEndpoint] attribute.
  • Run the T4JS template and add the generated JavaScript file to your views.
  • Use the generated JavaScript objects to build URLs, get request parameter names, get endpoint HTTP verbs, etc...


Building JavaScript URLs

The whole point of T4JS is to beautify your JavaScript.  You can build URLs in a few different ways.

Build a URL with no parameters

var url = app.endpoints.home.index.build();
// returns "/home/index"


Build a URL with a single parameter (assume the parameter is called "id" for this example)

var url = app.endpoints.home.index.build(9);
// or
var url = app.endpoints.home.index.build([9]);

// Both return "/home/index?id=9"


Build a URL with multiple parameters (assume parameters "id," "message," and "key" for this example).

// Adds query string parameters in the order they appear in the action method
var url = app.endpoints.home.index.build([9, "hello", 55]);

// returns "/home/index?id=9&message=hello&key=55"


Build a URL with custom parameters

app.endpoints.home.index.build({someValue: 5, otherValue: 8);
// returns "/home/index?someValue=5&otherValue=8"


Querying Endpoint Properties

The generated JavaScripts are good for more than just building query strings.

Look up the base URL without any parameters

app.endpoints.home.index.uri
// returns "/home/index"


Look up the HTTP verb for the request (GET or POST)

app.endpoints.home.index.method
// returns "GET"


Look up the action method parameters

app.endpoints.home.index.query
// returns an array of parameter names ["id", "name"]

 

Complex Types

Version 1.0 does not automatically generate parameter values for methods with complex type parameters.  To facilitate code generation, the AjaxEndpoint attribute has an overloaded constructor that supports any number of string values to be used as parameter names.

This C# code infers the Details GET method parameters, but requires parameter names for the POST method to properly map parameters to the View Model properties.

[AjaxEndpoint]
public ActionResult Details(int instanceId){
    //...
}

[AjaxEndpoint("id", "name")]
[HttpPost] public ActionResult Details(DetailsViewModel model){ //... } // public class DetailsViewModel{ public int Id { get; set; } public int Name{ get; set; } }

And the output JavaScript object looks like this

app.endpoints = {
    home: {
        "details_get": new app.endpoint.Url(
        "/home/index",
        "GET",
        ["instanceId"]),    

        
     "details_post": new app.endpoint.Url(
        "/big/create",
        "POST",
        ["id, key"])    
    }
};

 

Read the Full Documentation.

Last edited Apr 22, 2011 at 8:12 PM by tylerbrinks, version 12