爲javascript/jquery創建MVC幫助程序

對於新項目，我使用javascript/jquery套件來顯示圖表（http://www.highcharts.com）。每個頁面的JavaScript代碼大致相同，所以我想集中它並使可重用的東西。我正在使用ASP.NET MVC爲這個應用程序，所以我期待創建一個servercontrol與一些設置，這將有條不紊地輸出JavaScript/jQuery代碼。但我不確定如何以一種整潔的方式做到這一點。當然，我可以去建立一個長字符串並將其呈現給頁面，但這看起來相當難看。爲javascript/jquery創建MVC幫助程序

所以我基本上尋找如何將一段JavaScript轉換爲可管理的servercontrol的最佳實踐。我也想將諸如自動數據綁定之類的東西包含到JSON Web服務中。

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

現在，在我的網頁，我有jQuery代碼包含這樣的事情：

標題：{ 文本：<％：Model.Title％>' }，

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

來源

2011-10-27 Jasper

我建議將javascript放在.js文件中，只需從MVC主視圖，頁面視圖或用戶控件視圖中的腳本標記引用它即可。將javascript放在單獨的文件中有幾個優點，這被認爲是一種很好的做法。在瀏覽器中緩存javascript內容將增強性能並減少帶寬的使用 - 並且使用螢火蟲或任何其他的javascript調試器來調試javascript會更容易。

來源

2011-10-27 19:06:44 Marquez

好吧，聽起來像個好主意。但是我需要一種方法來將chartcontrols生成的輸出與我提供的數據結合起來。 chartcontrol被重複使用在多個頁面中，所以我想讓它由控制器進行配置。例如，在y軸代表用戶數量的頁面上，我希望能夠告訴我的模型y軸是用戶的數量，並將其輸出到圖形中。我可以通過在jQuery代碼中渲染模型的東西來做到這一點，但我不太確定這是怎麼回事。 – Jasper

在MVC DisplayTemplates或部分視圖比HtmlHelpers更類似於控件。如果它的腳本不需要任何額外的數據查找或類似的東西，我只需使用局部視圖並參考@Html.Partial。如果它有額外的功能/安全/數據查找，那麼我會去兒童行動（即創建一個ChartController和參考@Html.Action("ActionName", "Chart", params)。如果它基於您的模型屬性，那麼我會去與DisplayTemplate。

如果雖然只是一個數據請求其全部客戶端，我肯定會做什麼是由馬爾克斯建議，只是有.js文件。

來源

2011-10-27 19:07:54

我一直在open-source MVC Html Helper for 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() 
)

來源

2012-01-04 13:38:47 goenning

爲javascript/jquery創建MVC幫助程序

回答

相關問題