Loading aspx page in JQuery UI dialog

I have a aspx page where I have a linkbutton and upon clicking that link button I am calling another aspx page passing a parameter in a pops up window, like below:

<asp:linkbutton id='lbtn1' onClick=<%#"window.open('/testsite/mypage.aspx?param=abcd');return false"%> 

Till now it was working fine but now I have to include my page to another site where they have used JQuery for popup dialog and asked me to load my page using the same.

I am really new to JQuery and have no idea about. I tried searching through this forum and google but no luck.

Can someone please help me and show me how can I achieve this (please don't mind but a code exam开发者_运维知识库ple would be really appreciated).

A lot thanks.

Do you mean loading a page through an iframe into a modal/lightbox style? Try using a lightbox plugin or reading up on the jQuery UI dialog.

If you do decide to use the jQuery UI dialog, you can do something like this:

<div id="dialog">
<iframe src="page.html"></iframe>
</div>
...
$( "#dialog" ).dialog();

There is another way, though for the purposes of a modal popup an iframe seems a perfectly legitimate solution. But you could load all the html of the target page with an ajax query, and populate the modal dialog with it. Using jQuery:

    <script type="text/javascript">
    function showPanel(panelID) 
    {
         $panel = $('#'+panelID);
         $.ajax({
                url: "/testsite/mypage.aspx",
                type: "GET",
                dataType: "html",
                async: false,
                data: { "param": "abcd"
                },
                success: function (obj) {
                    // obj will contain the complete contents of the page requested
                    // use jquery to extract just the html inside the body tag
                    $content=$(obj).find('body').html();
                    // then update the dialog contents with this and show it
                    $panel.html($content);
                    $panel.dialog();
                }
         });
    }
    </script>
<div id="dialog">
</div>

Then call this from your click event with the id of the panel.

<asp:LinkButton id="lbtn1" onClick="showPanel('dialog');return false;" />

Note: while this will probably work, if your intent to simply have a link do something on the client, a LinkButton doesn't really make sense, since it is by definition a postback control. So, if you want it to be rendered as a hyperlink for styling reasons, use a HyperLink control or just an HTML link. If not, just put a "div" or "span" around the link text or content and use jQuery to add a click event to it. There are lots of discussions on this sort of thing on SO.

The only way I can think to serve a dynamic aspx page where the page is built (partially or fully) serverside is to add an iframe to the popup and set it's target to the url you wish to load.

Hate iframes but I think this might be the only way.