2017-04-20 21 views
1

Hallo Ich versuche, eine Datei Upload-Steuerelement zu erstellen und rendern mit Bootstrap Fileupload.Steuerelement nicht bootstrap Dateiupload auf asp.net mvc

Ich bin mit Visual Studio 2017 v 15.1

ich die Bootstrap-fileinput von NuGet hinzugefügt haben (v 4.3.9)

Code:

@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> 
} 

, wenn ich die eingestellte Klasse, die Autovervollständigung findet Datei nicht als geeignete Klasse, aber ich kann mehrere Bootstrap-Dateieingabeklassen sehen (Dateiaktionen, Datei-Drop-Zone ...)

Vielen Dank und Entschuldigung für mein schlechtes engl ish

+0

Beziehen Sie sich auf das Paket 'bootstrap-fileinput'? Da ich anscheinend kein 'bootstrap-fileupload' sehe. –

+0

Hoppla, Fledermaus-Tipp ... Ich habe es gerade korrigiert. Vielen Dank! – csk

Antwort

0

Proper Abhängigkeit Stellen Sie sicher,

Referenzierung Da Ihre Klassen gemacht werden, es klingt wie es einfach ein Problem mit Javascript und CSS spezifischen Referenzen nicht gefunden wird.

Betrachten Sie sicher, dass Ihre Dateien in das bootstrap-fileinput Plugin im Zusammenhang richtig referenziert werden und erscheinen nach allen möglichen Einzelteilen können sie auf (zB jQuery, Bootstrap, etc.) abhängig sein:

<!-- 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> 
} 

Wenn diese, richtig geladen Sie sollten Ihre Klassen angewendet wie erwartet sehen:

enter image description here

Wenn es einen speziellen Code für die Initialisierung, die Sie anwenden müssen, können Sie eine zusätzliche <script> hinzufügen Tag und explizit das Element Ziel wie unten zu sehen:

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

Wenn Sie Probleme haben, einen Abschnitt Scripts verwenden

Es ist erwähnenswert, dass, wenn Sie jQuery und Bootstrap innerhalb Ihrer _Layout.cshtml Seite definiert haben, dann sind Sie ‚ll wahrscheinlich wollen einen Abschnitt verwenden, um sicherzustellen, dass diese nach diese Abhängigkeiten auch referenziert werden:

<!-- 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> 
} 

Thi s können Sie genauer steuern, wobei Ihre Skripts gerendert werden, wenn Sie sie in Kindansichten innerhalb eines Layouts referenzieren.

Betrachten wir ein anderes Paket-Manager

Es lohnt Mit der Feststellung, dass NuGet vor kurzem weg bewegt hat (oder versucht) von clientseitigen Pakete für einen anderen Paket-Manager wie npm verwenden, Bower, usw. Sie könnten es einfacher finden, eines dieser Pakete zu verwenden, um Ihr Paket im Gegensatz zu Nuget einzubinden.

0

Die ursprüngliche Frage war über Autocomplete. Hier ist eine Lösung zum automatischen Vervollständigen mit Bootstrap 4 in Visual Studio 2017.

Es scheint, dass Visual Studio seine Autocomplete-Daten aus den Dateien in wwwroot \ lib \ bootstrap \ dist erhält.Aktualisieren Sie die Dateien mit den folgenden Schritten:

  • Im Menü Projekt wählen "Manage Bower-Pakete"
  • Bootstrap finden, überprüfen Sie die Version klicken Sie dann auf installieren
  • Löschen Sie den Inhalt von: wwwroot \ lib \ Bootstrap \ dist
  • Kopieren Sie den Inhalt von: bower_components \ Bootstrap \ dist zu: wwwroot \ lib \ Bootstrap \ dist

Sie müssen auch alle Referenzen im Code ändern, um auf die neue Version zu verweisen.

Verwandte Themen