Creating MVC helper for javascript / jquery

Question

For a new project, I'm using a javascript / jquery suite to display charts ( http://www.highcharts.com). The javascript code for each page is roughly the same, so I wanted to centralize it and make something reusable. I'm using ASP.NET MVC for this application so I was looking to creating a servercontrol with some settings which would output the javascript / jQuery code in an organized way. But I'm not sure on how to do this in a neat way. Of course I could just go off and build a long string and render that to the page, but that seems rather ugly.

So I'm basically looking for best pratices on how to convert a piece of javascript into a managable servercontrol. I also want to include things like automatic databinding to JSON webservices.

Update; I've created a model which I want to use for the charting. It contains things like axis labels, chart title and stuff like that.

Now in my page, I have the jQuery code which contains things like this:

title: { text: '<%: Model.Title %>' },

to set the various chart properties. But I understand that this is not good practice, I'm just not sure on what is. In the above example, I want to do things like add the title property when it's set in my model but completely omit it when it's not (which is not happening now). I can get there by adding a lot of if/else stuff, but that's not going to make things prettier. Therefore I'm wondering out loud wether the constructing of the jquery code isn't something that should be done in a class instead.

Marquez · Accepted Answer · 2011-10-27 19:06:44Z

1

I would recommend placing the javascript in a .js file and simply reference it with a script tag from the MVC master view, page view or user control view were you need it. There are a couple of advantages in placing javascript in a separate file and it is considered a good practice. Caching of the javascript content in the browser will enhance performance and reduce the use of bandwidth – and it will be easier to debug the javascript with firebug or any other javascript debugger.

answered Oct 27, 2011 at 19:06

Marquez

6,0465 gold badges36 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jasper Over a year ago

Ok, sounds like a good idea. But I need a way to combine the output the chartcontrols produce with the data I'm feeding it. The chartcontrol is reused in multiple pages, so I want to make it configurable by the controller. For instance, on a page where the y axis represents number of users, I want to be able to tell my model that the y axis is number of users and just output that in the graph. I can do that by rendering model stuff troughout the jQuery code, but I'm not quite sure that's the way to go here.

Paul Tyng · Accepted Answer · 2011-10-27 19:07:54Z

1

In MVC DisplayTemplates or partial views are more analogous to controls than HtmlHelpers. If its just script that doesn't require any additional data lookups or things like that, I would just use a Partial view and reference with @Html.Partial. If it has additional functionality / security / data lookup, then I would go with a child action (ie. create a ChartController and reference with @Html.Action("ActionName", "Chart", params). If its based upon a property in your model, then I would go with a DisplayTemplate.

If its entirely client side though with just a data request, I would definitely do what is recommended by Marquez and just have a .js file.

answered Oct 27, 2011 at 19:07

Paul Tyng

7,6051 gold badge36 silver badges57 bronze badges

Comments

goenning · Accepted Answer · 2012-01-04 13:38:47Z

I've been working on a open-source MVC Html Helper for Highcharts. It's still under development, but I'm really liking the result, so I hope it can be useful for you somehow. This is an example of what you do with Highcharts MVC:

@(
    Html.Highchart("myChart")
        .Title(this.Model.Title)
        .WithSerieType(ChartSerieType.Line)
        .AxisX("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec")
        .AxisY(this.Model.MyChartAxisTitle)
        .Series(
            new Serie("iPad", new int?[] { 0, 0, 0, 0, 0, 0, 16, 20, 40, 61, 100, 120 }),
            new Serie("MacBook", new int?[] { 616, 713, 641, 543, 145, 641, 134, 673, 467, 859, 456, 120 }),
            new Serie("iPhone", new int?[] { 10, 45, 75, 100, null, 546, 753, 785, 967, 135, 765, 245 })
        ).ToHtmlString()
)

Collectives™ on Stack Overflow

Creating MVC helper for javascript / jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related