ASP.NET MVC variables in JS (port of Rails Gon)
C# ASP
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
NGon.SampleApplication Fixed external js unit test Dec 27, 2012
NGon.Tests Fixed external js unit test Dec 27, 2012
NGon
NuGet
packages Added NuGet package. Changed to JSON.Net Sep 3, 2012
.gitignore First Commit Feb 15, 2012
NGon.sln First Commit Feb 15, 2012
README
README.md

README.md

NGon - Easily send your variables to JavaScript


This project is a port of the Ruby Gon gem found here: https://github.com/gazay/gon

Usage:

The first thing you need to do when using NGon, is to add the NGonActionFilterAttribute to the global action filters:

Global.asax.cs

    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();

        GlobalFilters.Filters.Add(new NGonActionFilterAttribute());

        RegisterGlobalFilters(GlobalFilters.Filters);
        RegisterRoutes(RouteTable.Routes);
    }

Then, in your controller, you can add any value to the dynamic NGon property of the ViewBag:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.NGon.SomeValue = 100;
        return View();
    }
}

In your HTML, you then add this (you'll likely want to put this in your layout/master page file):

@Html.IncludeNGon()

Finally, anywhere in your javascript, you now have access to that value:

<script type="text/javascript">
    $(function () {
        $("#button").click(function () {
            alert(ngon.SomeValue);
        });
    }); </script>

Additional:

This doesn't only work on simple types, it also works on any POCO object that can be serialized using the default JavascriptSerializer:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 };
        ViewBag.NGon.Person = person;
        return View();
    }
}

and in your javascript:

<script type="text/javascript">
    $(function () {
        $("#button").click(function () {
            var person = ngon.Person;
            var div = $("#output");
            div.html('');
            div.append("FirstName: " + person.FirstName);
            div.append(", LastName: " + person.LastName);
            div.append(", Age: " + person.Age);
        });
    });
</script>

Options:

When calling the Html.IncludeNGon method, there's an optional parameter for @namespace. What this does is that instead of referring to the variable in your javascript as `ngon.SomeValue', you can refer to it using whatever namespace prefix you like:

@Html.IncludeNGon("test")

and then in your javascript:

alert(test.SomeValue);