Angular View-Vorlage als Teil in Webform

Question

In einer ASP.Page-Seite mit WebForm-Engine <% ..%> Syntax, ich ng-enthalten eine Angular. HTML-Vorlage als teilweise. Das .ASPX hat viele serverseitige Steuerelemente wie < asp: DropDownList runat = "Server" >. Da die in der Angular-Vorlage enthaltenen Eingabeelemente kein RuntAt-Attribut aufweisen, werden die Werte nicht auf dem Server veröffentlicht. Ich könnte eckiges Skript haben, um einige versteckte serverseitige Steuerelemente auf der hosting .ASPX-Seite zu aktualisieren, aber das ist nicht ideal, da ich die partiellen so allgemein wie möglich behalten möchte. Wie richte ich sie so ein, dass die Werte in den Select-Elementen zurückgebucht werden? Vielen Dank.

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

Ich habe schließlich Javascript verwendet, um die eckigen Dropdowns nach ihren IDs zu finden, ihre Werte zu erhalten und einige versteckte Eingaben auf dem Post zu aktualisieren. Es ist vielleicht nicht elegant, aber funktioniert.