Need Sharepoint like modal pop-up window

Question

I need to show Sharepoint 2010 like pop-up window when clicked on a link in grid view. Once the modal pop-up displayed and user selected the Save button data base should be updated with given values in pop-up. How can I get this. Any Idea.

As of now I am using below code to get it but no idea how to pass the values to Database once clicked on the button in pop-up

Note: As of now I am not adding the gridview code here as I wanted to achieve it first with sample html then wanted to do with grid view.

Java Script

function openDialog() {

    var options = {

        html: divModalDialogContent,  // ID of the HTML tag

        // or HTML content to be displayed in modal dialog

        width: 600,

        height: 300,

        title: "My First Modal Dialog",

        dialogReturnValueCallback: dialogCallbackMethod,  // custom callback function

        allowMaximize: true,

        showClose: true

    };

    SP.UI.ModalDialog.showModalDialog(options);

}

//Results displayed if 'OK' or 'Cancel' button is clicked if the html content has 'OK' and 'Cancel' buttons

function onDialogClose(dialogResult, returnValue) {

    if (dialogResult == SP.UI.DialogResult.OK) {

        alert('Ok!');

    }

    if (dialogResult == SP.UI.DialogResult.cancel) {

        alert('Cancel');

    }

}

// Custom callback function after the dialog is closed

function dialogCallbackMethod() {

    alert('Callback method of modal dialog!');

}

HTML

<div id="divModalDialogContent">

    Hello World!

    <input type="button" value="OK"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Ok clicked'); return false;"

        class="ms-ButtonHeightWidth" />

    <input type="button" value="Cancel"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked'); return false;"

        class="ms-ButtonHeightWidth" />

        <asp:Button runat="server" ID="btnClicked" Text="Clicked" 
        onclick="btnClicked_Click" />

<input type="button" value="Open" onclick="openDialog()" />

How can I call db upon clicking 'clicked' button in pop-up. Also I need to send parameters to pop-up

Thanks in advance

Answer 1

If you need ok, cancel or submit button event on popup screens which interacts with Sharepoint list/library or sql database then you need to implement event in your popup. Check below steps:-

1. your popup page should inherit "Microsoft.SharePoint.WebControls.LayoutsPageBase" which should have this function:-

   protected void EndOperation(int result, string returnValue)
   {
     string closeModal = String.Format(CultureInfo.InvariantCulture,
     "<script type=\"text/javascript\">window.frameElement.commonModalDialogClose
     ({0}, '{1}');</script>", new object[] { result, returnValue });
     this.Page.ClientScript.RegisterStartupScript(base.GetType(),
     "CreatePopup", closeModal, false);
   }
   

2. Implement an event which can be listen on popup action like ok button

   public delegate void AddEventHandlerToSPDialogEvent(object sender, PDialogEventHandler e);
   public class SPDialogEventHandler : EventArgs
   {
     public int dialogResult { get; set; } // 0 or 1
     public string ReturnValues { get; set; } // can be url or any success/error message
     public SPDialogEventHandler(int result, string list)
     {
       ReturnValues = list;
       dialogResult = result;
     }
   }
   

3. Call this event from your button action in popup. for ex:

   public event AddEventHandlerToSPDialogEvent ResultOk;
   protected void CancelBtn_Click(object sender, EventArgs e)
   {
       try
       {
           int dialogResult = 0;
           if (this.ResultOk != null)
           {// Here dialogResult is 0. that means we have clicked on cancel button
               ResultOk(this, new SPDialogEventHandler(dialogResult,"Action Cancelled"));
           }
       }
       catch (Exception ex) { }
   }