Integration in MVC3/MVC4

1. Step: Add IJavaScriptModelAware to controller(-base)

JavaScriptModel uses extension methods for adding further methods to the controller.
To use these methods you just have to implement the interface IJavaScriptModelAware on the controller you want to use them on.
If you want to use the JavaScriptModel features in all controllers and you have a base controller class implement the interface IJavaScriptModelAware directly on the base class.

The following example shows a simple controller implementation:
    public class ExampleController : Controller, IJavaScriptModelAware
    {
        …
    }

2. Step: Add JavaScriptModel-Snippets to MasterLayout

Add the JavaScriptModel-javascript to your website. You can use Scriptbundling and custom script loaders.
After that you have to create a script-tag which calls the extension methods this.RenderJavaScriptModelInit for the init-event and this.RenderJavaScriptModelInitReady for the ready-event. this.RenderJavaScriptModelInitReady should be called using a framework like jQuery ($(document).ready) or Prototype (document.observe("dom:loaded"))

Here as simple example as script tag in the head-tag with the help of jQuery:

    <head>
    …
    @Scripts.Render("~/Scripts/JSM.min.js")
    …
        <script type="text/javascript">
            @this.RenderJavaScriptModelInit()
            $(document).ready(function() {
                @this.RenderJavaScriptModelInitReady()
            });
        </script></head>

Furthermore add the snippet for the container containing the embedded json (this.RenderJavaScriptModelContainer) at the end of the body tag:

    <body>
        …
        …
        …
        @this.RenderJavaScriptModelContainer()
    </body>
</html>

Now you can use JavaScriptModel in MVC3/MVC4.
Check out the MVC4 example in our repository.

Last edited Jan 7, 2013 at 11:57 AM by acuntex, version 5

Comments

No comments yet.