Question

在带有WebForm引擎的.ASPX页面中＆lt;％..％＆gt;语法，我将Angular .html模板包含为部分。 .ASPX有许多服务器端控件，例如＆lt; asp：DropDownList runat =“server”＆gt;。由于Angular模板中包含的输入元素没有RuntAt属性，因此值不会发布到服务器。我可以使用角度脚本更新托管.ASPX页面上的一些隐藏的服务器端控件，但这并不理想，因为我希望尽可能保持部分通用。如何设置它们以便回发select元素中的值？感谢。

WebForm（.ASPX）

<div class="row">
  <div class="col-md-12 col-sm-12">
    <%-- to be removed --%>
    <div style="display:none">
      <uc:FaciltyServiceRole ID="FSR" runat="server" ShowFacility="false" />
    </div>

    <%--*********** inject Angular app and partial ***********--%>
    <div ng-app="ufsrAppModule">
      <%--ng-include require "single quote 'some file' inside double quote"--%>
      <div ng-include="'ngApps/fsrCascadeDropdown.html'"></div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-4 col-sm-4">
    <p>
      <label for="<%:Scheduled_Date.ClientID %>">*Scheduled Date:</label>
    </p>
  </div>
  <div class="col-md-3 col-sm-3">
    <asp:TextBox ID="Scheduled_Date" runat="server" CssClass="Scheduled_Date form-control" Enabled="False"></asp:TextBox>
  </div>
  <div class="col-md-5 col-sm-5">
    <asp:RequiredFieldValidator ID="valReqCallDate" ControlToValidate="Scheduled_Date" runat="server" ErrorMessage="Scheduled Date is required">*</asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator runat="server" ID="valRegExCallDate" ErrorMessage="Please enter a valid date" ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1\d|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]\d)\d{2}|0?2/29/((19|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$"
    ControlToValidate="Scheduled_Date">*</asp:RegularExpressionValidator>
  </div>
</div>

Angular Template Partial（.Html）

<div ng-controller="ufsrController as ufsrCtrl">
  <div class="container" ng-disabled="ufsrCtrl.disableFSR == 'true'">
    <div class="row">
      <div class="widget-body">
        <div class="col-md-6 col-sm-6">
          <div class="row" ng-show="ufsrCtrl.showFacility">
            <div class="col-md-4 col-sm-4">
              <label class="form-label">Facility:</label>
            </div>
            <div class="col-md-6 col-sm-6">
              <select ng-model="ufsrCtrl.facility" name="facility" ng-options="fac.FacilityID as fac.FacilityName for fac in ufsrCtrl.facilities" ng-disabled="(ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0)" ng-change="ufsrCtrl.facilityChanged()"
              class="form-control"></select>
            </div>
            <div class="col-md-1 col-sm-1">
              <i ng-show="ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0" class="fa fa-refresh fa-spin"></i>
            </div>
          </div>

          <div class="row">
            <input type="text" name="service" ng-model="ufsrCtrl.service.ServiceName" style="display:none" />
            <div class="col-md-4 col-sm-4">
              <label class="form-label">Service:</label>
            </div>
            <div class="col-md-6 col-sm-6">
              <select ng-model="ufsrCtrl.service" name="serviceId" ng-options="item.ServiceName for item in ufsrCtrl.services track by item.ServiceID " ng-disabled="(ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0)" ng-change="ufsrCtrl.serviceChanged()"
              class="form-control">
                <option value="">-- Choose Service --</option>
              </select>
            </div>
            <div class="col-md-1 col-sm-1">
              <i ng-show="ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0" class="fa fa-refresh fa-spin"></i>
            </div>

          </div>

          <div class="row">
            <input type="text" name="role" ng-model="ufsrCtrl.role.RoleName" style="display:none" />
            <div class="col-md-4 col-sm-4">
              <label class="form-label">Role:</label>
            </div>
            <div class="col-md-6 col-sm-6">
              <select ng-model="ufsrCtrl.role" name="roleId" ng-options="item.RoleName for item in ufsrCtrl.roles track by item.FacilityServiceRoleID" ng-disabled="(ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0)" ng-change="ufsrCtrl.roleChanged()" class="form-control">
                <option value="">-- Choose Role --</option>
              </select>
            </div>
            <div class="col-md-1 col-sm-1" title="select a Service to dismiss me">
              <i ng-show="ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0" class="fa fa-refresh fa-spin"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

我最终使用javascript按ID查找角度下拉列表，获取其值并在帖子上更新一些隐藏的输入。它可能并不优雅但有效。

角度视图模板作为webform中的部分

1 个答案: