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