How to Using a ModalPopupExtender in a SharePoint Webpart Class

How to Using a ModalPopupExtender in a SharePoint Webpart Class

Almost all of the examples on how to use the Ajax Control Toolkit ModalPopupExtender are done in ASP.Net, however in this example I’ll explain how to use this control in a SharePoint Webpart with all of the code living in the class.

For our purpose here this example assumes that you have already intergrated the Ajax Control Toolkit with your SharePoint environment.

First create the target control which is going to be used to show the modal view. In my example I made the button invisible because I plan to show the modal on page load. If you haven’t already done so, also add the System.Web.Extensions reference to your project:

Button btn = new Button();
btn.Attributes.Add(“style”, “display: none”);
btn.Text = “Show Modal”;
btn.ID = “btn”;

Next, create you ModalPopupExtender

AjaxControlToolkit.ModalPopupExtender mp = newAjaxControlToolkit.ModalPopupExtender();
mp.CancelControlID = “CancelBTN”;
mp.OkControlID = “OkBTN”;
mp.PopupControlID = “ModalPanel”;
mp.PopupDragHandleControlID = “ModalHeader”;
mp.BackgroundCssClass = “ModalPopupBG”;
mp.TargetControlID = “btn”;

Now create the main panel for your modal view as well as the DIV’s for the main body content

Panel pan = new Panel();
pan.Attributes[“display”] = “none”;
pan.Attributes[“id”] = “ModalPanel”;

HtmlGenericControlDivMain = new HtmlGenericControl(“div”);
DivMain.Attributes[“class”] = “Container”;

HtmlGenericControl div1 = new HtmlGenericControl(“div”);
div1.Attributes[“id”] = “PopupHeader”;
div1.Attributes[“class”] = “PopupHeader”;
LiteralHeaderText = new Literal();
HeaderText.Text = “<p>ALERT</p>”;
div1.Controls.Add(HeaderText);

HtmlGenericControl div2 = new HtmlGenericControl(“div”);
div2.Attributes[“id”] = “PopupBody”;
div2.Attributes[“class”] = “PopupBody”;
LiteralBodyText = new Literal();
BodyText.Text = “<p>This is a simple modal dialog</p>”;
div2.Controls.Add(BodyText);

HtmlGenericControl div3 = new HtmlGenericControl(“div”);
div3.Attributes[“id”] = “PopupBody”;
div3.Attributes[“class”] = “PopupBody”;
LiteralControlText = new Literal();
ControlText.Text = “<input id=’ReviewBTN’ type=’button’ value=’Okay’ /><input id=’DismissBTN’
type=’button’ value=’Dismiss’ />”;
div3.Controls.Add(ControlText);

DivMain.Controls.Add(div1);
DivMain.Controls.Add(div2);
DivMain.Controls.Add(div3);
pan.Controls.Add(DivMain);

Now add your controls to the webpart

this.Controls.Add(btn);
this.Controls.Add(pan);
this.Controls.Add(mp);

// I execute this on load, however it can be applied to an action on the target control button
mp.Show();

Here are the styles I used for the modal

.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}

.PopupHeader
{
background-color: #5e8cc5;
padding: 5px 15x 5px 15px;
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #FFFFFF;
padding: 1px;
}

.PopupBody
{
padding: 5px 15px 5px 15px;
font-family: Arial;
font-weight: bold;
font-size: 12px;
color: #000000;
clear: both;
}

.Container
{
background-color: #ebf4fe;
border: 2px solid #000000;
padding: 0px 0px 0px 0px;
}

Comments are closed.