Question

我有一个ASPX页面（以及vb.net中的一个代码隐藏）。而且，我有另一个有角度的HTML。进入这个html页面有一个iFrame。

我需要将此aspx页面显示到此iFrame中，但为了显示此aspx页面，我需要将对象参数作为POST请求传递。我不知道怎么能这样做。

我正在使用AngularJS 1.6版本。

这是我的 EDIT.HTML 页面，其中包含我的iFrame：

<div ng-controller="settingsController">
<form name="settingsForm" ng-cloak>
    <div>
        <md-content>
            <md-toolbar>
                <div class="md-toolbar-tools">
                    <md-truncate>
                        Save profile edited<br />
                    </md-truncate>
                    <span flex></span>
                </div>
            </md-toolbar>
        </md-content>
    </div>

    <div>
        <iframe ng-src="{{detailFrame}}" align="middle" width="800" height="600" frameborder="0" margin="0" padding="0" border="none" background=""></iframe>
    </div>
</form>

这是我的 AngularJS 控制器：

$scope.detailFrame = $sce.trustAsResourceUrl("http://test.com/mypage.aspx/UpdateProfile");

而且，这是我的 vb.net 代码隐藏。

Imports System.Web.Services

Public Class MyProfilePages
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    <WebMethod>
    Public Shared Function UpdateProfile(editedProfile As Profile) As Boolean

    End Function


End Class

Answer 1

我找到了问题的答案。有必要创建一个指令。

angular.module('TestIframe', []).
directive('loadIframe', function ($compile, BuildForm) {
  var iframeTemplate = BuildForm.getForm() + BuildForm.getIframe();
  return {
    restrict: 'E',
    template: iframeTemplate
  }
}).
factory('BuildForm', function (DataService) {
  function getForm() {
    return generateForm('http://posttestserver.com/post.php', DataService.getData());
  }

  function generateForm(path, params, method) {
    method = method || "post"; // Set method to post by default if not specified.

    var form = '<form action="'+ path + '" method="POST" target="hidden_iframe">';

    for(var key in params) {
      if(params.hasOwnProperty(key)) {
        form += '<input type="hidden" name="' +key + '" value="' + params[key] + '" />'
      }
    }

    form += '<button type="submit">Click Me</button></form>';
    return form;
  }

  function getIframe() {
    return '<iframe width="500px" src="http://posttestserver.com/post.php" name="hidden_iframe"></iframe>'
  }

  return {
    getForm: getForm,
    getIframe: getIframe
  }
}).
factory('DataService', function () {
  function getData() {
    var data = {
      param1: 'value1',
      param2: 'value2'
    };
    return data;
  }
  return {
    getData: getData
  }
});

http://jsbisht.in/load-iframe-content-using-post-request-with-angularjs/

使用iFrame，Angular JS和VB.NET通过HTTP POST请求发送参数

1 个答案: