Создание помощника MVC для javascript / jquery

Question

Для нового проекта я использую набор javascript / jquery для отображения диаграмм (http://www.highcharts.com). Код javascript для каждой страницы примерно одинаков, поэтому я хотел централизовать его и сделать что-то повторно используемое. IЯ использую ASP.NET MVC для этого приложения, поэтому я хотел создать серверный контроль с некоторыми настройками, который бы выводил код javascript / jQuery организованным способом, но я не уверен, как это сделать аккуратно.Конечно, я мог бы просто создать длинную строку и отобразить ее на странице, но это кажется довольно уродливым.

Так что я в основном ищу лучшие практики о том, как преобразовать часть JavaScript вуправляемое управление сервером. Я также хочу включить такие вещи, как автоматическое связывание данных с веб-сервисами JSON.

Обновление; я создал модель, которую хочу использовать для построения диаграмм. Она содержит такие вещи, как метки оси, заголовок диаграммы и прочее.вот так.

Теперь на моей странице есть код jQuery, который содержит такие вещи:

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

для установки различных свойств диаграммы.Но я понимаю, что это нехорошая практика, я просто не уверен в том, что есть.В приведенном выше примере я хочу сделать такие вещи, как добавить свойство title, когда оно установлено в моей модели, но полностью опустить его, когда это не так (чего сейчас не происходит).Я могу добиться этого, добавив много вещей if / else, но это не сделает вещи красивее.Поэтому я задаюсь вопросом вслух, что создание кода jquery - это не то, что следует делать в классе.

Answer 1

В MVC DisplayTemplates или частичные представления более похожи на элементы управления, чем HtmlHelpers. Если это просто скрипт, который не требует каких-либо дополнительных поисков данных или тому подобного, я бы просто использовал частичное представление и ссылку с @Html.Partial. Если он имеет дополнительную функциональность / безопасность / поиск данных, то я бы пошел с дочерним действием (т.е. создайте ChartController и ссылку с @Html.Action("ActionName", "Chart", params). Если оно основано на свойстве в вашей модели, то я бы пошел с DisplayTemplate.

Если это полностью клиентская часть, хотя с помощью только запроса данных, я бы определенно сделал то, что рекомендует Marquez, и просто имел бы файл .js.

Answer 2

Я бы порекомендовал поместить javascript в файл .js и просто сослаться на него с тегом скрипта из основного представления MVC, просмотра страницы или представления управления пользователем, если оно вам нужно. Есть несколько преимуществ размещения javascript в отдельном файле, и это считается хорошей практикой. Кэширование содержимого javascript в браузере повысит производительность и сократит использование полосы пропускания - и будет легче отлаживать javascript с помощью firebug или любого другого отладчика javascript.

Answer 3

Я работал над Помощником MVC Html с открытым исходным кодом для Highcharts .Он все еще находится в стадии разработки, но мне действительно нравится результат, поэтому я надеюсь, что он может быть полезен для вас.Это пример того, что вы делаете с 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()
)