ASP.NET MVC Chart events

ShieldChart provides a rich set of client-side events that developers can handle through JavaScript. When working with the ASP.NET MVC server helper, ShieldChart provides a convenient mechanism for hooking up JavaScript event handlers in your views. All JavaScript events are defined through the @Html.ShieldChart().Events() method. It accepts an action to which a fluent events builder is passed that is used to specify event handlers for all supported chart events through method chaining.

Register Client-Side Event Handler By Name

@(Html.ShieldChart()
    .Events(events => events
        .Load("onChartLoad")))

<script type="text/ecmascript">
    function onChartLoad(e) {
        alert("Chart ID: " + e.target.element.attr("id"));
    }
</script>

Register Client-Side Event Handler As A Function Expression

Every event method provided by the fluent builder in @Html.ShieldChart().Events() has two overloads - one that accepts a simple string and one that accepts a callback of type Func<dynamic, HelperResult>. The former is used for specifying names of javascript event handler functions, as well as for defining simple oneliner function expressions:

@(Html.ShieldChart()
    .Events(events => events
        .Load("function(e){alert('Chart ID: ' + e.target.element.attr('id'));}")))

The second method overload provides a powerful mechanism for specifying multi-line function expressions as string literals that are rendered in the response HTML. In Razor, function callbacks accepting an arbitrary object and returning a System.Web.WebPages.HelperResult instance are known as templated razor delegates. They allow code blocks to be interrupted by markup blocks and vice versa. Using templated callbacks, we can mix C# helper code with JavaScript snippets to quickly define an in-place, multi-line JavaScript event handler function in our chart:

@(Html.ShieldChart()
    .Events(events => events
        .Load(
        @<text>
            function (e) {
                alert("Chart ID: " + e.target.element.attr("id"));
            }
        </text>
        )))

Even though interspersing large chunks of JavaScript code in your MVC views may not be the most optimal approach in all scenarios, ShieldChart does not get in your way of coding if you wanted to do that. Inline JavaScript function expressions in your MVC helper are an ideal solution when you need a short piece of code to go with the rest of your widget options.