如何将 ASPX 页面加载到 JQuery 对话框中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8154260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load an ASPX page into a JQuery dialog box
提问by Michael A. Braganca
I am trying to load an ASPX page into a dialog box when the user clicks on a menu item. The "home" page is built using VS2010 and contains a master page and default page. When I click on the menu option, the dialog box opens, but is completely blank. If I remove the link to the JS code (by renaming the menu option), the required page opens correctly in the same tab. The destinantion page does not use the same master page as the calling page, so I do not think I have a problem with conflicting tags and place holders.
当用户单击菜单项时，我试图将 ASPX 页面加载到对话框中。“主页”页面是使用 VS2010 构建的，包含一个母版页和默认页。当我单击菜单选项时，对话框打开，但完全空白。如果我删除指向 JS 代码的链接（通过重命名菜单选项），所需的页面将在同一选项卡中正确打开。目标页面不使用与调用页面相同的母版页，所以我认为我没有标签和占位符冲突的问题。
回答by Haythem Tlili
If you're using jQueryUI Dialogit's a piece of cake :
如果您使用的是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;
});
});
Hope this will help.
希望这会有所帮助。
回答by daniloquio
The following code shows an aspx page on a modal JQuery dialog passing a post value (its a student Id stored in a server-side HiddenField)
以下代码显示了一个传递 post 值的模态 JQuery 对话框上的 aspx 页面（它的学生 ID 存储在服务器端 HiddenField 中）
"Home" page aspx
“首页”页面 aspx
<img alt="Previsiones" name="btnPrevisiones" id="btnButton" title="Dialog title"
src="imageFile.png" onclick="ShowStudentFullRecord(document.getElementById('<% =hiStudentId.ClientID%>').value)" />
JavaScript
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;
}
"Target" Page aspx
“目标”页面 aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SomePage.aspx.cs" Inherits="SomePage" %>
<label id="lblLabelId">
<%= this.Something %></label>
"Target" Page aspx.cs
“目标”页面 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;
}
}
And Now for Something Completely Different
现在是完全不同的东西
I found this articleto be extremely useful. It offers three approaches on loading aspx content into a page dinamically using jquery. It also explains how to pass parameters to the new page as post values.
我发现这篇文章非常有用。它提供了三种使用 jquery 动态加载 aspx 内容到页面的方法。它还解释了如何将参数作为帖子值传递到新页面。
This article makes clear one important fact:
这篇文章阐明了一个重要事实：
Note that if you embed ASP.NET controls into the page generated you shouldn't expect them to behave like ASP.NET controls once returned and embedded as raw HTML. The base WebForm has no idea of the new content added to the page and so any form content embedded is treated as raw HTML only.
请注意，如果您将 ASP.NET 控件嵌入到生成的页面中，您不应该期望它们在作为原始 HTML 返回和嵌入后表现得像 ASP.NET 控件。基本 WebForm 不知道添加到页面的新内容，因此任何嵌入的表单内容都仅被视为原始 HTML。
So... you want to load an aspx page on a JQuery UI Dialog
所以......你想在 JQuery UI 对话框上加载一个 aspx 页面
Tip 1Your dialog will be like a detailed info popup
提示 1您的对话框将像一个详细的信息弹出窗口
Follow the approach presented in the referred article under title ASPX Based Page Content. A very simple aspx with no server controls, just the html to render that little customer details popup of yours. To render that page on a JQuery dialog follow Haythem Tlili's answer.
遵循标题为基于 ASPX 的页面内容的参考文章中介绍的方法。一个非常简单的 aspx，没有服务器控件，只有 html 来呈现您的小客户详细信息弹出窗口。要在 JQuery 对话框上呈现该页面，请遵循 Haythem Tlili 的回答。
Tip 2Tip 1 seems like overkill for you
提示 2提示 1 对您来说似乎有点矫枉过正
Follow article's section Callback to the same Page and generate HTMLto render just what you need in the same page
按照文章的部分回调到同一页面并生成 HTML以在同一页面中呈现您需要的内容
Tip 3Its something like a delete confirmation popup
提示 3它类似于删除确认弹出窗口
In this case is probable delete button will be on a Repeater or something similar. In your JQuery script, when referring to the popup trigger or the container, I suggest you:
在这种情况下，删除按钮可能位于中继器或类似的东西上。在您的 JQuery 脚本中，当提到弹出触发器或容器时，我建议您：
- Use a Label as trigger with CSS that makes it like a button.
- Use a Panel as container.
- When referring to these two on the jquery script do it like this:
$("#<%= lblTrigger.ClientID %>").click(function(). With this there wont be id madness because of the Repeater thing.
- 使用 Label 作为 CSS 触发器，使其像按钮一样。
- 使用面板作为容器。
- 当提到这两个在jQuery脚本像这样做：
$("#<%= lblTrigger.ClientID %>").click(function()。有了这个，就不会因为中继器的事情而疯狂了。
Tip 4You just want that independent aspx page on that dialog.
技巧 4您只需要该对话框上的独立 aspx 页面。
You could put an iFrame on a page (html or aspx) and use $.load to get that page. You need to understand that iFrame has some issuesand you should use it only if its worth. Don't use this escenario if you expect to have significative comunication between the original page and the one loaded in the iFrame.
您可以将 iFrame 放在页面（html 或 aspx）上并使用 $.load 获取该页面。您需要了解iFrame 存在一些问题，您应该仅在其值得时使用它。如果您希望在原始页面和 iFrame 中加载的页面之间进行有意义的通信，请不要使用此场景。
