私のJavascriptはViewコンポーネントのどこにありますか？

Question

私はMVC 6でview componentsに慣れていて、数年前に部分ビューについてsimilar questionと尋ねました。独自のJavascriptを必要とする共通のユースケースをカプセル化するビューコンポーネントを作成する場合、そのJavascriptはどこに配置しますか？部分的なビューでJavascriptを使用するのはdangerous at bestであることがわかっていますが、包含ビューまたは包含ビューで参照する必要がある別のファイルではなく、ビューコンポーネントにJavascriptを含める方がはるかに簡単です。

たとえば、2つのドロップダウンがあるビューコンポーネントがあるとします。最初のドロップダウンの選択によって、2番目のドロップダウンに表示される項目が決まります。もちろん、これはJavascriptでも簡単に処理できますが、どこに入れますか？

Answer 1

ASP.NET 5 Viewコンポーネントでの私の経験から、それらを実行する最も良い方法は、それらを隔離して1か所に保持することです。そのため、長期的なプロジェクトで簡単に管理できるようになります。私のASP.NETプロジェクトの一つで

、私が開発したビューコンポーネントのこのような構造：あなたの周りに移動するとき

ビュー、バックエンドのコードとモデルはそう、一箇所ですべてですフォルダ、あなたはコンポーネント全体を移動することを確信しています。さらに、あなたがそれらを改造しているときに、あなたはそのすべての部分にすばやくアクセスできます。

このような構造にもコンポーネントに強く結びついたJavaScriptを置くことは便利です。コンポーネントのフォルダの下にファイルを作成し、JSファイルをwwwrootにコピーするGULP TASKを書くだけで、これを行うことができます。私のために検索できるように、私のプロジェクトでは、このような構造を得るために

<script src="~/Components/yourcomponent.js"></script> 

、私はカミソリを拡張しました：その時点から、あなたは標準の構文を使用して、コンポーネントの.cshtml上のJavaScriptコードがそのリンクすることができるようになりますコンポーネントのCSHTMLが適切な場所にあります。

public partial class Startup 
{ 
    public void ConfigureServices(IServiceCollection services) 
    { 
     //non relevant code skipped 
     services.AddMvc().AddRazorOptions(ConfigureRazor); 

    } 

    public void ConfigureRazor(RazorViewEngineOptions razor) 
    { 
     razor.ViewLocationExpanders.Add(new ViewLocationExpander()); 
    } 
} 

とViewLocationExpanderクラスは次のとおりです：これを行うには、私はStartup.csにこのコードを追加しました

public class ViewLocationExpander : IViewLocationExpander 
{ 
    protected static IEnumerable<string> ExtendedLocations = new[] 
    { 
     "/{0}.cshtml" 
    }; 

    public void PopulateValues(ViewLocationExpanderContext context) 
    { 
     //nothing here 
    } 

    public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context, IEnumerable<string> viewLocations) 
    { 
     //extend current view locations 
     return viewLocations.Concat(ExtendedLocations); 
    } 
} 

次に、あなたが（任意の.cshtmlビューから）このようにコンポーネントを起動します。

@await Component.InvokeAsync("NavigationComponent",new NavigationComponentModel()) 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.