Rectangle 27 0

asp.net How to load an ASPX page into a JQuery dialog box?


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SomePage.aspx.cs" Inherits="SomePage" %>
  <label id="lblLabelId">
  <%= this.Something %></label>
<img alt="Previsiones" name="btnPrevisiones" id="btnButton" title="Dialog title"
src="imageFile.png" onclick="ShowStudentFullRecord(document.getElementById('<% =hiStudentId.ClientID%>').value)" />
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;        
}
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; 
     }
}
  • 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.

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

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.

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.

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:

Note that if you embed ASP.NET controls into the page generated you shouldnt 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.

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)

Tip 3 Its something like a delete confirmation popup

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.

Note
Rectangle 27 0

asp.net How to load an ASPX page into a JQuery dialog box?


$(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;     }); });

If I may just one more question, how would you then close the Dialog from within the aspx page?

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

Note
Rectangle 27 0

asp.net How to load an ASPX page into a JQuery dialog box?


$(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;     }); });

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

If I may just one more question, how would you then close the Dialog from within the aspx page?

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

Note
Rectangle 27 0

asp.net How to load an ASPX page into a JQuery dialog box?


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SomePage.aspx.cs" Inherits="SomePage" %>
  <label id="lblLabelId">
  <%= this.Something %></label>
<img alt="Previsiones" name="btnPrevisiones" id="btnButton" title="Dialog title"
src="imageFile.png" onclick="ShowStudentFullRecord(document.getElementById('<% =hiStudentId.ClientID%>').value)" />
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;        
}
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; 
     }
}
  • 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.

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

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.

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.

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:

Note that if you embed ASP.NET controls into the page generated you shouldnt 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.

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)

Tip 3 Its something like a delete confirmation popup

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.

Note
Rectangle 27 0

asp.net How to load an ASPX page into a JQuery dialog box?


I think what you are after is a modal window that shows an actual page, right? If so look at fancybox or colorbox These can show a wide variety of content including urls

Note
Rectangle 27 0

asp.net How to load an ASPX page into a JQuery dialog box?


I think what you are after is a modal window that shows an actual page, right? If so look at fancybox or colorbox These can show a wide variety of content including urls

Note