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

score 1 · Answer 1 · edited Nov 26 '12 at 13:30

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:-

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

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;
  }
}

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) { }
}

You have been warned before about posting links to your own website without disclosing that it is your website you are linking to. Further, you seem to be trying to say that it is *not* your website. I am removing the link, which does not seem relevant, anyway. **Do not add it back in** without both disclosing that it is your site, *and* including an explanation for why it is *directly* related to answering the question posted. — Andrew Barber, Nov 26 '12 at 13:30
Additionally; do *not* include a "signature" in your posts; your user box already serves as your signature. — Andrew Barber, Nov 26 '12 at 13:31

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

You can use the Ajax control toolkit, then you should look for the modal popup extender.

Like that you can add .net controls into the overlay/modal overlay and get the values in code behind

for more info see here http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx

SP Popup Open a modal/pop up form in Sharepoint 2010 with asp.net controls in it

edited May 23 '17 at 12:14

Community

1
1

answered Jul 17 '12 at 12:32

JohnnBlade

4,261
1
21
22

I do agree, but our application is a sharepoint application and want to use modal pop-up so that user experiences the same sharepoint look and feel. Anyway thank you. – Srikanth Jul 17 '12 at 12:56
I have added another link for you – JohnnBlade Jul 17 '12 at 13:01

Need Sharepoint like modal pop-up window

2 Answers2