DotNetNuke Modal PopUps

Task 1, create a jQuery UI dialog to confirm a postback action invoked by a ASP.NET button control. In your module’s ascx file, add a button control and a div to contain you dialog.

<asp:Button ID="btnDelete" runat="server"
    AutoPostBack="false"
    ButtonType="LinkButton"
    CssClass="main_button"
    OnClick="btnDelete_Click"
    Text="Delete"
    UseSubmitBehavior="false">
</asp:Button>

<div id="dlgDeleteConfirm" title="Confirm">
    <div class="confirmDialog">Are you sure you want to delete this?</div>
</div>

In you ascx code behind, create a method to create a client script block, you call can call on page load. This modular approach of passing server vars to the client is one I like the best. With this method you can modify the code to pass in arguments and also include them when writing your script block, etc..

private void Page_Load(object sender, System.EventArgs e)
{
    ClientScriptBlock();
}

private void ClientScriptBlock()
{
    Type csType = this.GetType();
    ClientScriptManager cs = Page.ClientScript;
    if (!cs.IsStartupScriptRegistered(csType, "Vars"))
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("");
        sb.Append(" var btnDelete_ClientID=\"" + btnDelete.ClientID + "\";");
        sb.Append(" ");
        cs.RegisterClientScriptBlock(csType, "Vars", sb.ToString());
    }
}

protected void btnDelete_Click(object sender, EventArgs e)
{
 //delete method followed by redirect or whatever on success
}

.confirmDialog {
    padding: 15px 15px 0 15px;
    font-weight: bold;
}

jQuery - I had trouble getting .dnnConfirm to handle the postback with it’s isButton option, so I used a standard jQuery UI Dialog instead.

jQuery(document).ready(function ($) {
    $("#dlgDeleteConfirm").dialog({
        autoOpen: false,
        modal: true,
        width: 300,
        height: 140,
        resizable: false,
        dialogClass: "dnnFormPopup",
        buttons: {
            "Yes": function() {<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.btnDelete))%>;},
            "No": function() {$(this).dialog('close');}
        }
    });
    $("#" + btnDelete_ClientID).click(function () {
        $("#dlgDeleteConfirm").dialog('open'); return false;
    });
});

NOTE: You need to make sure that DNN loads the jQuery UI in either OnInit or OnLoad in your Module Controls code behind.

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    //register jQuery-UI - no need to register jQuery
    //since jQuery-UI registration method will handle this 
    DotNetNuke.Framework.jQuery.RequestUIRegistration();
}

Task 2, create a jQuery UI dialog to contain an Edit form

Resources

comments powered by Disqus