控件不会在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从wwwroot \\ lib \\ bootstrap \\ dist中的文件中获取自动完成数据。 使用以下步骤刷新这些文件：

• 从项目菜单中选择“管理Bower包”
• 找到Bootstrap，验证版本然后单击安装
• 删除以下内容：wwwroot \\ lib \\ bootstrap \\ dist
• 将以下内容复制：bower_components \\ bootstrap \\ dist到：wwwroot \\ lib \\ bootstrap \\ dist

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