在webform中作为局部的Angular视图模板

angular view template as partial in webform

本文关键字:Angular 视图 局部 webform      更新时间:2023-09-26

在使用WebForm引擎的。aspx页面中<%..%>语法中,我将Angular .html模板作为partial包含进来。. aspx有许多服务器端控件,如。因为Angular模板中包含的输入元素没有RuntAt属性,所以这些值不会被发送到服务器。我可以用angular脚本来更新托管. aspx页面上的一些隐藏的服务器端控件,但这并不理想,因为我想保持部分尽可能通用。如何设置它们,以便将所选元素中的值发送回来?谢谢。

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模板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>

我最终使用javascript根据它们的id找到angular下拉列表,获取它们的值并更新一些隐藏的post输入。它可能不太优雅,但很有效。