C# 在没有自动回发的情况下执行回发

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

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

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

这在Chrome、IE和Opera中都会发生，但在Firefox中不会发生。Firefox只有在离开控件（切换到下一个控件）时才会触发

onchange

事件，就像打开列表时一样，我希望其他浏览器也能这样做

有什么解决办法吗？我怎样才能做到这一点

我试图删除

AutoPostBack

属性并使用

onblur

，但显然，使用AutoPostBack与不使用AutoPostBack时页面的工作方式不同，因为浏览器开始抱怨Javascript错误

既然我们都很喜欢JSFIDLE。它实际上什么都不做，但它可以证明问题的存在。单击第一个下拉列表，然后再次单击以关闭列表。（使用tab键浏览表单时会发生这种情况：下拉列表不会打开。）现在键入字母或向下箭头。Firefox会更改当前的选择，并等待您做任何其他事情，但Chrome、IE和Opera都会尝试立即提交表单，结果非常糟糕

---

那我怎么才能避免呢？请注意，仅仅更改fiddle可能还不够，它必须可以翻译回ASP.NET解决方案。

好的，下面是我如何使用ajax和避免使用AutoPostback来填充我的子类别

创建一个表示要发回的select list 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;
    }

更改下拉列表以使用

clientmode=“Static”

然后使用以下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>

$（函数（）{
变量$cat=$（“#类别”）；
$cat.click（函数（）{
var catId=$cat.val（）；
$.ajax({
类型：“POST”，
url:“Default.aspx/GetSubCategories”，
数据：“{Id:+catId+”}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（msg）{
var subs=msg.d；
//空选择
var$ddlSubCategory=$（“#ddlSubCategory”）；
$ddlSubCategory.empty（）；
$。每个（子项，函数（索引，子项）{
$ddlSubCategory.append（$（''）{
值：sub.Id，
文本：子文本
}));
});
}
});
});
});

很抱歉，我再也没有回到这里。我必须做的其他事情突然变得更加紧迫。无论如何，我确实实现了这一点，但要绕过这种web方法只能是静态的限制并不容易。因此，我最终将大量信息发送到客户端（在隐藏输入中），然后将其发送回函数参数中的web控件。如果有更优雅的方式，我会很高兴的@李斯特先生，没问题。re：紧急情况，我知道会是什么样子。是的，不幸的是你必须把东西寄回给客户。我现在主要在MVC工作，所有的东西都要送回去，所以我已经习惯了。在web表单中似乎有点脱节，但防止回发可以提供良好的用户体验。祝其余的人好运。：）

<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>

<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>