在 asp:ListBox 上选择了 Jquery 插件 - 生成了多个控件
Chosen Jquery Plugin on asp:ListBox - Multiple controls generated
我有一个使用 Chosen Jquery 插件自定义的用户控件,如下所示
<%@ Control Language="C#" CodeBehind="ManyToMany_Edit.ascx.cs" Inherits="Blah.ManyToMany_EditField" %>
<asp:HiddenField runat="server" ID="lbltest" />
<%--<link rel="stylesheet" href="../../Content/style.css">--%>
<link rel="stylesheet" href="../../Content/prism.css">
<link rel="stylesheet" href="../../Content/chosen.css">
<%--<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop {
left: -9000px;
}
</style>--%>
<script src="../../Content/chosen.jquery.min.js" type="text/javascript"></script>
<script src="../../Content/chosen.jquery.js" type="text/javascript"></script>
<script src="../../Content/prism.js" type="text/javascript" charset="utf-8"></script>
<%--<asp:DropDownList ID="ddlMultiSelect" data-placeholder="Choose a Team Member…" class="chosen-select" multiple Style="width: 350px;" runat="server">--%>
<div >
<asp:ListBox ID="ddlMultiSelect" SelectionMode="Multiple" data-placeholder="Choose …" multiple class="chosen-select" runat="server" >
</asp:ListBox>
</div>
<form>
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</form>
<header>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=ddlMultiSelect.ClientID %>").change(function () {
var arr = $(this).val();
if (typeof arr === 'object' && arr instanceof Array) {
document.getElementById('<%=lbltest.ClientID%>').value = arr.toString();
}
else { document.getElementById('<%=lbltest.ClientID%>').value = ""; }
console.log(arr);
}
)
});
</script>
</header>
然后我在 entity framework 中使用它来显示我的 Many 2 Many 编辑视图。它适用于其中一个字段,但对于另一个字段,它会生成 2 个输入框。
如果我关闭 Chosen 并使用普通的列表框,它会按每个字段的第一代控件的预期工作。所以我认为这与选择有关。
截图如下
我动了这一点
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
从用户控件(字段模板)到插入和编辑页面。配置只需要在页面加载时分配一次。现在可以了。我想现在我有一个非常好的 Many2Many 字段模板,有时我会 post 在 nuget 上。
我有一个使用 Chosen Jquery 插件自定义的用户控件,如下所示
<%@ Control Language="C#" CodeBehind="ManyToMany_Edit.ascx.cs" Inherits="Blah.ManyToMany_EditField" %>
<asp:HiddenField runat="server" ID="lbltest" />
<%--<link rel="stylesheet" href="../../Content/style.css">--%>
<link rel="stylesheet" href="../../Content/prism.css">
<link rel="stylesheet" href="../../Content/chosen.css">
<%--<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop {
left: -9000px;
}
</style>--%>
<script src="../../Content/chosen.jquery.min.js" type="text/javascript"></script>
<script src="../../Content/chosen.jquery.js" type="text/javascript"></script>
<script src="../../Content/prism.js" type="text/javascript" charset="utf-8"></script>
<%--<asp:DropDownList ID="ddlMultiSelect" data-placeholder="Choose a Team Member…" class="chosen-select" multiple Style="width: 350px;" runat="server">--%>
<div >
<asp:ListBox ID="ddlMultiSelect" SelectionMode="Multiple" data-placeholder="Choose …" multiple class="chosen-select" runat="server" >
</asp:ListBox>
</div>
<form>
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</form>
<header>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=ddlMultiSelect.ClientID %>").change(function () {
var arr = $(this).val();
if (typeof arr === 'object' && arr instanceof Array) {
document.getElementById('<%=lbltest.ClientID%>').value = arr.toString();
}
else { document.getElementById('<%=lbltest.ClientID%>').value = ""; }
console.log(arr);
}
)
});
</script>
</header>
然后我在 entity framework 中使用它来显示我的 Many 2 Many 编辑视图。它适用于其中一个字段,但对于另一个字段,它会生成 2 个输入框。 如果我关闭 Chosen 并使用普通的列表框,它会按每个字段的第一代控件的预期工作。所以我认为这与选择有关。
截图如下
我动了这一点
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
从用户控件(字段模板)到插入和编辑页面。配置只需要在页面加载时分配一次。现在可以了。我想现在我有一个非常好的 Many2Many 字段模板,有时我会 post 在 nuget 上。