角度視圖模板作為Webform中的局部視圖

Question

在具有WebForm引擎<％..％>語法的.ASPX頁面中，我包括了一個Angular .html模板作為部分模板。 .ASPX具有許多服務器端控件，例如<asp：DropDownList runat =“ server”>。 由於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> 

角模板部分（.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查找角度下拉列表，獲取其值並在發布時更新了一些隱藏的輸入。 它可能並不優雅，但確實可行。