This project is read-only.

Weld supports NuGet! Install-Package Weld.

Project Description
Weld is a framework that makes integrating Asp.NET MVC and Typescript very easy. Just add a attribute to your controller action and Weld will create a TypeScript proxy for that action. Weld is about making your code DRY and bridging the gap between serverside C# and clientside Typescript. By using weld you reduce the chance of breaking clientside code unnoticed. Weld is not a scaffolding utility but integrates into your build. Your Weld classes will always be up-to-date and therefore you will notice when you break clientside code by changing the server side. The TypeScript compiler will help you!

Features

  • Generate clean and easy to read TypeScript
  • Easy to integrate in your build
  • Fully covered by test and TDD
  • Code templates use Razor!

Be sure to install TypeScript (tested with 0.8.3.1) before running the sample WebSite!
Weld currently only processes the web project assembly in which you install it.

AjaxMethods

Imagine a action in your HomeController:
 [HttpGet]
 public int Sum(int x,int y)
 {
     return x + y;
 }

To access this client side you would do something like this with jQuery
 var url = "/Home/Sum";
 var data = { x: 2 , y: 3};
 $.ajax({
     url: url,
     data: data,
     success: showResult
 });
With Weld you can do this:
HomeController.prototype.Sum(2, 3, showResult); 
And you get IntelliSense and type checking for free! Weld uses jQuery internally though.
sampleImage.png

All you have to do is add the Weld Attribute 'AjaxMethod' to your action method and Weld will generate the client-side TypeScript proxy code.
[HttpGet]
[AjaxMethod]
public int Sum(int x,int y)
{
    return x + y;
}

The generated code looks like this. Weld uses razor templates to generate the code so if you don't like jQuery or Typescript you can generate something else!

class HomeController
{
    Sum(x: number, y: number, callback: (data: number) => any)
    {
        var url = "/Home/Sum";
        var data = { x: x, y: y };
        $.ajax({
            url: url,
            data: data,
            success: callback,
        });
    }
}

ViewModels

Weld makes it easy to access input fields that have id based on a viewmodel. For example if you scaffolded a edit view based on that model. Decorating the class will cause weld to generate a TypeScript countpart.

[WeldViewModel]
public class PersonViewModel
{
    public string First { get; set; }
    public string Last { get; set; }
}

Results in
class PersonViewModel 
{
    static First: string = "First";
    static get $First() : JQuery {
        return $("#First");
    }
    static Last: string = "Last";
    static get $Last() : JQuery {
        return $("#Last");
    }
}
As you can see there are identifiers as well as JQuery shortcuts. So to get to the field containing the 'First 'value you just write PersonViewModel.$First()

Client URLs

In order to prevent having to 'hard code' Action urls in your TypeScript Weld can generate a string with the url based on the action. Just decorate the action for which you want to generate a URL

public class SampleController : Controller
{
     [ClientUrl]
     public ActionResult Edit(int ID)
     {
         return View();
     }
}
Generates TypeScript :
class SampleController
{
    public static UrlEdit: string = "/Sample/Edit/";
}
This way when you rename or remove the action your client side will break :)

Last edited Jun 14, 2013 at 5:24 PM by gluip, version 18