Writing a UserControl that will accept another external UserControl for its content display area.
I found myself continually developing and rewriting dialogs, so I thought of writing a dialog shell, which is shown below:
The User Control ascx is:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="dialogControl.ascx.cs"
ViewStateMode="Disabled" Inherits="DialogControl.Dialog" %>
<%--
Dialog Box Shell
--%>
<div class="dialog borderRaised">
<div class="dialogHead">
Page Information
<img src="<%: VirtualPathUtility.ToAbsolute("~/dialog/images/close.jpg") %>"
alt="Close Dialog" onclick="return Dialog.close();" title="Close Page Information Dialog" />
</div>
<div class="dialogPgeHeader">
<span class="dialogWait">
<img src="<%: VirtualPathUtility.ToAbsolute("~/dialog/images/wait.gif") %>" style="width: 20px;
height: 20px;" alt="" />
Please Wait...</span><div id="dialogPageName"></div>
</div>
<div id="dialogContent">
<asp:PlaceHolder ID="plhControl" runat="server"></asp:PlaceHolder>
</div>
<div class="dialogAnswerBox">
<div class="dialogAnswerMsg">
</div>
</div>
</div>
C# Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using pageInfoDialog.dialogInfo;
namespace DialogControl
{
public partial class Dialog : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
infoDialogControl uc = new infoDialogControl();
uc = (infoDialogControl)LoadControl("../dialogInfo/infoDialogControl.ascx");
PlaceHolder plhCtrl = (PlaceHolder)this.FindControl("plhControl");
plhCtrl.Controls.Add(uc);
}
}
}The UserControl will load an external UserControl. So, separating the shell from the content by loading the content through an external UserControl, I don’t have rewrite the shell.
Since it’s appearance is CSS driven in an external CSS page, changing its appearance is manipulating the CSS.
All JavaScript for the shell has also been put in an external JS file.
Additionally, all needed images have been place in related folder.
I haven’t tested this idea, but it seem feasible. Next post I will include the external UserControl.
This is my notes, and intended for any ideas some may have. Happy Coding!
Javascript and CSS code below:
Javascript for Shell:
var Dialog = {
close: function () {
$(".dialog").hide();
return false;
}
, init: function (id) {
$(".dialog").show();
$(".dialog").draggable({ handle: "div.dialogHead" });
if (typeof dialogInfo !== "undefined") {
dialogInfo.init(id);
}
return false;
}
}CSS for Shell:
/*
Dialog Box
----------------------------------- */
.dialog
{
position: absolute;
top: 24px;
left: 124px;
padding: 4px 4px 12px 4px;
width: 612px;
background-color: #E1EAE1;
font-size:1.4em;
display:none;
}
.dialog .dialogAnswerBox
{
display:none;
position:absolute;
background-color:#1B73AF;
width:250px;
padding:2px;
top:0px;
left:0px;
}
.dialog .dialogAnswerMsg
{
padding:6px;
background-image: url(../images/answerBoxBG.jpg);
}
.dialog .dialogHead
{
position: relative;
font-weight: bold;
margin-bottom: 8px;
cursor: move;
padding: 12px;
font-size: 2em;
background-image: url(../images/headBG.jpg);
}
.dialog .dialogHead img
{
position: absolute;
top: 4px;
width: 20px;
height: 20px;
cursor: pointer;
right: 4px;
}
.dialog .dialogPgeHeader
{
font-size:1.6em;
overflow:hidden;
}
.dialog .dialogPgeHeader .dialogWait
{
float:right;
text-align:right;
width:30%;
font-size:0.6em;
color:#b01e1e;
display:none;
}
.dialog .dialogPgeHeader #dialogPageName
{
float:left;
padding-left:8px;
}
.dialog .dialogPgeHeader .dialogWait img
{
display:inline;
margin-bottom:-5px;
}
.dialog #dialogContent
{
padding:0px 8px;
overflow:hidden;
}
.dialog.borderRaised
{
border-top: 1px solid #c6c6c6;
border-left: 1px solid #c6c6c6;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
