做回传没有的AutoPostBack [英] Doing a postback without AutoPostBack

问题描述

我有两个一个WebForm下拉列表，在第二个内容取决于第一。

I've got a WebForm with two drop down lists, where the contents of the second one depend on the first.

因此​​，如果用户改变了类别，第二下拉需要被填充有子类别的列表。

So if the user changes the category, the second dropdown needs to be filled with the list of subcategories.

这听起来像一个的AutoPostBack典型的工作。结果
然而，有一点用的AutoPostBack一个问题：如果列表不掉线打开，用户使用键盘来做出选择，回发的第一个按键后立即发生。这prevents从向下滚动列表中的向下箭头，或者键入类别的名称的用户。

This sounds like a typical job for AutoPostBack.
However, there's a bit of a problem with AutoPostBack: if the list isn't dropped open, and the user uses the keyboard to make the choice, the postback happens right after the first keystroke. This prevents the user from scrolling down the list with the down arrow, or typing the name of the category.

这发生在Chrome和IE和Opera，但不是在Firefox浏览器。火狐激发离开控件（tab键切换到下一个控件），只有当，就像它会在列表被丢弃打开的onchange 事件，而这正是我想要的其他浏览器做太多。

This happens in Chrome and IE and Opera, but not in Firefox. Firefox fires the onchange event only when leaving the control (tabbing to the next control), just like it would when the list was dropped open, and that's what I want the other browsers to do too.

任何解决方案，我怎么能做到这一点？

Any solutions how I can achieve this?

我试图删除的AutoPostBack 属性，并使用的onblur ，但显然该页面的工作方式不同与的AutoPostBack比没有，因为浏览器开始抱怨JavaScript错误。

I tried to remove the AutoPostBack attribute and use onblur, but apparently the page works differently with AutoPostBack than without, because the browsers start complaining about Javascript errors.

现在，因为我们都这么喜欢的jsfiddle的，这里有一个。它实际上并不做任何事，但它可以显示的问题。点击第一个下拉列表，然后再次单击关闭列表。 （这是当你通过使用Tab键的形式浏览会发生什么：下拉列表中不开放）现在键入一个字母或向下箭头。火狐改变当前的选择，并等待你去做其他任何事情，但Chrome和IE和Opera都试图立即提交表单，与激烈的结果。

Now since we're all so fond of jsFiddle, here's one. It doesn't actually do anything, but it can demonstrate the problem. Click on the first dropdown, then click again to close the list. (This is what happens when you navigate through the form with the tab key: dropdown lists don't open up.) Now type a letter or the down arrow. Firefox changes the current selection and waits for you to do anything else, but Chrome and IE and Opera all attempt to submit the form immediately, with drastic results.

所以，我怎么能避免呢？并注意简单地改变小提琴可能是不够的，它必须是翻译回一个ASP.NET的解决方案。

So how can I avoid that? And note that simply changing the fiddle may not be enough, it must be translatable back to an ASP.NET solution.

推荐答案

确定这里就是我想通过使用Ajax和避免使用自动回都在一起来填充我的子分类做。

Ok here is how I'd do it by using ajax and avoiding the use of AutoPostback all together to populate my sub category.

创建一个对象，再presents选择列表中的JSON对象发送回。

Create an object that represents the select list json object to send back.

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

然后创建一个PageMethod的：

Then create a 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 =静态

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

Then use the following 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>

这篇关于做回传没有的AutoPostBack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！