2017-04-20 68 views
1

您好我想創建一個文件上傳控制並使用bootstrap fileupload呈現它。控制不呈現在asp.net上的引導文件上傳mvc

我使用Visual Studio 2017年v 15.1

我從加入的NuGet引導-的FileInput(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> 
} 

當我設置類,自動完成沒有找到文件作爲合適的類,但我可以看到幾個bootstrap文件輸入類(文件操作,文件拖放區...)

謝謝你,併爲我的壞engl抱歉十歲上下

+0

你指的是'bootstrap-fileinput'包嗎?因爲我似乎沒有看到'bootstrap-fileupload'。 –

+0

Ooops,蝙蝠打字......我剛糾正它。謝謝! – csk

回答

0

確保適當的依賴引用

因爲你的類被渲染,聽起來根本就與你的Javascript和CSS具體提及的問題沒有被發現。

考慮確保您的相關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> 
} 

氏s將允許您更精細地控制,其中如果您在腳本內的子視圖內引用腳本,則會呈現腳本。

考慮使用不同的軟件包管理器

值得一提的是,的NuGet最近搬走(或試圖)從客戶端軟件包贊成使用另一種包管理器,如故宮,涼亭等。你可能會發現使用其中的一種來拉動你的包比Nuget更容易。

0

原始問題與自動完成有關。以下是在Visual Studio 2017中使用Bootstrap 4自動完成工作的解決方案。

看來,Visual Studio從wwwroot \ lib \ bootstrap \ dist中的文件中獲取它的自動完成數據。刷新這些文件有下列步驟操作:

  • 從項目菜單中選擇「管理鮑爾包」
  • 查找引導,驗證版本,然後單擊安裝
  • 刪除的內容: 的wwwroot \ LIB \引導\ DIST
  • 複製的內容: bower_components \引導\ DIST 到: 的wwwroot \ LIB \引導\ DIST

您還必須更改代碼中的任何引用以指向新版本。