c# - 在没有 AutoPostBack 的情况下进行回发

Question

我有一个带有两个下拉列表的 WebForm，其中第二个的内容取决于第一个。

因此，如果用户更改类别，则第二个下拉列表需要填写子类别列表。

这听起来像是 AutoPostBack 的典型工作。
但是，AutoPostBack 有一点问题:如果列表没有打开，并且用户使用键盘进行选择，则回发会在第一次击键后立即发生。这可以防止用户使用向下箭头向下滚动列表或键入类别名称。

这种情况发生在 Chrome、IE 和 Opera 中，但不会发生在 Firefox 中。 Firefox 仅在离开控件(跳转到下一个控件)时触发 onchange 事件，就像打开列表时一样，这也是我希望其他浏览器也这样做。

有什么解决方案可以实现吗？

我尝试删除 AutoPostBack 属性并使用 onblur，但显然使用 AutoPostBack 时页面的工作方式与不使用时不同，因为浏览器开始提示 Javascript 错误。

既然我们都非常喜欢 jsFiddle，here's one .它实际上没有做任何事情，但它可以证明问题。单击第一个下拉菜单，然后再次单击以关闭列表。 (当您使用 Tab 键浏览表单时会发生这种情况:下拉列表不会打开。)现在键入一个字母或向下箭头。 Firefox 会更改当前选择并等待您执行任何其他操作，但 Chrome 和 IE 以及 Opera 都会尝试立即提交表单，结果非常糟糕。

那我该如何避免呢？请注意，仅更改 fiddle 可能还不够，它必须可转换回 ASP.NET 解决方案。

Answer 1

好的，我将通过使用 ajax 并避免同时使用 AutoPostback 来填充我的子类别。

创建一个对象，表示要发回的选择列表 json 对象。

    public class SelectItem
    {
        public string Id { get; set; }
        public string Text { get; set; }
    }

然后创建一个PageMethod:

    [WebMethod]
    public static List<SelectItem> GetSubCategories(string Id)
    {
        // Returning dummy data for demo purposes
        var subCats = new List<SelectItem>();

        if (Id == "1")
        {
            subCats.Add(new SelectItem { Id = "1", Text = "1 Subs"});
        }
        else if (Id == "2")
        {
            subCats.Add(new SelectItem { Id = "2", Text = "2 Subs"});
        }

        return subCats;
    }

添加脚本管理器和EnablePageMethods即

<asp:ScriptManager runat="server" EnablePageMethods="true">
 </asp:ScriptManager>

更改下拉列表以使用 ClientIDMode="Static"

<asp:DropDownList Id="ddlCategory" runat="server" ClientIDMode="Static">
    <asp:ListItem Value ="1" Text ="One"></asp:ListItem>
    <asp:ListItem Value ="2" Text ="Two"></asp:ListItem>
</asp:DropDownList>

<asp:DropDownList Id="ddlSubCategory" runat="server" ClientIDMode="Static">
</asp:DropDownList>

然后使用以下 jQuery:

<script type="text/javascript">
    $(function () {

        var $cat = $('#ddlCategory');

        $cat.click(function () {

            var catId = $cat.val();

            $.ajax({
                type: "POST",
                url: "Default.aspx/GetSubCategories",
                data: "{ Id: " + catId + " }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {

                    var subs = msg.d;
                    // empty selection
                    var $ddlSubCategory = $('#ddlSubCategory');
                    $ddlSubCategory.empty();

                    $.each(subs, function (index, sub) {
                        $ddlSubCategory.append($('<option/>', {
                            value: sub.Id,
                            text: sub.Text
                        }));
                    });

                }
            });
        });

    });

</script>