控件不会在asp.net mvc上呈现引导文件

Question

嗨，我正在尝试创建一个文件上传控件，并使用引导fileupload呈现它。

我正在使用VisualStudio2017 v15.1

我从NuGet添加了引导文件输入(v4.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>
}

当我设置这个类时，自动完成器不会发现文件是一个合适的类，但是我可以看到几个引导文件输入类(文件操作，文件拖放区域.)

谢谢你，为我糟糕的英语道歉

Answer 1

确保正确引用

由于您的类正在呈现，所以您的Javascript和CSS特定引用没有找到，这听起来很简单。

考虑确保与引导-文件输入插件相关的文件被正确引用并出现在它们可能依赖的任何项之后(例如，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'});

如果您有问题，请使用脚本部分

值得注意的是，如果在您的jQuery页面中定义了_Layout.cshtml和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 2017中自动完成使用引导程序4的解决方案。

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

• 从“项目”菜单中选择“管理Bower包”
• 查找引导程序，验证版本，然后单击安装
• 删除: wwwroot\lib\bootstrap\dist的内容
• 将: bower_components\bootstrap\dist的内容复制到: wwwroot\lib\bootstrap\dist

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