Gridview to Modal Dialog Detail and Back

MASTER PAGE

Step 1: Setup your gridview’s onClientClick to call the javascript function…

<asp:GridView ID="GridView1" runat="server" Height="107px" Width="754px" AutoGenerateColumns="false">

<Columns>

<asp:BoundField DataField="ID_Login" HeaderText="ID" />

<asp:BoundField DataField="Name_First" HeaderText="First" />

<asp:BoundField DataField="Name_Last" HeaderText="Last" />

<asp:BoundField DataField="Login" HeaderText="Login" />

<asp:TemplateField>

<ItemTemplate>

<asp:LinkButton ID="lnkSelect" Text="Select" runat="server" OnClientClick='<%# "DoSomeThingWithThisID(" & Chr(34) & Eval("id_Login") & Chr(34) & ");return false;" %>' />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

DoSomethingWithThisID function called by gridview’s “select” link…

function DoSomeThingWithThisID(id_login) {

OpenPage("MyTitle",800,600,"DetailPage.aspx",id_login)

    }

OpenPage function, calls the jQuery Dialog…

var MyDialog;

function OpenPage(sTitle, iHeight, iWidth, PageName,sID) {

//***************************************************************************************************         

        $('head').append('<style type="text/css">.ui-widget-overlay.ui-front {opacity:.75; }</style>');

//***************************************************************************************************                   

MyDialog = $("<div></div>").html("<iframe  id='MyIFrame' style='border: 0px; ' src='" + PageName + "?ID_Login=" + sID + "' width='100%' height='100%'></iframe>")

.dialog({

                buttons: [{ text: "Close 1 (no save)", click: function () { $(this).dialog("close"); } }, { text: "Close 2 (no save)", click: function () { $(this).dialog("close"); } }],

autoOpen: false,

                modal: true,

                height: iHeight,

                show: { effect: 'slide', duration: 1000 },

                hide: { effect: 'explode', duration: 1000 },

                width: iWidth,

                title: sTitle,

beforeClose: function (event, ui) { alert('your closing!') }

            })

// Open without the 'x' on the upper right of the window...

        MyDialog.dialog('open').prev().find(".ui-dialog-titlebar-close").hide();;

    } //OpenPage Function

CloseIfame function is called by the “Child” page, after the “Child” page processes any data in it’s “code behind”…

CHILD PAGE

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Response.Write("ID_Login=" & Request.QueryString("id_login"))

End Sub

Protected Sub cmdPandC_Click(sender As Object, e As EventArgs) Handles cmdPandC.Click

'****************************************

'Do some server side processing here..

'****************************************

'finally close the dialog....

Dim s As String = "<script>window.parent.closeIframe();</script>"

ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyKey", s, False)

End Sub                    

function closeIframe() {

//******************************************************************************************

//This function is called from the Child page,(Detail.aspx), like this:   ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyKey", sScript, False)

//******************************************************************************************

MyDialog.dialog('close');

return false;

    } //CloseIframe

EXTRA CREDIT..

The OpenPage function can be called form codebhind like this..

s = "<script>$( document ).ready(function() {OpenPage('More Info...', 600, 1020, 'MoreInfo.aspx')})</script>"

RegisterStartupScript("WowOnStartup", s) 'Key MUST be unique