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("");
		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

Published by

Jim Frenette

Web Developer – views here are my own except those taken from people more clever than me.