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();
            }
        });
    });
});

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

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

2. _ddlData 选择事件之前存在的值与来自其数据源的新数据合并。

顺便说一句，我现在不想更改 SQLDataSource 或使用更新或更新的范例（如 Microsoft Entities Framework）的数据绑定组件。

Answer 1

您遇到了时间问题，例如 your previous question。

您将提交表单作为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);
}