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