為javascript / jquery創建MVC幫助器

Question

對於一個新項目，我使用javascript / jquery套件來顯示圖表（ http://www.highcharts.com ）。 每個頁面的javascript代碼大致相同，所以我想集中它並使某些東西可以重用。 我正在將ASP.NET MVC用於此應用程序，因此我希望創建一個帶有一些設置的servercontrol，這些設置將以有條理的方式輸出javascript / jQuery代碼。 但我不確定如何以一種巧妙的方式做到這一點。 當然，我可以直接建立一個長字符串並將其呈現給頁面，但這看起來相當丑陋。

所以我基本上尋找關於如何將一段javascript轉換為可管理的servercontrol的最佳實踐。 我還希望將自動數據綁定等內容包含在JSON Web服務中。

更新; 我創建了一個我想用於圖表的模型。 它包含軸標簽，圖表標題和類似的東西。

現在在我的頁面中，我有jQuery代碼，其中包含以下內容：

title：{text：'<％：Model.Title％>'}，

設置各種圖表屬性。 但我明白這不是好習慣，我只是不確定是什么。 在上面的例子中，我想做一些事情，比如在我的模型中設置title屬性時添加title屬性，但是當它不存在時（現在沒有發生）完全省略它。 我可以通過添加很多if / else的東西來實現這一目標，但這不會讓事情變得更漂亮。 因此，我很想知道jquery代碼的構造不是應該在類中完成的。

Answer 1

我建議將javascript放在一個.js文件中，只需用MVC主視圖，頁面視圖或用戶控件視圖中的腳本標記引用它就可以了。 將javascript放在單獨的文件中有一些優點，這被認為是一種很好的做法。 在瀏覽器中緩存javascript內容將提高性能並減少帶寬的使用 - 並且使用firebug或任何其他javascript調試器調試javascript將更容易。

Answer 2

在MVC中，DisplayTemplates或部分視圖比HtmlHelpers更類似於控件。 如果它的腳本不需要任何額外的數據查找或類似的東西，我只會使用部分視圖和@Html.Partial引用。 如果它有額外的功能/安全/數據查找，那么我會使用子操作（即使用@Html.Action("ActionName", "Chart", params)創建ChartController和引用@Html.Action("ActionName", "Chart", params) 。如果它基於屬性在你的模型中，我會使用DisplayTemplate。

如果它只是一個數據請求的完全客戶端，我肯定會做Marquez推薦的，只有一個.js文件。

Answer 3

我一直在為Highcharts開發一個開源的MVC Html Helper 。 它仍在開發中，但我真的很喜歡這個結果，所以我希望它能以某種方式對你有用。 這是你用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()
)