控件不会在asp.net mvc上呈现bootstrap fileupload

Question

您好我正在尝试创建文件上传控件并使用bootstrap fileupload进行渲染。

我正在使用Visual Studio 2017 v 15.1

我已经从NuGet添加了bootstrap-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-fileinput类（文件操作，文件放置区...）

谢谢你，抱歉我的英文不好

Answer 1

确保正确的依赖关系引用

由于您的类正在呈现，听起来似乎只是找不到您的Javascript和CSS特定引用。

考虑确保与bootstrap-fileinput插件相关的文件被正确引用并显示在它们可能依赖的任何项目之后（例如jQuery，Bootstrap等）：

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

如果这些已正确加载，您应该看到您的类按预期应用：

如果您需要应用任何特定的初始化代码，则可以添加其他<script>标记并明确定位该元素，如下所示：

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

如果您遇到问题，请使用“脚本”部分

值得注意的是，如果您在_Layout.cshtml页面中定义了jQuery和Bootstrap，那么您可能希望使用一个部分来确保在这些依赖项之后引用它们好：

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

如果您在布局中的子视图中引用脚本，这将允许您更精细地控制在哪里呈现脚本。

考虑使用不同的软件包管理器

值得注意的是，NuGet最近离开（或试图）从客户端软件包转而使用其他软件包管理器，例如npm，bower等。您可能会发现使用其中一个管理器更方便你的包而不是Nuget。

Answer 2

原始问题是关于自动填充功能。这是在Visual Studio 2017中使用Bootstrap 4进行​​自动完成的解决方案。

Visual Studio似乎从w​​wwroot \ lib \ bootstrap \ dist中的文件中获取自动完成数据。使用以下步骤刷新这些文件：

• 从项目菜单中选择＆＃34;管理Bower Packages＆＃34;
• 查找引导程序，验证版本，然后单击“安装”
• 删除以下内容： wwwroot的\ lib中\引导\ DIST
• 复制以下内容： bower_components \引导\ DIST 至： wwwroot的\ lib中\引导\ DIST

您还必须更改代码中的任何引用以指向新版本。