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

Question

我定义了一个 ASP.NET 表单，其中包含以下表单元素： a TextBox、 anHiddenField和 a ，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 />");

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

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

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

顺便说一句，我目前不想SQLDataSource用更新的或更新的范例（如 Microsoft 实体框架）更改或数据绑定组件。

Answer 1

你有一个时间问题。您将提交该表单作为select活动的一部分。事件发生后，所选值将由 jQuery UI 写入表单字段select，但此代码永远不会运行。立即重新加载.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);}