ASP.NET UpdatePanel 的 Select2 JQuery 问题
Posted
技术标签:
【中文标题】ASP.NET UpdatePanel 的 Select2 JQuery 问题【英文标题】：Select2 JQuery issue with ASP.NET UpdatePanel 【发布时间】：2014-12-05 01:00:00 【问题描述】：有一个我被要求使用 Select2 JQuery 库增强的现有解决方案。
有一个带有保存按钮的updatepanel。在那个 updatepanel 上是一个 ASP.NET DropDownList。
文件准备好我发布
$('.dropdownspecificclass').select2();
当页面首次呈现时，它看起来与预期一样，DropDownList 具有 Select2 提供的标签视图。
单击保存按钮，保存过程完成async 没有刷新页面，但是 Select2 下拉列表失去了 Select2 样式，现在看起来像常规下拉。
如果我尝试将 Select2 类应用于控件的 CssClass 属性，则客户端上会出现 javascript 错误。 "未为 Select2 selectControlName 定义未捕获的查询函数"
想法？
【问题讨论】：
【参考方案1】：我有同样的问题。不要在 document.ready 函数中给出命令，而是在 pageLoad 函数中给出它。 pageLoad 函数将在部分回发期间执行。
function pageLoad(sender, args)
$(".dropdownspecificclass").select2();
【讨论】：
这解决了我的问题，有趣的是因为 pageLoad 在部分回发期间被执行！谢谢。【参考方案2】：根据设计和documentation of select2 select html 元素不需要任何特殊解析（数据从 select 的选项标签解析），以限制选择器仅选择元素（在上述情况下，“ASP.NET DropDownList”呈现作为选择html元素）我建议在下面更改
和
“未为 Select2 定义未捕获的查询函数”异常通常发生在选择元素以外的情况。
//Replace your selector by prefixing select as below and then give a try
$('select.dropdownspecificclass').select2();
【讨论】：
【参考方案3】：示例代码，带有 select2 和引导程序的 asp.net 下拉列表：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo_Select2.aspx.cs" Inherits="Demo_Select2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/bootstrap-select.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-select.min.js"></script>
<script src="Scripts/select2.min.js"></script>
<link href="Content/css/select2.css" rel="stylesheet" />
<link href="Content/select2-bootstrap.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript">
function pageLoad()
$(".js-example-placeholder-single").select2(
theme: "bootstrap",
placeholder: "Select Item",
allowClear: true
);
</script>
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" class="form-control" AutoPostBack="true">
<asp:ListItem></asp:ListItem>
<asp:ListItem>test b1</asp:ListItem>
<asp:ListItem>test b2</asp:ListItem>
<asp:ListItem>test b3</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:DropDownList ID="DropDownList2" runat="server" class="form-control js-example-placeholder-single" AutoPostBack="true">
<asp:ListItem></asp:ListItem>
<asp:ListItem>test c1</asp:ListItem>
<asp:ListItem>test c2</asp:ListItem>
<asp:ListItem>test c3</asp:ListItem>
</asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList3" runat="server" class="form-control js-example-placeholder-single" AutoPostBack="true">
<asp:ListItem></asp:ListItem>
<asp:ListItem>test d1</asp:ListItem>
<asp:ListItem>test d2</asp:ListItem>
<asp:ListItem>test d3</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
【讨论】：
【参考方案4】：问题不是 select2 。这似乎是一个已知问题，我想你一定会从这里得到一些帮助：
Conflicts between ASP.NET AJAX UpdatePanels & jQuery functions.
在触发任何 ajax 后有关于 jquery 问题的完整解释，并且还有各种建议的解决方法。
但是如果以上都没有问题，你可以尝试重新初始化 .select2() 到你的 async 的 .done() 事件。 p>
【讨论】：
我们使用的 JQuery 版本我相信可以解决客户端绑定事件的问题。所有其他使用 Jquery 的响应式逻辑继续工作。例如，我们使用 $(selector).on("click") 而不是 $(selector).click。我相信像现场这样的作品，并关注变化。 .done() 是指 endRequestHandler 吗？我们确实在 endRequestHandler 中重新初始化，但没有成功。以上是关于ASP.NET UpdatePanel 的 Select2 JQuery 问题的主要内容，如果未能解决你的问题，请参考以下文章
带有 ASP.NET 复选框触发器的 asp:UpdatePanel
ASP.NET DropDown SelectedIndexChanged 未在 Firefox 中使用 UpdatePanel 触发
Asp.net WebForm 中 UpdatePanel 内的模板文本框字段