如何将WebForms页面加载到iframe中，而不需要从服务器呈现两个完整的页面

本文关键字：两个 服务器 不需要 加载 WebForms iframe | 更新日期: 2023-09-27 18:09:30

我有一个shell页面，其中包含过滤器控件和用于显示gridview的iframe。当您单击"filter"按钮时，或者当计时器被触发时，从过滤器控件收集过滤器数据，并将其作为查询字符串提供给gridview iframe，如下所示:

var URL = "/mypage/gridview.aspx";
var dest = URL + '?' + getFilterData();
var frame = $('#gridiframe');
$.ajax({
    type: "HEAD",
    async: true,
    url: dest
}).success(function () {
    frame.attr('src', dest);
})
.error(loadError);

我的难题是:gridview的渲染成本非常高。它执行一个巨大的数据库访问，这个方法导致页面被渲染两次。第一次，客户端只是查看报头，以确保用户已经过身份验证(如果会话超时，页面返回HTTP未授权)，并且所有参数的格式都很好。但是我不想改变iframe源来显示错误消息，我只想调用loadError，它基本上只是通知用户出了什么问题。

有什么我可以做与客户端代码填充我的iframe在只有一个交换与服务器?

编辑:感谢所有的输入。说到底，我讨厌网页表单。故事到此结束

如何将WebForms页面加载到iframe中，而不需要从服务器呈现两个完整的页面

不是在ajax查询中查询iframe的源URL，而是查询不运行相同DB查询的不同端点。您说它做两件事，1验证用户的登录令牌是否仍然有效，2验证过滤器参数是否有效。这两个验证步骤都不需要在获得完整查询结果的数据库上运行查询。因此，创建一个新的API端点来执行基本的验证，如果它返回成功消息，那么将iframe源设置为您想要的内容。

另一个选项是从gridview.aspx返回一个HTML片段，而不是一个完整的HTML页面。然后，如果成功的话，AJAX可以用HTML结果替换div的内容，而不是设置iframe src，同时仍然允许您处理错误。

一个更时髦的选择(不是说它更好或更坏，但肯定更符合当前的web开发行业)是改变gridview。Aspx到一个web服务/api，返回简化json格式的数据，然后使用javascript框架或模板引擎在客户端本身生成HTML表。

也许我过于简化了事情，但是您不能在第二个请求中使用QueryString参数吗?

$.ajax({
    type: "HEAD",
    async: true,
    url: dest
}).success(function () {
    frame.attr('src', dest + '&getGrid=true');
})

然后在aspx页面检查QueryString是否存在。

protected void Page_Load(object sender, EventArgs e)
{
    //validate user always
    if (Request.QueryString["getGrid"] != null)
    {
        //rebuild grid 
    }
}

代替iFrame，你可以一个正常的<div>，只从另一个页面加载gridView，如下所示:

首先，将gridView包裹在另一个页面中的容器周围比如

<div id='grid-wrapper'><!-- GridView here --></div>

然后像这样使用AJAX代码只检索网格:

var URL = "/mypage/gridview.aspx";
var dest = URL + '?' + getFilterData();
var div = $('#divId');
$.ajax({
    type: "HEAD",
    async: true,
    url: dest
}).success(function (res) {
    div.html($('#grid-wrapper',$(res)).html); //this gets only the contents of grid-wrapper and not the whole page.
})
相关文章：