Skip to content
ASP.NET MVC variables in JS (port of Rails Gon)
C# ASP
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
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 Added cahce busting query string param to dynamic js file request Dec 27, 2012
NuGet Added lib folder to NuGet Sep 3, 2012
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 First commit Feb 15, 2012
README.md Updated README Feb 15, 2012

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);
You can’t perform that action at this time.