我的Ajax脚本管理器正在注册我的脚本并将我的功能添加到结束请求中。这使得脚本在部分更新中保持不变。
我将DataTable值作为项目推送到代码隐藏中的javascript数组。
我看到使用httphandler.ashx的建议而是使用它来返回数据作为JSON，但我不确定它是否会满足我的多个实例的目标，我希望能够将它传递给参数拉不同的数据不是静态的。
我的目标是使用jquery ui autocomplete创建一个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");
}
}
答案 0 :(得分：0)
如果有人有兴趣的话。我不得不改变我在几个地方使用jquery选择器的方式。我踩着我的其他$（＆＃39; .autocompletes＆＃39;）。我还使用了控件的客户端ID和id
脚本：
<script>
$(document).ready(function () {
EndRequestucDDL1();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequestucDDL1);
prm.add_endRequest(EndRequestucDDL1);
});
function InitializeRequestucDDL1(sender, args) {
}
function EndRequestucDDL1(sender, args) {
var data = new Array;
function pushData(dataTextField, dataValueField) {
data.push({
label: dataTextField,
value: dataValueField
});
}
var uc = $('#ContentPlaceHolder1_tcMain_ctl00_ucDDL1_txtData');
$(uc).autocomplete({
maxResults: 2,
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');
}
</script>
代码背后：
public void DataBind(DataTable dt, string DataTextField, string DataValueField)
{
var uc = this;
string[][] arrObject = dt.AsEnumerable().Select(r => new string[] { r[DataTextField].ToString(), r[DataValueField].ToString() }).ToArray();
StringBuilder sb = new StringBuilder();
sb.AppendLine("<script>");
sb.AppendLine("$(document).ready(function(){");//ready
sb.AppendLine("EndRequest" + this.ID + "();");
sb.AppendLine("var prm = Sys.WebForms.PageRequestManager.getInstance();");
sb.AppendLine("prm.add_initializeRequest(InitializeRequest" + this.ID + ");");
sb.AppendLine("prm.add_endRequest(EndRequest" + this.ID + ");");
sb.AppendLine("});");
sb.AppendLine("function InitializeRequest" + this.ID + "(sender, args){");//init
sb.AppendLine("}");
sb.AppendLine("function EndRequest" + this.ID + "(sender, args){");//end
sb.AppendLine("var data = new Array;");
sb.AppendLine("function pushData(dataTextField, dataValueField) {");
sb.AppendLine("data.push({");
sb.AppendLine("label: dataTextField,");
sb.AppendLine("value: dataValueField");//ContentPlaceHolder1_tcMain_ctl00_ucDDL1_ctl00
sb.AppendLine("});");
sb.AppendLine("}");
sb.AppendLine("var uc = $('#" + this.txtData.ClientID + "');");
sb.AppendLine("$(uc).autocomplete({");
sb.AppendLine("maxResults: " + maxResults + ",");
sb.AppendLine("source: function(request, response) {");
sb.AppendLine("var results = $.ui.autocomplete.filter(data, request.term);");
sb.AppendLine("response(results.slice(0, this.options.maxResults));");
sb.AppendLine("},");
sb.AppendLine("select: function(event, ui) {");
sb.AppendLine("event.preventDefault();");
sb.AppendLine("$(this).val(ui.item.label);");
sb.AppendLine("$(this).closest('.divMain').find('[id$=\"hidData\"]').val(ui.item.value);");
sb.AppendLine("},");
sb.AppendLine("focus: function(event, ui){");
sb.AppendLine("event.preventDefault();");
sb.AppendLine("$(this).val(ui.item.label);");
sb.AppendLine("}");
sb.AppendLine("});");
foreach (string[] arrFields in arrObject)
{
sb.AppendLine("pushData('" + arrFields[0] + "', '" + arrFields[1] + "');");
}
sb.AppendLine("}");
sb.AppendLine("</script>");
ScriptManager.RegisterStartupScript(Page, GetType(), "AutoCompleteData" + this.ID, sb.ToString(), false);
}