2017-04-20 10 views
1

こんにちは私はファイルアップロードコントロールを作成し、ブートストラップfileuploadでレンダリングしようとしています。コントロールは、ブートストラップをレンダリングしません。asp.net mvcのファイルアップロード

私は、Visual Studioに2017 V私はNuGetからブートストラップ・FileInputクラスを追加しました15.1

(V 4.3.9)を使用してい

コード:

@model RecsMVC.Models.DadesKoboViewModel 
@{ 
    ViewBag.Title = "Dades KoboToolbox"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 
@using (Html.BeginForm()) 
{ 
    <div class="form-horizontal"> 
     <input id="input_id" name="input_id" type="file" class="file" /> 
    </div> 
} 

私は設定クラス、オートコンプリートは適切なクラスとしてファイルを見つけることはできませんが、いくつかのブートストラップファイルインプットクラス(ファイルアクション、ファイルドロップゾーン...)を見ることができます

ありがとう、発見されていない、あなたのJavascriptとCSSの特定の参照と問題は、単にそこにあるように、あなたのクラスがレンダリングされているのでっぽい

+0

あなたは 'bootstrap-fileinput'パッケージを参照していますか?私は 'bootstrap-fileupload'を見ていないようです。 –

+0

Ooops、バットタイピング...私はちょうどそれを修正しました。ありがとうございました! – csk

答えて

0

を参照適切な依存関係を確認し、それが聞こえます。

bootstrap-fileinputプラグインに関連するファイルが正しく参照して、彼らは(など例えばjQueryの、ブートストラップ、)に依存することができる任意の項目の後に表示されていることを確実にすることを検討:

<!-- jQuery --> 
<script src="~/lib/jquery/dist/jquery.js"></script> 

<!-- Bootstrap --> 
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script> 
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" /> 

<!-- Bootstrap-FileInput --> 
<script src="~/lib/bootstrap-fileinput/js/fileinput.min.js"></script> 
<link href="~/lib/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" /> 

@using (Html.BeginForm()) 
{ 
    <div class="form-horizontal"> 
     <input id="input_id" name="input_id" type="file" class="file" /> 
    </div> 
} 

これらが適切にロードされている場合は、あなたは期待通りに適用される、あなたのクラスを参照してくださいする必要があります

enter image description here

あなたが適用する必要が任意の特定の初期化コードがある場合は、追加を追加することができます<script>下図のようにタグと明示的には、要素をターゲット:あなたは問題がある場合

$(":file").fileinput({'showUpload':false, 'previewFileType':'any'}); 

は、スクリプトのセクションを使用

それはあなたが持っている場合はjQueryとブートストラップは、あなたの_Layout.cshtmlページ内で定義されていることは注目に値します、そしてあなた「おそらく、これらも同様に後、それらの依存関係を参照されていることを確認するためにセクションを使いたいでしょう:

<!-- Place this at the end of your _Layout.csthml after your existing scripts --> 
@RenderSection("scripts", required: false) 

<!-- Place this within your partial view/view --> 
@section scripts { 
    <script src="~/lib/bootstrap-fileinput/js/fileinput.min.js"></script> 
} 

ティを細かく制御できます。レイアウト内の子ビュー内でそれらを参照すると、スクリプトがレンダリングされます。

は、それはなどNPM、亭、などの別のパッケージマネージャを使用しての賛成で、クライアント側のパッケージからNuGetは最近離れ(またはしようと)していることは注目に値します

異なるパッケージマネージャを使用して考えてみましょうNugetとは対照的に、これらのいずれかを使用してパッケージを取り込むほうが簡単かもしれません。

0

元の質問はオートコンプリートです。ここではVisual Studioの中でブートストラップ4で作業を自動補完を取得するためのソリューションです2017年

それは、Visual Studioはwwwrootの\ libに\ブートストラップ\ distの中のファイルからのオートコンプリートデータを取得することが表示されます。[プロジェクト]メニューから

  • バージョンを確認し、ブートストラップを探す
  • 「バウアーは、パッケージの管理」を選択後、
  • は、内容の削除[インストール]をクリックします:次の手順でこれらのファイルを更新し wwwrootの\ libに\ブートストラップ\をdistの
  • コピーの内容: bower_components \ブートストラップ\ distの へ: wwwrootの\ libに\ブートストラップ\ distの

また、新しいバージョンを指すようにコード内の参照を変更する必要があります。

関連する問題