如何将 ASPX 页面加载到 JQuery 对话框中

Posted 2023-03-05

【中文标题】如何将 ASPX 页面加载到 JQuery 对话框中

【英文标题】：How to load an ASPX page into a JQuery dialog box

【发布时间】：2011-12-30 13:18:54

【问题描述】：

当用户单击菜单项时，我试图将 ASPX 页面加载到对话框中。 “主页”页面是使用 VS2010 构建的，包含母版页和默认页。 当我单击菜单选项时，对话框打开，但完全空白。如果我删除 JS 代码的链接（通过重命名菜单选项），所需的页面会在同一个选项卡中正确打开。 目标页面不使用与调用页面相同的母版页，因此我认为标签和占位符冲突没有问题。

【问题讨论】：

jQuery UI 对话框？ jqueryui.com/demos/dialog 它并不是真的要保存整个页面。它旨在将内容保存在页面中。在另一个页面内的元素内添加页面级标记（html、header、body 等）可能不是一个好主意。

【参考方案1】：

我认为您所追求的是一个显示实际页面的模态窗口，对吧？如果是这样，请查看 fancybox 或 colorbox 这些可以显示各种各样的内容，包括网址

【参考方案2】：

如果您使用的是jQueryUI Dialog，那简直是小菜一碟：

$(document).ready(function() 
    $('#menu-item').click(function() 
        var mydiv = $('#mydiv');
        mydiv.dialog( autoOpen: false );
        // Load the content using AJAX
        mydiv.load('mypage.aspx');
        // Open the dialog
        mydiv.dialog('open');

        return false;
    );
);

希望这会有所帮助。

【讨论】：

我建议将对话框设置代码放在事件处理程序之外$(document).ready(function() var mydiv = $('#mydiv'); mydiv.dialog( autoOpen: false ); $('#menu-item').click(function() // Load the content using AJAX mydiv.load('mypage.aspx'); // Open the dialog mydiv.dialog('open'); return false; ); );

如果我可以再问一个问题，那么您将如何从 aspx 页面中关闭对话框？

【参考方案3】：

以下代码显示了一个模态 JQuery 对话框上的 aspx 页面，它传递了一个帖子值（它是一个存储在服务器端 HiddenField 中的学生 ID）

“主页”页面aspx

<img  name="btnPrevisiones" id="btnButton" title="Dialog title"
src="imageFile.png" onclick="ShowStudentFullRecord(document.getElementById('<% =hiStudentId.ClientID%>').value)" />

JavaScript

function ShowStudentFullRecord(StudentId)

    var jsFileLocation = $('script[src*=yourJsFileName]').attr('src');
    jsFileLocation = jsFileLocation.replace('yourJsFileName.js', '');    
    $("#divStudentFullRecord")
        .load(jsFileLocation + "../SomeFolder/SomePage.aspx", Id: StudentId )
        .dialog(
            autoOpen: false,
            show: "blind",
            hide: "explode",
            modal:true          
            );    
    $("#divStudentFullRecord").dialog( "open" );
    return false;        

“目标”页面aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SomePage.aspx.cs" Inherits="SomePage" %>
  <label id="lblLabelId">
  <%= this.Something %></label>

“目标”页面 aspx.cs

protected string Something  get; set; 

protected void Page_Load(object sender, EventArgs e)

     if (!IsPostBack)
     
         int studentId = Convert.ToInt32(Request.Form["Id"]);
         StudentFullRecord studentFullRecord = GetStudentFullRecord(studentId);
         this.Something = studentFullRecord.SomeImportantInformation; 
     

现在完全不同了

我发现this article 非常有用。它提供了三种使用 jquery 动态地将 aspx 内容加载到页面中的方法。它还解释了如何将参数作为帖子值传递给新页面。

这篇文章阐明了一个重要事实：

请注意，如果您将 ASP.NET 控件嵌入到您生成的页面中 不应期望它们在返回后表现得像 ASP.NET 控件 并嵌入为原始 HTML。基础 WebForm 不知道新的 添加到页面的内容，因此 任何嵌入的表单内容都会被处理 仅作为原始 HTML。

所以...你想在 JQuery UI 对话框上加载一个 aspx 页面

提示 1您的对话框将像一个详细的信息弹出窗口

遵循标题基于 ASPX 的页面内容下的参考文章中介绍的方法。一个非常简单的 aspx，没有服务器控件，只是呈现您的那个小客户详细信息弹出窗口的 html。要在 JQuery 对话框上呈现该页面，请按照 Haythem Tlili 的回答。

提示 2 提示 1 对你来说似乎有点过分了

关注文章部分回调同一页面并生成 HTML 以在同一页面中呈现您需要的内容

提示 3 类似于删除确认弹出窗口

在这种情况下，删除按钮很可能位于中继器或类似设备上。在您的 JQuery 脚本中，当提到弹出触发器或容器时，我建议您：

将标签用作带有 CSS 的触发器，使其像一个按钮。 使用面板作为容器。 当在 jquery 脚本上引用这两个时，这样做：$("#<%= lblTrigger.ClientID %>").click(function()。有了这个，就不会因为中继器的事情而疯狂。

提示 4您只需要在该对话框上显示独立的 aspx 页面。

您可以在页面（html 或 aspx）上放置 iFrame，然后使用 $.load 来获取该页面。您需要了解iFrame has some issues，并且只有在其值得的情况下才应使用它。如果您希望在原始页面和 iFrame 中加载的页面之间进行有意义的通信，请不要使用此方案。