Prashant's Blog: 2008

Tuesday, December 30, 2008

Creating modal popup in HTML 4 using CSS and Javascript

Hi all,
Creating a modal popup for asp.net users is always easy, its simply a modal panel, modal popup extender of asp.net ajax and all is done. but creating the modal popup that way will not work properly when you are having a following doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and that's why we are looking into a simple method which uses javascript, and a tricky css to show the same kinda popup to work with the above doctype also.
here is how we can do so.
(1) add following css in your css or html document's style tag:

.graydiv
{
position: absolute;
background-color: #5B5B5B;
left: 0px;
top: 0px;
z-index: 10000;
display: none;
}

.ModalBackground
{
background-color: black;
filter: alpha(opacity=70);
opacity: 0.7;
}

(2) add following html markup at the end of your html document:

<div id="divg" class="ModalBackground graydiv">
</div>
<div id="divSignin" style="border: '1px soild green'; display: none; z-index: 100002;
width: 550px; position: absolute;">
<div style="text-align:right;height:100px;width:100px;background-color:White;border:solid 1px lightyellow">
This is a popup;
<input type="button" value="Close Me" onclick="closePopup();" />
</div>

</div>

(3) add following javascript in the script tag of your document or in your javascript file:

function closePopup()
{
document.getElementById("divSignin").style.display="none";    
objDiv = document.getElementById("divg");
objDiv.style.display = "none"; 
return false;
}
function showPopup()
{
try
{  
document.getElementById("divSignin").style.display="block";    
objDiv = document.getElementById("divg");
objDiv.style.display = "block"; 
objDiv.style.width = document.body.scrollWidth;
objDiv.style.height= document.body.scrollHeight;         
fnSetDivSigninLeft("divSignin");        
}
catch(e)
{
alert(e);
}
return false   
}
function fnSetDivSigninLeft(oElement)
{
var DivWidth = parseInt(document.getElementById(oElement).offsetWidth,10)
var DivHeight = parseInt(document.getElementById(oElement).offsetHeight,10)
document.getElementById(oElement).style.left = (document.body.offsetWidth / 2) - (DivWidth / 2)+200;
document.getElementById(oElement).style.top = (document.body.offsetHeight / 2) -  ( DivHeight / 2);

return false;     
}

and that's it, your popup is ready, the last step is to call this popup in your control and call its showPopup() event. here is a sample input button that calls the popup.

<input type="button" value="Show Popup" onclick="showPopup();" />

Note: If you want to show multiple popups, you can extend this code.
Note: You can use any color for modal background, for doing so, modify the change background color property of the ModalBackground class and try using the code.

Another simple way to implement this thing is to use JQuery Plugin but i don't know if they work well with HTML 4 or not. This one is a simple nice and clean approach to deal with modal poups.

happy coding :)

Monday, December 29, 2008

Javascript : Accessing ASP.NET RadioButtonList or CheckBoxList in Javascript

here is a sample radio button list


<asp:radiobuttonlist id="RadioButtonList1" runat="server">
           <asp:listitem value="1">One</asp:listitem>
           <asp:listitem value="2">Two</asp:listitem>
           <asp:listitem value="3">Three</asp:listitem>
</asp:radiobuttonlist>

here is a sample script to check atleast one item should be checked


function validateRadio()
{
   var count = <%=RadioButtonList1.Items.Count %>;
   var id = "<%=RadioButtonList1.ClientID%>";
   var checked = false;
   for(i=0;i<count;i++)
   {
      if(document.getElementById(id+"_"+i.toString()).checked==true)
      {
         checked = true;
         break;
      }
   }
   return checked;
}

RadioButtonList and CheckBoxList works exactly same way, so go ahead and use the same funtion for the CheckBoxList also, and you can create as many validations as you think of! happy coding :)

T-SQL : Updating Database Image Name

hey there again,
I had a database table which stores an event image. I have a column called ImageName which stores image name. Now problem was, when i upload an image with new event, and then update something other than an event image, it was set back to null.

That was because, the update query sent to the stored procedure was like that, so this can be solved in many ways, but the minimum change way is this one:


Update Events
set
     column1 = @column1Value,
     column2 = @column2Value,
     column3 = @column3Value,
     ImageName = isnull(@imageName,imageName),
[ where condition goes here]

Nice fix, I know generally people choose front end way to pass proper data, but this one is also nice one

Thursday, December 25, 2008

DotNetNuke Resources

Understanding DotNetNuke Navigation
DotNetNuke Help Articles
CodePlex Website - here you can find useful sample DNN Modules
Bi4rce.com - Free DNN Skins and Modules
DNNCreative - Useful free and paid articles, tutorials, videos about DNN
official DotNetNuke Videos & Documents - Requires login to DotNetNuke.com
DoNetNuke Articles: DNNGear,CodeProject,Ventrian,DataSprings,DNNSkin.Com,

Wednesday, December 24, 2008

T-SQL : Display structure of a table

Hi all,
Last night, when i was dealing with some server side error with my module of dotnetnuke and using the SQL page of the dotnetnuke, i was trying to access structure of an sql table, i search throug the web and here is what i get:
1)using a select statement:


SELECT *
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_CATALOG = 'Database name' AND
TABLE_NAME = 'Table Name'

This will display a nice table formated output of the columns with all the data associated with it.
2)Another way is:


exec sp_columns TableName

Monday, December 22, 2008

DotNetNuke : Getting Portal Alias By PortalID


// using DotNetNuke.Entities.Portals;
// using System.Collections;
PortalAliasController paController = new PortalAliasController();
PortalAliasCollection paCollection = portalControler.GetPortalAliasByPortalID(PortalId);
IDictionaryEnumerator hs = paCollection.GetEnumerator();
hs.MoveNext();
PortalAliasInfo paInfo = (PortalAliasInfo)hs.Entry.Value;
string PortalAlias = paInfo.HTTPAlias;

In most of the cases when you are in Module developement, and coding in Module control, you will directly get the HTTPAlias from PortalSetting.PortalAlias.HTTPAlias.

When you are coding in a DotNetNuke page, i.e. if you have inherited an aspx page from DotNetNuke.Framework.PageBase, at that time also you will get the same property as well.

But when you are in a parent portal and you want to do redirects to child portals, at that time you can use this code.
This code can be easily modified to get all the http alias of a portal.

Wish you all happy coding with DotNetNuke :)

Thursday, December 18, 2008

Creating a DotNetNuke User Dynamically

Hey friends,
Working on DotNetNuke is really a great experience. I really love DotNetNuke. DotNetNuke is an aswer to great CMS solution for asp.net and there is no doubt about that. Recently, we decided to develop some modules which are really simple and don't required CMS facilities, so we decided to go for pur asp.net module in place of a dotnetnuke module.
Because we were using dotnetnuke providers for storing users and registering them, we have two questions regarding the new modules:
1) how to make existing dotnetnuke users use the module without new registration
2) how to make new registrations in module that can make the user use whole site. (i.e. new module's users can use all the site)

Well after some juggling, I got both the things working. To implement this, we implemented login and registration pages which uses dotnetnuke's apis for login and creating a new user respectively.

here are some code snippets which you can use to create a new DotNetNuke User:


DotNetNuke.Entities.Users.UserInfo uInfo = new UserInfo();
uInfo.Username = txtEmail.Text.ToString();
uInfo.Membership.Password = txtPassWord.Text.ToString();
uInfo.PortalID = 0;
uInfo.Email = txtEmail.Text.ToString();
DotNetNuke.Security.Membership.UserCreateStatus status = DotNetNuke.Entities.Users.UserController.CreateUser(ref uInfo);
if (status == DotNetNuke.Security.Membership.UserCreateStatus.Success)
{
     //TODO User Created Successfully
}
else
{
   //TODO Error Creating user s
   lblError.Text = status.ToString();
}

Wednesday, December 17, 2008

ASP.NET Radio Button List Styling problem with IE 6

Hey friends.
Another strange problem. I'm having an ASP.NET control RadioButtonList on my page which is having some background color other than white. now when i see the page in firefox it was looking proper. but when i see the same in IE 6 its was not looking proper. see this:

So as you can see the output, i was not not happy at all and wondering why my page is displayed like that in IE.
So I started analyzing it by IEDeveloper tool bar plugin.

here is my markup of the drop down:


<asp:RadioButtonList ID="rdoSize" runat="server" CellPadding="3" class="rdo" RepeatDirection="Horizontal">
<asp:ListItem Value="1" Selected="True"><br/><span class='rdoItem'>12"x18"<br/>Rs. 349</span></asp:ListItem>
<asp:ListItem Value="2"><br/><span class='rdoItem'>16"x20"<br/>Rs. 449</span></asp:ListItem>

<asp:ListItem Value="3"><br/><span class='rdoItem'>20"x24"<br/>Rs. 549</span></asp:ListItem>
<asp:ListItem Value="4"><br/><span class='rdoItem'>20"x30"<br/>Rs. 649</span></asp:ListItem>
</asp:RadioButtonList>

so I just added this to my css and its fixed now and looking proper in both browsers.


table.rdo td /*this is only for good formating */
{
 vertical-align:top;
 text-align:center;
 width:50px;
 background-color:Transparent;
}
table.rdo td input /*this has resolved the actual problem*/
{
background-color:Transparent;
border:none;
}

and here is what I get:

Hope this will help you all as well.
wish you all happy coding :)

Using DotNetNuke Module Control in WebParts

Some days ago i was working on an assignment and was wondering how we can use a DotNetNuke module control in Web Part control. I developed a dotnetnuke module's view type of control which shows top 10 guest book comments and its working properly in dotnetnuke. Now the questions is, how can I use the same control in webparts framework also?

Well I've started some research and started with some basics. DotNetNuke module controls are inherited from DotNetNuke.Entities.Modules.PortalModuleBase. They can then import various DotNetNuke interfaces for plugable features like IActionable, IModuleListener, IModuleCommunicator etc. To use a control as a webpart control, it must inherit IWebPart interface and implement it. So I just do that:


#region IWebPart Members
        private string _ImageUrl;
        private string _title;
        private string _description;
        private string _subtitle;
        private string _titleIconImageUrl;
        private string _titleUrl;
        public string CatalogIconImageUrl
        {
            get
            {
                return _ImageUrl;
            }
            set
            {
                _ImageUrl =  value;
            }
        }

        public string Description
        {
            get
            {
                return _description;
            }
            set
            {
                _description = value;
            }
        }

        public string Subtitle
        {
            get { return _subtitle; }
        }

        public string Title
        {
            get
            {
                return _title;
            }
            set
            {
                _title = value;
            }
        }

        public string TitleIconImageUrl
        {
            get
            {
                return _titleIconImageUrl;
            }
            set
            {
                _titleIconImageUrl = value;
            }
        }

        public string TitleUrl
        {
            get
            {
                return _titleUrl;
            }
            set
            {
                _titleUrl = value;
            }
        }

        #endregion

After that, I started using it on my webpart's page. I just register that control and use it under CatalogZone control's WebPartTemplate.

My module is working well as well as my webpart control is also working cool. Anybody who want to do this can simply learn the basics for implementing webparts, and for that, just go through the walkthroughs of msdn for webparts and then try my trick.

Javascript : Dynamically setting onclick event

hey friends,
some time ago I was working on a project which required a little functionality. I was trying to implement that using dynamically adding an onclick event to the anchor tag using DOM. As it seems too easy to deal, it was not too straight. so after some googling i found following code which is now working in IE and FireFox both.


if(navigator.userAgent.indexOf("Gecko")>-1)
    signIn.setAttribute("onclick","functionName(args)");
else
    signIn.onclick = function() { functionName(args) }

Wednesday, December 3, 2008

Javascript Snippet : Select All, None, Invert checkbox


//int mode
// mode = 0 invert selection
// mode = 1 select none
// mode = other than 0 or 1, select all
function checkChange(mode)
{
            for(i=0;i<document.forms[0].elements.length;i++)
            {
                var ele = document.forms[0].elements[i];
                if(ele.type == 'checkbox')
                {
                  if(ele.disabled=false)
                  {
                   if(mode==0) //invert selection
                        ele.checked = !ele.checked;
                   else if(mode==1) //none
                        ele.checked = false;
                   else
                        ele.checked = true;
                  }
                }
            }
}

Tuesday, December 2, 2008

Cannot create file when it already exists

hey friends,
when i was workin on my DotNetNuke project's module, which has functionality to upload a photo, i was getting a strange error like following:

Cannot create file when its already exists.
Message Cannot create a file when that file already exists.
Source mscorlib
TargetSite Void WinIOError(Int32, System.String)
StackTrace at System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath) at System.IO.__Error.WinIOError() at System.IO.FileInfo.MoveTo(String destFileName) at your function

This is strange, i looked at my code and it was almost perfect. so I was not able to find the any error.

After some debugging, i was able to find the error, and you will be surprised to know that it was coming when someone uploads a read only file.

:) i hope this will help you in case you are getting the same kinda error

Monday, February 25, 2008

HOW TO REDIRECT TO SPECIFIC CONTROL OF SPECIFIC TAB IN DOTNETNUKE?

As every newbie starting the DotNetNuke development has always a question like this in their lives. The basic idea behind doing this is:

We need TABID for redirection to specific TAB. we will pass a query string parameter along with the redirect URL to tell which control to load.
At the default control of that specific module, we will just read the query string and load .ASCX control accordingly into a placeholder control.

I’m trying to make sure how easily we can do this using an example.

STEP 1: Create a default control

Create a control called _default in your root directory which looks like this

_DEFAULT.ASCX

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="_Default.ascx.cs" Inherits=" _Default" %>

<tr>

<asp:PlaceHolder ID="phMain" runat="server">asp:PlaceHolder>

td>

tr>

<tr>

<asp:Label ID="lblModuleSettings" runat="server" resourcekey="lblModuleSettings"

ForeColor="Red" Visible="False">Please update module settings...Portal Admin.asp:Label>td>

tr>

table>

_DEFAULT.ASCX.CS

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using DotNetNuke;

using DotNetNuke.Common;

using DotNetNuke.Common.Utilities;

using DotNetNuke.Entities.Modules;

using DotNetNuke.Services.Exceptions;

using DotNetNuke.Services.Localization;

namespace

{

partial class _Default : PortalModuleBase

{

private string m_ModuelControl = "Contacts.ascx";//1. Default Control to Load

protected void Page_Load(object sender, EventArgs e)

{

LoadModuleControl();//2. Call Module control Loading Logic

}

private void LoadModuleControl()

{

if (Request.QueryString["mctl"] != null) //3. Read control name from querystring

{

m_ModuelControl = Request.QueryString["mctl"].ToString()) + ".ascx";

}

//4. check authorization here if you want. Otherwise comment out this switch

switch (m_ModuelControl)

{

case "Contact.ascx":

//5. Use this code to redirect to access Denied page of DotNetNuke Response.Redirect(Globals.NavigateURL("Access Denied"), true);

break;

case "ContactNotes.ascx":

break;

case "ContactPrivate.ascx":

break;

case "Contacts.ascx":

break;

case "ContactSearch.ascx":

break;

case "ContactSearchDetail.ascx":

break;

case "EditContact.ascx":

break;

case "EditNote.ascx":

break;

}

//6. Load A specific control

PortalModuleBase objPortalModuleBase = (PortalModuleBase)LoadControl(m_ModuelControl);

objPortalModuleBase.ModuleConfiguration = ModuleConfiguration;

objPortalModuleBase.ID = System.IO.Path.GetFileNameWithoutExtension(m_ModuelControl);

phMain.Controls.Add(objPortalModuleBase);

}

So let’s step by step go through the details of the code.

1. If you look at the bold code in _default.ascx, , that is a place holder control of asp.net in which we will load another .ascx control at runtime.

2. Now if you look at the code in _default.aspx.cs you can find the steps in the comment at various places of the code.

3. Use a private variable to hold the control name into it. Initialize it with the default control that we will load if no query string parameter is found in the URL.

4. Initialize the variable with the query string parameter if it is specified in the URL

5. Include the switch statement for authorization if you need to authorize the user, Otherwise put that code in comment

6. Load the specific control in the phMain placeholder of the default control.

So the last thing to do is, When you redirect from any tab, just do this:

TabController objtab = new TabController();

TabInfo objtabinfo = new TabInfo();

objtabinfo = objtab.GetTabByName("Contacts", PortalId);

Response.Redirect(Globals.NavigateURL(objtabinfo.TabID, "", "mctl=" + "ContactNote")));

Remember that for this code to work:

· You need a tab called “Contacts“ in your portal

· You need a control called ContactNote.ascx in your module

· You need to include the namespace DotNetNuke.Entities.Tabs at the top of your page where you write the redirect code above.

Wish you a Happy coding with DotNetNuke.

Tuesday, December 30, 2008

Monday, December 29, 2008

Thursday, December 25, 2008

Wednesday, December 24, 2008

Monday, December 22, 2008

Thursday, December 18, 2008

Wednesday, December 17, 2008

Wednesday, December 3, 2008

Tuesday, December 2, 2008

Monday, February 25, 2008

Popular Posts