Angular视图中ASP.NET DropDownList SelectedIndexChange事件未触发求助

我来帮你分析下这个问题——你遇到的情况其实是Angular单页应用和ASP.NET Web Forms服务器控件的机制冲突导致的，咱们一步步拆解解决：

核心问题根源 #

1. 页面架构冲突：你的Admission.aspx是Angular主页面（带有ng-app和ng-view），而Course.aspx是一个完整的ASP.NET Web Forms页面（自带<form runat="server">），被Angular路由动态加载到ng-view中。ASP.NET服务器控件的回发依赖于页面初始化时的ViewState、控件树结构和原始form上下文，动态插入DOM的控件无法被ASP.NET页面生命周期正确识别，所以SelectedIndexChanged事件根本触发不了。
2. 事件绑定缺失：即使不考虑Angular的影响，你的ddlBUName标签也没添加OnSelectedIndexChanged属性，后台的ddlBUName_SelectedIndexChanged方法无法和控件关联（这在正常Web Forms页面里也是事件不触发的直接原因）。

解决方案 #

方案一：适配Angular单页模式（推荐）

既然用了Angular做单页应用，就别把完整的Web Forms页面当视图用，改用Angular前端逻辑+后端API的方式实现联动，体验更流畅（无页面刷新）。

1. 创建Angular模板文件：把Course.aspx改成course.html模板，用Angular指令渲染下拉框：

<div>
  <section>
    <div class="row">
      <div class=" col-sm-8 col-lg-offset-3 col-md-offset-3 col-sm-offset-3">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="form-group">
              <label>Select Board/University:</label>
              <select class="form-control" ng-model="selectedBU" ng-options="bu.BU_Name as bu.BU_Name for bu in buList">
                <option value="">Select Board/University</option>
              </select>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-3">
            <div class="form-group">
              <label>Select Class:</label>
              <select class="form-control" ng-model="selectedClass" ng-options="cls.Class_Name as cls.Class_Name for cls in classList">
                <option value="">Select Class</option>
              </select>
            </div>
          </div>
          <!-- 购物车部分保留原有Angular逻辑 -->
          <div class="col-lg-1 col-md-1 col-sm-1">
            <label></label>
            <div class="form-group">
              <a href="#!pay" class="glyphicon glyphicon-shopping-cart" style="font-size: 35px;color: lightblue;text-decoration: none">
                <span class="badge"> {{cartItems}}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 课程列表部分保留原有Angular渲染逻辑 -->
  <section id="aboutUs">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="aboutus_area wow fadeInLeft">
            <h2 class="title_two">Available Courses</h2>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  </section>
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2">
      <div class="row text-center">
        <div class="col-md-3" ng-repeat="book in bookList">
          <div class="thumbnail">
            <a href="/w3images/lights.jpg">
              <img ng-src="{{book.url}}" alt="Lights">
            </a>
            &nbsp;&nbsp;&nbsp;&nbsp;<div class="caption">
              <p>{{book.subject}}</p>
              <p>{{book.price}}</p>
              <button class="btn btn-primary" ng-click="btnControl1($event, book.subject,book.price)">Add To Cart</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2. 编写后端数据接口：创建ASP.NET一般处理程序（.ashx）或Web API，提供数据接口：

   • GetBUList.ashx：返回Board/University列表
   • GetClassList.ashx?buName=xxx：根据选中的BU返回对应Class列表

3. 在Angular控制器中实现联动逻辑：

angular.module('myApp').controller('admissionController', function($scope, $http) {
  // 加载Board/University列表
  $http.get('GetBUList.ashx')
    .then(function(res) {
      $scope.buList = res.data;
    });

  // 监听选中的BU，动态加载Class列表
  $scope.$watch('selectedBU', function(newVal) {
    if (newVal) {
      $http.get(`GetClassList.ashx?buName=${encodeURIComponent(newVal)}`)
        .then(function(res) {
          $scope.classList = res.data;
        });
    } else {
      $scope.classList = [];
    }
  });

  // 原有购物车逻辑保留
  $scope.cartItems = 0;
  $scope.btnControl1 = function(event, subject, price) {
    $scope.cartItems++;
    // 其他购物车操作逻辑
  };
});

4. 修改Angular路由：让路由指向新的course.html模板。

方案二：保留Web Forms独立页面（临时方案）

如果必须保留Course.aspx作为独立Web Forms页面，不要通过Angular路由加载它，直接通过链接跳转访问。同时修正控件配置：
在ddlBUName标签中添加事件绑定属性：

<asp:DropDownList DataSourceID="fetchBUName" CssClass="form-control" DataTextField="BU_Name" DataValueField="BU_Name" 
                  ID="ddlBUName" AppendDataBoundItems="true" runat="server" AutoPostBack="true"
                  OnSelectedIndexChanged="ddlBUName_SelectedIndexChanged">
  <asp:ListItem>Select Board/University</asp:ListItem>
</asp:DropDownList>

这样页面就能正常回发，触发后台事件填充第二个下拉框。

总结 #

推荐用方案一，因为Angular单页模式和Web Forms回发模式本质不兼容，前端+API的方式更符合现代单页应用设计，用户体验也更好。如果只是临时需求，方案二可以快速解决问题，但长期来看建议逐步迁移到前端框架的逻辑模式。

内容的提问来源于stack exchange，提问作者Amit Yadgiri