2015-12-13 2 views
14

私は私のMVC 6の上にいくつかのd3jsを実行しようとしています。この例https://github.com/DustinEwers/D3-DotNetMVC-Demos/blob/master/D3Demos/Views/TagDemos/BasicBarChart.cshtmlを見ていたし、それがいただきましMVCの@ Scripts.Renderの交換6

@Scripts.Render("~/bundles/d3") 
@section Scripts{ 

を使用しています。しかし、私がしなければ、私は

を得ること

名「スクリプトが」は現在のコンテキスト

だから、MVC 6でそれを行うための新しい方法があるには存在しないのですか?

答えて

15

ASP.NET 5では、Scripts.Renderメソッドはありません。スクリプトをレンダリングするには、環境タグヘルパーを使用することができます。

環境タグヘルパーを使用する必要はありません。スクリプトタグをレイアウトファイルに直接入れることができます。しかし、環境ヘルパーは、環境に基づいて条件付きでスクリプトをレンダリングすることができます。 (ミニバンドルバージョンとすべてUn未対応バージョン

ここでは、これをレイアウトファイルに含めることができます。あなたは、スクリプトファイルにd3.jsand d3.min.jsを持っていると仮定すると

<environment names="Development"> 
    <script src="~/lib/jquery/dist/jquery.js"></script> 
    <script src="~/js/d3.js"></script> 
</environment> 
<environment names="Staging,Production"> 
    <script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" 
      asp-fallback-src="~/lib/jquery/dist/jquery.min.js" 
      asp-fallback-test="window.jQuery"> 
    </script>    
    <script src="~/js/d3.min.js" asp-file-version="true"></script> 
</environment> 

~/jsディレクトリに存在します。

また、あなたが拡張メソッドは、JSファイル、CSSファイルなどを含めて提供する静的ファイルを可能にします

public void Configure(IApplicationBuilder app, IHostingEnvironment env, 
                  ILoggerFactory loggerFactory) 
{ 
    //Other configuration goes here 
    app.UseStaticFiles(); // This enables static file serving from the app. 
    app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller=Home}/{action=Index}/{id?}"); 
     }); 
} 

UseStaticFiles()

(Startup.cs 内)あなたがConfigure()メソッド内UseStaticFiles()メソッドを呼び出していることを確認する必要があります..

アプリケーションを開発モードで実行すると、環境内のスクリプトタグがレンダリングされます。"Development"ステージングまたはプロダクションでスクリプトタグを実行すると、スクリプトタグが環境は"Staging,Production"です。

あなたは、プロジェクトを右クリックして、環境値を変更し、properties->Debugを選択して、変数の環境の値を指定することができますHosting:Environment

あなたは、私がステージング/生産中のjsファイルの縮小さバージョンが含まれていることがわかります環境。これは必要ではないが、いくらかの帯域幅を節約するための好ましいアプローチである。 (本当にそれをやりたいのであれば、縮小されていないバージョンもそこに置くことができます。)。バンドルされたファイルが1つの場合は、個々のファイルの代わりにここでも使用できます。

既にミニバージョンをお持ちでない場合は、縮小用のgulpタスクを実行して生成することができます(これは新しいWebアプリケーションテンプレートのデフォルトgulp.jsファイルに含まれています)。あなたはタスクランナーを開き、minificationタスクを実行するだけです。

enter image description here

手動でこのたびを実行したくない場合は、これは自動的にあなたのプロジェクトをビルドするたびそのpurticularゴクゴクタスクを実行するように、あなたはBindings -> Before buildを選択することができます。

+1

恐ろしい答えbtw :) –

+0

Microsoftは少なくともデフォルトではGulpから離れたようです。テンプレートプロジェクトは、現在、https://docs.microsoft.com/en-us/aspnet/core/migration/mvcに記載されているように、BundlerMinifier.Coreツールに依存しています –

0

あなただけの単純なHTMLのスクリプトタグの作成、そのスクリプトを実行するためにwan't場合:

<script src="js/d3.js?version=1"></script> 

をしかし、私は本当にあなたがあなたのアセットファイルをバンドルし、縮小化することをお勧めします。 GulpやGruntのようなタスクランナーの助けを借りて、javascript/cssファイルをバンドル、マイグレーション、移動(そしてもっとたくさん)することができます。一息を使用する方法について

の情報はここで見つけることができます:Shyjuポストロード正しいファイルの助けを借りて、http://rudiv.se/Article/asp-net-5-bundling-with-bower-and-gulp

そして、あなたの開発やステージング環境を実行したとき。

+1

URL短縮機能を使用しないでください。破損する可能性のあるチェーン内のリンク。 – DavidG

+0

情報ありがとうございましたDavidG –

+1

@StefanKarlssonリンクはもう動作しません – MaLiN2223

2

は、今ではもう少し複雑だが、documentationは非常によく、それを説明する:

利用ASP.NET MVC 5スターターウェブテンプレートASP.NETの組み込みに束ねるためのサポート。 ASP.NET MVC 6では、クライアントビルドステップを使用してこの機能を実行する方がよいでしょう...

したがって、スクリプトをバンドルするには、gulp-concatのようなツールを使用できます。コンテンツを含む、より完全な例については

<script src="~/lib/bundle.js"></script> 

、@Shyjuによって答えは優れている:そして、ちょうどあなたが希望の方法でそれを追加し、それが静的コンテンツであれば、スクリプトを含むように

+1

自動的に縮小されたファイルをビューに自動的に組み込む方法はありません。私が今見ているように、各ファイルを個別に指定する必要があります。 – Maxim

関連する問題