在 MVC Asp Net 中使用 Chosen jQuery 插件
Posted
技术标签:
【中文标题】在 MVC Asp Net 中使用 Chosen jQuery 插件【英文标题】：Use Chosen jQuery plugin in MVC Asp Net 【发布时间】：2018-05-06 06:33:41 【问题描述】：我想在 AspNet 项目中安装 Chosen javascript jquery 插件。我已经按照这个步骤：
1- 在 Scripts 目录下我已经添加了所有的 javascript 文件，如下图所示
2-在我添加的Index.cshtml中
<head>
<meta charset="utf-8">
<title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
<link rel="stylesheet" href="~/Scripts/chosen_v1.8.2/docsupport/style.css">
<link rel="stylesheet" href="~/Scripts/chosen_v1.8.2/docsupport/prism.css">
<link rel="stylesheet" href="~/Content/chosen.css">
@*<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://ajax.googleapis.com; style-src 'self'; img-src 'self' data:">*@
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/chosen_v1.8.2/chosen.jquery.js" type="text/javascript"></script>
<script src="~/Scripts/chosen_v1.8.2/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Scripts/chosen_v1.8.2/docsupport/init.js" type="text/javascript" charset="utf-8"></script>
然后我添加了多选 ui，但它仍然不起作用。我总是得到下图中的用户界面：
有什么建议吗？ 提前致谢。
【问题讨论】：
更改脚本顺序，因为我遇到了问题，有时 Jquery 应该在任何其他库之前加载 请添加您的 HTML 标记，我们需要看看您的标准<select> 元素是什么样的
你的脚本似乎漂浮在无人区，要么放在你的头上，要么放在你的身体里，而不是放在它们之间（但不确定这是否会有所不同）
【参考方案1】：
感谢您的回答，现在正在工作。 我想逐步分享我遵循的程序：
-
从https://github.com/harvesthq/chosen 网站下载 Chosen，在我的例子中是 selected_v1.8.2
在 ASP-NET 项目中创建并填充目录，如下所示
Scripts/chosen 将 \chosen_v1.8.2 中的所有文件放在这里 Scripts/chosen/docsupport 将 \chosen_v1.8.2\docsupport 中的所有文件放在这里
5- 更新 /App_Start/BundleConfig.cs
//添加选择的脚本
bundles.Add(new ScriptBundle("~/bundles/chosen").Include(
"~/Scripts/chosen/chosen.jquery.min.js",
"~/Scripts/chosen/chosen.jquery.js",
"~/Scripts/chosen/docsupport/prism.js",
"~/Scripts/chosen/docsupport/init.js"
-
更新 /shared/Layout.cshtml
在 jquery 之后添加选择的包
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/chosen")
更新 /shared/Layout.cshtml 后添加 jquery 选择的包
5.用一些示例更新 index.cshtml
...
<script type="text/javascript">
$(document).ready(function ()
$("select").chosen();
$("chosen-select-width").chosen();
);
</script>
<h2><a name="custom-width-support" class="anchor" href="#custom-width-support">Select the shop</a></h2>
<div class="side-by-side clearfix">
<p>Using a custom width with Chosen is as easy as passing an option when you create Chosen:</p>
<pre><code class="language-javascript"> $(".chosen-select").chosen(width: "95%"); </code></pre>
<div>
<em>Multiple Select Shop id</em>
<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-width" tabindex="16">
<option value=""></option>
<option selected>Test1</option>
<option>Test2</option>
<option>Test3</option>
</select>
</div>
</div>
7 享受
【讨论】：
【参考方案2】：您必须在所选组件上实际初始化所选库。这最好在文档就绪事件中完成，以确保库已加载。
例如在你的 html 代码中添加这个：
<script>
$(function()
$("select").chosen();
);
</script>
【讨论】：
不确定谁对您的答案投了反对票，但我相信它是正确的。但是，如果您要在问题中提及 ready() 方法，您应该将其添加到您的代码 sn-p 中。 标签中也不包含 OP 的 JS 脚本，尽管奇怪的是它们的 css 链接是。 @charlietfl 很公平，但这对其他人来说并不是很明显。以上是关于在 MVC Asp Net 中使用 Chosen jQuery 插件的主要内容，如果未能解决你的问题，请参考以下文章
在 MVC 5 Razor 页面中实现 bootstrap.chosen
[转载]在ASP.NET MVC中，使用Bundle来打包压缩js和css
ASP.NET MVC 和 Angularjs 与 ASP.NET MVC 和 Reactjs