javascript强制重新加载ASP.NET表单与JQuery自动完成文本框填充冲突

Question

我定义了一个ASP.NET表单，其中包括以下表单元素：像这样定义的TextBox、HiddenField和DropDownList：

<asp:TextBox ID="_txtData" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="_hdnData" runat="server" ClientIDMode="Static" Value="" />
<asp:DropDownList ID="_ddlData" runat="server" DataSourceID="_sdsData" DataTextField="data" DataValueField="id" AppendDataBoundItems="true" AutoPostBack="true" >
<asp:ListItem Text="TUTTI" Value="" Selected="True" />
</asp:DropDownList>

_ddlData是从这样定义的数据源馈送的：

<asp:SqlDataSource
ID="_sdsData" 
runat="server"
ConnectionString="<%$ ConnectionStrings:db %>"
ProviderName="<%$ ConnectionStrings:db.ProviderName %>"
SelectCommand="
SELECT 
id, 
data
FROM 
table_data
WHERE 
(@id IS NULL) OR (id = @id)
ORDER BY targa">
<SelectParameters>
<asp:ControlParameter 
ControlID="_hdnData" 
PropertyName="Value" 
Direction="Input" 
ConvertEmptyStringToNull="true" 
DbType="Int32" 
DefaultValue="" 
Name="id" />
</SelectParameters>
</asp:SqlDataSource> 

_hdnData和_txtData通过javascript/JQuery以这种方式馈送：

【原始代码】

var _hdnData = null;
var _txtData = null;
$(function () {
_hdnData = $("input[id$='_hdnData']");
_txtData = $("input[id$='_txtData']");
GetData(_txtData , _hdnData );
});
function GetData(source_widget, dest_widget) {
$.ajax({
type: "POST",
url: "/Service/WSDataService.asmx/GetData",
dataType: "json",
data: "{}",
contentType: "application/json; charset=utf-8",
success: function (data) {
var datafromServer = data.d.split("<br />");
source_widget.autocomplete({
source: datafromServer,
select: function (event, ui) {
var _data = ui.item.value;
var _tokens = _data.split("t");

if (_tokens.length < 3)
return;
var _value = _tokens[_tokens.length - 1].replace(']', '').replace('[', '');
dest_widget.val(_value).closest("form").submit();
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}

[JQuery优化代码由@Tomalak]提供

var _hdnData = null;
var _txtData = null;
$.postJSON = function (url, data, success) {
return $.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
success: success || null
});
};
var raw_data = $.postJSON("/Service/WSDataService.asmx/GetData", {})
.then(function (data) {
return data.d.split("<br />");
})
.fail(function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
});
$(function () {
raw_data.done(function (items) {
$("input[id$='_txtData']").autocomplete({
source: items,
select: function (event, ui) {
var _data = ui.item, _value;
// calculate _value ...
$("input[id$='_hdnData ']")
.val(_value)
.closest("form").submit();
}
});
});
});

JQueryautocomplete的选择事件发生时，表单被提交，一旦重新加载，我注意到两个主要问题：

1. _txtData设置为用户在选择事件发生时输入的部分值(即不是autocomplete菜单上选择/可见的实际值(

2. select事件之前出现的_ddlData值将与来自其数据源的新数据合并。

BTW我现在不想用更新或更新的范式(如Microsoft实体框架(更改SQLDataSource或数据绑定组件。

Answer 1

您遇到了时间问题，就像前面的问题一样。

您正在作为select活动的一部分提交表格。在select事件之后，jQuery UI会将选定的值写入表单字段，但此代码从未运行。.closest("form").submit()会立即重新加载页面。此时，自动完成字段仍然只包含用户键入的内容。

快速而肮脏的解决方案是在短时间延迟后发送表单，给其他事件一个完成的机会。

// ... 
select: function (event, ui) {
var _data = ui.item,
_value,
$form = $(this).closest("form");
// calculate _value ...
$("input[id$='_hdnData ']").val(_value);
setTimeout(function () { $form.submit(); }, 50);
}