asp.net - 如何填写as​​p :DropDown client side?

Question

我有一个带有两个<asp:DropDown>控件的网页:

当用户选择国家时，我想填写州列表。

尝试＃1-OnSelectedIndexChanged

第一件事很简单:在第一个下拉列表的OnSelectedIndexChanged中，填写第二个框:

//be sure to set AutoPostBack of cbCountry to true in the properties window

protected void cbCountry_SelectedIndexChanged(object sender, EventArgs e)
{
   cbState.Items.Clear();
   FetchStatesForCountryIntoStateDropDown(cbState, cbCountry.SelectedValue);
   if (cbState.Items.Count > 0)
      cbState.SelectedIndex = 0;
}    

除触发页面刷新外，该程序运行良好。发送帖子时用户被打断，页面被重新加载。该页面不再是他们离开的地方，他们也不再坐在下拉菜单中。

尝试＃2-老式的kudget UpdatePanels

@Seglo calls UpdatePanels an old-fashioned kludge。但是，既然我找不到更好的东西，那就试试吧!将这些内容包装在一个更新面板中，让它神奇起来:

这样做的问题是，当 UpdatePanel更新时，它将删除这两个控件，并用新的控件替换它们。这意味着用户在第一个下拉列表中失去了焦点。人们建议 horrible kludges using javascript to try to save and restore the focus。但是我宁愿做正确的事。

尝试3-仅UpdatePanel您需要更新的内容

我不需要更新 国家下拉列表(也不需要标签)。我只有 才需要来更新 状态下拉列表；所以为什么不只将它包装在 <asp:UpdatePanel>中。实际上 this is the answer suggested on StackOverflow:

那行得通。 国家/地区下拉列表不会失去焦点。触发 OnSelectedIndexChanged事件，并填充 State 下拉列表...

...我第一次更改国家/地区下拉菜单。

如果我再次更改 国家(地区)，则会引发异常:

Invalid postback or callback argument.

不知何故，updatepanel弄乱了WebForms控件。使回发数据无效。这是有道理的，因为弄乱WebForms控件会使回发数据无效。

尝试＃4-尝试使用javascript自己伪造回发

它不会给你带来任何好处。但是 people have tried triggering a postback manually through javascript:

$('#userControl1').on('focusout', function() {
     __doPostback('UpdatePanel2UniqueId', '');
});

除了不知道 ClientID和 cbCountry的 UpdatePanel1之外，脚本不会运行；我什至不知道它是否可以解决我的问题

尝试＃5-使用 PageMethods获取状态列表。

现在，我仅链接其他人的随机建议。我花了大约4个小时才能尝试实现任何建议。这意味着我已经失去了一天半的时间来尝试填充组合框。

我对在Google上发现的每条随机建议都不能输掉一天；我需要一个实际的答案。因此，我只是将它们包括在内，目的是向脾气暴躁的人表明有研究工作(好像研究工作很重要)。

一些 people have suggested calling ASP.net PageMethods , and update the cbState in client javascript:

function GetStates(country)
{
    PageMethods.GetTeam(teamCode, CountryCallback);
}

function CountryCallback(result)
{
    var teamName = $get('TeamName');
    var seed = $get('Seed');
    var rpi = $get('RPI');
    var scoutingReport = $get('ScoutingReport');
    teamName.innerText = result.TeamName;
    seed.innerText = result.Seed;
    rpi.innerText = result.RPI;
    scoutingReport.innerText = result.ScoutingReport;
}

onchange="GetTeam(this.options[this.selectedIndex].value);"

这里的问题与尝试2相同。 viewstate将是错误的，因为我已经搞砸了ASP.net背后的表单。

似乎存在一个根本性的问题，即ASP.net和 viewstate 与客户端DOM更新从根本上不兼容。任何试图修改客户端页面的尝试都会使整个ASP.net Web窗体编程模型无效。

Answer 1

使用AJAX控制工具包...它具有一个CascadingDropDown，将是一个完美的选择! :)

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx