angular view template as partial in webform

Question

In a .ASPX page with WebForm engine <%..%> syntax, I ng-included an Angular .html template as partial. The .ASPX has many server side controls such as <asp:DropDownList runat="server">. Since the input elements included in Angular template don't have RuntAt attribute, the values are not posted to the server. I could have angular script to update some hidden server side controls on the hosting .ASPX page, but that's not ideal since I want to keep the partial as generic as possible. How do I set them up so that the values in the select elements are posted back? Thanks.

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

I eventually used javascript to find the angular dropdowns by their IDs, get their values and update some hidden inputs on post. It may not be elegant but worked.