我有一个带有两个下拉列表的 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 解决方案。
最佳答案
好的,我将通过使用 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>
关于c# - 在没有 AutoPostBack 的情况下进行回发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21478799/