【发布时间】：2018-07-25 06:18:48
【问题描述】：
早安。
我的 Ajax 脚本管理器正在注册我的脚本并将我的函数添加到结束请求。这使脚本在部分更新中保持不变。
我将 DataTable 值作为项目推送到代码隐藏中的 javascript 数组。
我看到建议改用 httphandler.ashx 并使用它以 JSON 格式返回数据，但我不确定它是否能满足我的多个实例的目标，我希望能够将参数传递给 pull不同的数据不是静态的。
我的目标是创建一个带有 jquery ui 自动完成功能的 ASP Web 表单用户控件文本框，开发人员只需记住数据表和列名即可插入该文本框。
此时，我可以向它传递一个数据表和一个字符串作为文本和值的列名。
问题在于，如果一个页面上有该用户控件的多个实例，则这些控件的源会相互干扰。
我知道源数组在我实例化新控件时已经声明，这是问题的一部分，我需要能够以 $(this) 方式处理源，每个 .autocomplete 都是唯一的元素，但我无法获取它。
提前致谢。
脚本：
<script>
$(document).ready(function () {
EndRequest();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
});
function InitializeRequest(sender, args) { }
function EndRequest(sender, args) {
var data = new Array;
function pushData(dataTextField, dataValueField) {
data.push({
label: dataTextField,
value: dataValueField
});
}
$('.txtData').autocomplete({
maxResults: 20,
source: function (request, response) {
var results = $.ui.autocomplete.filter(data, request.term);
response(results.slice(0, this.options.maxResults));
},
select: function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
$(this).closest('.divMain').find('[id$="hidData"]').val(ui.item.value);
},
focus: function (event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
}
}); pushData('Field1', 'Field2');//n times
}
</script>
用户控制标记：
<asp:UpdatePanel runat="server">
<ContentTemplate>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
* html .ui-autocomplete {
height: 100px;
}
.divWrapper {
display: inline-block;
}
.divMain {
display: flex;
}
</style>
<div class="divWrapper">
<div class="divMain">
<asp:HiddenField runat="server" ID="hidData" />
<asp:TextBox runat="server" ID="txtData" CssClass="txtData" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
用户控制代码背后：
public void DataBind(DataTable dt, string DataTextField, string DataValueField)
{
string[][] arrObject = dt.AsEnumerable().Select(r => new string[] { r[DataTextField].ToString(), r[DataValueField].ToString() }).ToArray();
StringBuilder sb = new StringBuilder();
sb.Append("<script>");
sb.Append("$(document).ready(function(){");//ready
sb.Append("EndRequest();");
sb.Append("var prm = Sys.WebForms.PageRequestManager.getInstance();");
sb.Append("prm.add_initializeRequest(InitializeRequest);");
sb.Append("prm.add_endRequest(EndRequest);");
sb.Append("});");
sb.Append("function InitializeRequest(sender, args){");//init
sb.Append("}");
sb.Append("function EndRequest(sender, args){");//end
sb.Append("var data = new Array;");
sb.Append("function pushData(dataTextField, dataValueField) {");
sb.Append("data.push({");
sb.Append("label: dataTextField,");
sb.Append("value: dataValueField");
sb.Append("});");
sb.Append("}");
sb.Append("$('.txtData').autocomplete({");
sb.Append("maxResults: " + maxResults + ",");
sb.Append("source: function(request, response) {");
sb.Append("var results = $.ui.autocomplete.filter(data, request.term);");
sb.Append("response(results.slice(0, this.options.maxResults));");
sb.Append("},");
sb.Append("select: function(event, ui) {");
sb.Append("event.preventDefault();");
sb.Append("$(this).val(ui.item.label);");
sb.Append("$(this).closest('.divMain').find('[id$=\"hidData\"]').val(ui.item.value);");
sb.Append("},");
sb.Append("focus: function(event, ui){");
sb.Append("event.preventDefault();");
sb.Append("$(this).val(ui.item.label);");
sb.Append("}");
sb.Append("});");
foreach (string[] arrFields in arrObject)
{
sb.Append("pushData('" + arrFields[0] + "', '" + arrFields[1] + "');");
}
sb.Append("}");
sb.Append("</script>");
ScriptManager.RegisterStartupScript(Page, GetType(), "AutoCompleteData", sb.ToString(), false);
}
内容页面标记：
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:TabContainer runat="server" ID="tcMain" Width="100%">
<asp:TabPanel runat="server" HeaderText="Test">
<ContentTemplate>
<uc:AutoCompleteDropDown runat="server" ID="ucDDL1" />
<uc:AutoCompleteDropDown runat="server" ID="ucDDL2" />
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
后面的内容页面代码：
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Connection connection = MyConnections.GetConnection();
List<SqlParameter> sqlParams = new List<SqlParameter>() { new SqlParameter("@QueryID", "GetStuff") };
DataSet ds1 = connection.ExecuteSP("spSomeStoredProc1", sqlParams.ToArray());
ucDDL1.DataBind(ds1.Tables[0], "Field1", "Field2");
DataSet ds2 = connection.ExecuteSP("spSomeStoredProc2", sqlParams.ToArray());
ucDDL2.DataBind(ds2.Tables[0], "Field1", "Field2");
}
}
【问题讨论】：
-
请查看：stackoverflow.com/help/mcve 这个例子似乎过于复杂，可能难以复制。如果您能确定具体问题或提出更具体的示例，您可能会得到更好的回应
标签： asp.net ajax jquery-ui webforms user-controls