如何在AngularJS 1.6的iframe中通过POST传递对象加载ASPX页面？

首先得纠正一个小误区：你之前把detailFrame指向了WebMethod的地址，这其实不对——WebMethod是用来做AJAX调用的，不是直接作为页面URL加载的，直接访问它只会返回JSON/XML，不会渲染ASPX页面。我们需要换个思路，用动态表单提交的方式来实现iframe的POST加载。

步骤1：修改AngularJS页面和控制器 #

先给iframe加上name属性（方便表单指定提交目标），去掉原来的ng-src：

<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>
 <!-- 增加name属性，去掉ng-src -->
 <iframe id="profileFrame" name="profileFrame" align="middle" width="800" height="600" frameborder="0" margin="0" padding="0" border="none" background=""></iframe>
 </div>
 </form>
</div>

然后在控制器里，动态创建一个隐藏表单，把要传递的Profile对象转成表单字段，提交到ASPX页面，目标就是这个iframe：

angular.module('yourAppName').controller('settingsController', ['$scope', function($scope) {
  // 假设这是你要传递的Profile对象
  $scope.editedProfile = {
    Name: "Heron",
    Email: "heron@example.com",
    // 其他属性根据你的Profile类补充
  };

  // 封装POST到iframe的方法
  const postProfileToIframe = () => {
    const iframe = document.getElementById('profileFrame');
    const form = document.createElement('form');
    
    // 设置表单的提交地址（指向ASPX页面本身，不是WebMethod）
    form.action = 'http://test.com/mypage.aspx';
    form.method = 'POST';
    form.target = 'profileFrame'; // 对应iframe的name属性
    
    // 把Profile对象的每个属性转成隐藏表单字段
    Object.keys($scope.editedProfile).forEach(key => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = $scope.editedProfile[key];
      form.appendChild(input);
    });

    // 也可以把整个对象序列化成JSON字符串传递（适合复杂对象）
    /*
    const jsonInput = document.createElement('input');
    jsonInput.type = 'hidden';
    jsonInput.name = 'profileJson';
    jsonInput.value = JSON.stringify($scope.editedProfile);
    form.appendChild(jsonInput);
    */
    
    // 把表单加到页面并提交，提交后移除
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
  };

  // 页面初始化时执行提交
  postProfileToIframe();
}]);

步骤2：修改VB.NET后台代码 #

在ASPX的Page_Load方法里接收POST参数，构造Profile对象后调用你的UpdateProfile方法：

Imports System.Web.Services
Imports System.Web.Script.Serialization ' 如果用JSON传递需要这个引用

Public Class MyProfilePages
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        ' 判断是否是POST请求
        If Page.IsPostBack Then
            ' 方式1：逐个接收表单字段（对应控制器的第一种写法）
            Dim profile As New Profile()
            profile.Name = Request.Form("Name")
            profile.Email = Request.Form("Email")
            ' 补充其他属性的赋值

            ' 方式2：解析JSON字符串（对应控制器的第二种写法）
            ' Dim jsonStr As String = Request.Form("profileJson")
            ' Dim serializer As New JavaScriptSerializer()
            ' Dim profile As Profile = serializer.Deserialize(Of Profile)(jsonStr)

            ' 调用更新方法
            Dim updateResult As Boolean = UpdateProfile(profile)
            
            ' 这里可以根据结果在ASPX页面上展示反馈（比如用Label显示成功/失败）
            ' 示例：假设你的ASPX页面上有个id为lblResult的Label
            ' lblResult.Text = If(updateResult, "Profile updated successfully!", "Update failed.")
        End If
    End Sub

    <WebMethod>
    Public Shared Function UpdateProfile(editedProfile As Profile) As Boolean
        ' 你的原有更新逻辑（比如保存到数据库等）
        ' 示例返回值，根据实际逻辑调整
        Return True
    End Function
End Class

' 确保你的Profile类定义正确
Public Class Profile
    Public Property Name As String
    Public Property Email As String
    ' 其他属性...
End Class

关键注意点 #

• 跨域问题：如果你的AngularJS页面和ASPX页面不在同一个域名下，会遇到跨域限制。需要确保两者同域，或者在ASPX服务器上配置CORS（不过表单提交的跨域处理相对严格，同域是最稳妥的方案）。
• WebMethod的使用：如果你的需求是调用WebMethod后把结果展示在iframe里，也可以先通过AngularJS的$http调用WebMethod，再把返回的HTML/内容插入到iframe中，但这种方式不如表单提交直接加载页面直观。

内容的提问来源于stack exchange，提问作者Heron Dantas