CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3
Jasper
Jasper

Reputation: 1837

Creating MVC helper for javascript / jquery

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.

Upvotes: 3

Views: 842

Answers (3)

goenning
goenning

Reputation: 6654

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()
)

Upvotes: 0

Paul Tyng
Paul Tyng

Reputation: 7584

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.

Upvotes: 1

Marquez
Marquez

Reputation: 6039

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.

Upvotes: 1

Related Questions