javascript - ASP.NET 下拉列表在服务器button_click 中为空，ddl 已在客户端填充

Question

我有一个表格可以更改一些地址信息。将一些通用邮政编码放入文本框中时，会触发客户端事件以使用兼容的城市填充下拉列表。

填充是正确的，问题是无论我选择哪个值之后，因为当我单击按钮保存数据时，服务器函数 button_click 中的下拉列表有 SelectedItem null，让 aso 列表项计数为 0..

我放置了另一个下拉列表只是为了测试，其中包含一些随机城市，如果我通过相同的 jquery 函数在其上设置一个值，我可以在服务器函数中正确地看到它，所以问题似乎出在事实上，另一个是在客户端填充的。

我见过这个:Asp.Net: Restoring client-side SelectedItem of DropDownList on server-side以及设置隐藏字段值的解决方法，但我想知道是否有更正确的方法来执行此操作..

<table>
    <tr>
        <td>
            <label>Address</label><br />
            <asp:TextBox ID="txtAddress" CssClass="testo" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <label>Province</label><br />
            <asp:TextBox ID="txtProvince" runat="server" />
        </td>
        <td>
            <label>City</label><br />
            <asp:DropDownList ID="ddlCity" runat="server" />
        </td>
        <td>
            <label>ZIP</label><br />
            <asp:TextBox ID="txtZIP" />
        </td>
    </tr>
    <tr>
        <td>
            <!-- Just for test set ddl by jQuery -->
            <asp:DropDownList ID="ddlTest" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:ImageButton ID="btnSave" runat="server"
                OnClick="btnSave_Click" />
        </td>
    </tr>
</table>

$(function () {

    $(document).on('keyup', 'input[id*="txtZIP"]', function () { 
        var input = $(this);
        if (input[0].selectionStart == 5) {
            $.ajax({ 
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "CleanAddress.aspx/txtZIP_TextChanged",
                data: "{ZIP:'" + input.val() + "'}",
                dataType: "json",
                success: function (response) {
                    var cities = $.parseJSON(JSON.stringify(response.d)); 
                    if (comuni.length > 0) {
                        $("[id*=txtProvince]").val(cities[0].ID_PROVINCE);
                        $("[id*='ddlCity']").empty();
                        $.each(cities, function (key, value) {
                            $("[id*='ddlCity']").append($("<option />
").val(value.ID_CITY).text(value.CITY));
                        });
                        $("[id*='ddlCity']").removeAttr('disabled');
                        $("[id*='ddlTest']").val(9); // Just for test
                        $("[id*='ddlComuneDom']").val(cities[0].ID_CITY);
                        //alert($("[id*='ddlTest']").val());
                        //alert($("[id*='ddlCity']").val());
                        }
                    }
                },
                error: function (result) {
                    alert("Errore! " + result.status + " - " + result.statusText);
                }
            });
        }
    });

[WebMethod]
    public static List<Comuni> txtZIP_TextChanged(string ZIP)
    {
        try
        {
            List<Cities> cities = new List<Cities>();
            if ((ZIP.Trim() != "") && (ZIP.Length == 5))
            {
                dcListCitiesDataContext dc = new dcListCitiesDataContext();

                if (dc.Cities.Where(c => c.ZIP.Equals(ZIP)).Count() > 0)
                {
                    string province = dc.Cities.Where(c => c.ZIP.Equals(ZIP)).First().ID_PROVINCE.ToUpper();
                    if (province != null)
                    {
                        cities = dc.Cities.Where(c => c.ZIP.Equals(ZIP)).ToList();
                        return cities;
                    }

                }
            }
            return cities;
        }
        catch (Exception ex)
        {
            Utility.WriteLog("CleanAddress - txtZIP_TextChanged " + " - " + ex.Message, TipoLog.Error);
            throw;
        }
    }

    protected void btnSave_Click(object sender, ImageClickEventArgs e)
{
    // Here I've always ddlCity empty
    string cities= "";
    if (ddlCity.SelectedItem != null)
        cities= ddlCity.SelectedItem.ToString();
    else
        cities= ddlTest.SelectedItem.ToString();
    (...)
}

Answer 1

在 asp webforms 中，您永远不应该在客户端添加服务器端控件。由于应用了 View 状态等抽象，它不会很好地工作，并且可能会导致非常有趣的问题。

如果您需要以“Web 表单”方式填充列表，您通常会将下拉列表放置在更新面板中，并通过部分回发来加载它。然后您可以添加到项目中，或者在服务器端进行数据绑定(bind)以填充它。

如果您不喜欢此选项，请将其设为标准选择，并且不要尝试使用服务器端控件。当您提交表单时，您应该仍然能够获取提交的值，并且它会更干净。