How to load an ASPX page into a JQuery dialog box

Question

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.

Answer 1

If you're using jQueryUI Dialog it's a piece of cake :

$(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.

Answer 2

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)

"Home" page aspx

<img alt="Previsiones" 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;        
}

"Target" Page aspx

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

"Target" Page 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 article to 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.

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.

So... you want to load an aspx page on a JQuery UI Dialog

Tip 1 Your dialog will be like a detailed info popup

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.

Tip 2 Tip 1 seems like overkill for you

Follow article's section Callback to the same Page and generate HTML to render just what you need in the same page

Tip 3 Its something like a delete confirmation popup

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:

• 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.

Tip 4 You just want that independent aspx page on that dialog.

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 issues and 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.