jQuery How to build a simple table style switcher

1. Get Started
   Let's create an html table that is showing some sample data. Here is it:
   

   
   <table>
              <tbody>
                  <tr>
                      <th>
                          Column1
                      </th>
                      <th>
                          Column2
                      </th>
                  </tr>
                  <tr>
                      <td>Data1.1</td>
                      <td>Data2.1</td>
                  </tr>
                  <tr>
                      <td>Data1.2</td>
                      <td>Data2.2</td>
                  </tr>
              </tbody>
          </table>
   

   
   
   


2. Let's Add some style to it
   Let's add some simple styling to the table so it looks pretty! here is the css:
   

   
   table{width:400px;border:solid 1px black;}
   th {background:black;color:White;}
   td {color:Black;}
   

   
   
   


3. Thinking about multiple styles of table
   Let's add an id to table and change some things in our css to make it more
   specific.
   HTML:
   

   
   <table id="my-table" class="my-table">
              <tbody>
                  <tr>
                      <th>
                          Column1
                      </th>
                      <th>
                          Column2
                      </th>
                  </tr>
                  <tr>
                      <td>Data1.1</td>
                      <td>Data2.1</td>
                  </tr>
                  <tr>
                      <td>Data1.2</td>
                      <td>Data2.2</td>
                  </tr>
              </tbody>
          </table>
         
   

   
   CSS:
   

   
   #my-table{width:400px;border:solid 1px black;}
      #my-table th {background:black;color:White;}
      #my-table td {color:Black;}
   

   
   


4. Let's build another style
   Let's add another style to table. So now css looks like following:
   

   
      #my-table{width:400px;border:solid 1px black;}
      #my-table th {background:black;color:White;}
      #my-table td {color:Black;}
     
      #my-table-gray{width:400px;border:solid 1px gray;}
      #my-table-gray th {background:gray;color:White;}
      #my-table-gray td {color:gray;}
   

   
   
   


5. Let's add jQuery to switch style!
   

   
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
      <script>
          jQuery(document).ready(
              function() {
                  jQuery("a").click(function() {
                     
                      var table = jQuery("#my-table")[0];
                      if (table.className == "my-table")
                          table.className = "my-table-gray";
                      else
                          table.className = "my-table";
                  });
              }
              );
             
      </script>
   

   
   http://picasaweb.google.com/lh/photo/4KmKLPYDYIwzFS6BbNOfmg?authkey=Gv1sRgCJ2FjqX7hqreRw&feat=directlink
   

CheckBoxList Required Validation in Javascript

ASP.NET CODE:

<asp:CheckBoxList ID="chkList" runat="server">
            <asp:ListItem>Item One</asp:ListItem>
            <asp:ListItem>Item two</asp:ListItem>
            <asp:ListItem>Item three</asp:ListItem>
            <asp:ListItem>Item four</asp:ListItem>
        </asp:CheckBoxList>
        <asp:Button ID="btnSubmit" runat="server" ValidationGroup="CHK" OnClientClick="return validateChk();" Text="Validate"/>

JAVASCRIPT CODE:

function validateChk() {
            debugger;
            var found = false;
            var validated = false;
            var id = document.getElementById("<%=chkList.ClientID %>").id;
            var elements = document.forms[0].elements;
            for (i = 0; i < elements.length; i++) {
                if (elements[i].type == "checkbox" && elements[i].id.indexOf(id) > -1) {
                    found = true;
                    if (elements[i].checked) {
                        validated = true;
                        break;
                    }
                }
            }
            if (found && validated)
                return true;
            else
                return false;
            
        }

Using single ClientValidationFunction for similar validations using custom validator

Here is an example of how to write a common client validation function while using similar kind of validations on more than one asp.net control.
This example is showing how to validate two drop down list using a single javascript function for required
ASP.NET Markup

<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="True" 
                onselectedindexchanged="ddlCountry_SelectedIndexChanged" CausesValidation="false">
            </asp:DropDownList>
            <asp:CustomValidator ID="cvCountry" runat="server" ControlToValidate="ddlCountry"
                EnableClientScript="true" ValidationGroup="REG" Display="None" ErrorMessage="Country is required" Text=" "
                ClientValidationFunction="validateCbo"></asp:CustomValidator>
<asp:DropDownList ID="ddlState" runat="server">
            </asp:DropDownList>
            <asp:CustomValidator ID="cvState" runat="server" ControlToValidate="ddlState"
                EnableClientScript="true" ValidationGroup="REG" Display="None" ErrorMessage="State is required" Text=" "
                ClientValidationFunction="validateCbo"></asp:CustomValidator>

Javascript client validation function:

function validateCbo(source, args) {
        var ddl = null;
        if(source.controltovalidate.indexOf('Country')>-1)
            ddl = document.getElementById('<%=ddlCountry.ClientID %>');
        else
            ddl = document.getElementById('<%=ddlState.ClientID %>');
        if (ddl != null) {
            args.IsValid = !(ddl.options[ddl.selectedIndex].value == 0);            
        }
        else
            args.IsValid = true;
    }   

DotNetNuke 5.x with .net framework 2.0 (web.config)

Everybody, who tried to deploy DotNetNuke 5.x on web servers that is not having .net framework 3.5 requires changes to web.config. You can download this web.config which worked for me.

Hope this helps :)

DotNetNuke - Login control not working!

Some time ago, Somebody emailed me regarding his strange problem. The dnn live website was throwing error and was not able to redirect to login page! So I asked him to login in host acount and uninstall openId authentication provider, because that's the dll that was causing proble. He was staring at and after some time he said, I'm getting error while logging in man!

I laughed a little and give following suggession:

Create a page Sample.aspx which inharits from DotNetNetNuke.Framework.Pagebase and in page load manually authenticate a user host using UserController.ValidateUser method. That will help you login to the site in host account and then delete the page one you are done.

So these kind of problems where host or admin user cannot login with their accounts can be solved by this simple sample page. But be remember to change the host password because we have to use that password in clear format to write the code. Here is the code that I used:

'Imports DotNetNuke.Security.Membership
Dim loginStatus As UserLoginStatus = UserLoginStatus.LOGIN_FAILURE
UserController.ValidateUser(PortalSettings.PortalId, "host", "xxx", PortalSettings.PortalName, "", PortalSettings.PortalName, AuthenticationLoginBase.GetIPAddress(), loginStatus)
Response.Redirect(NavigateUrl(PortalSettings.HomeTabId))

Writing smart DotNetNuke Schedulers that sends email

This post is for those who are using dotnetnuke scheduler for rapidly sending emails to the users. There are times when scheduler fails to complete the job and try running the job again base on retry setting applied to it. Bad news is that, the user who are expecting the email once receives the email twice. If you set retry frequency to an hour or so, and your code meets some bad data like null reference of so, users will get the email every hour.

This description at least clears the thing that we should at least not set retry frequency while sending emails through scheduler. Next thing comes to mind is, there should be a batter way to do it. I personally work on it and think about some way that adds some overhead to the scheduler activity but makes sure that no user will get the same email more than once.

Create a table called tracker that stores following things:
Id - Auto increment
Email - Email sent
Type - default 0, increment it in case if you are using more than one scheduler for sending emails
Date - Small date time that stores date and time the email sent to this user.

The next step is to modify your query to return email that are not in this table. For Example:

Select userid, email
from users u
where email not in (select email from tracker where u.email = tracker.email and convert(varchar(10),date,112) = convert(varchar(10),getdate(),112))

(Please be careful while comparing dates and times in t-sql. If you are using small date time to compare two dates, equality is base on date and time both.)

I think using this trick will never send email to the same user again.
Have fun with your development.

DotNetNuke: Creating a new parent portal in localhost

As we all know, dotnetnuke provides a to build a multiportal environment using a single dotnetnuke installation and I was doing that exercise in order to get that running in localhost.

So let's start building a new parent portal in local environment:

1. Login to host and go to Host > Portals
2. Click Create New Portal
3. Enter portalName Parent1 and username parent1admin, and add all other required data.
4. go ahead an create new portal.

Creating a new portal in local environment will create a new portal Portal1. Now you need to do following after completing above 4 steps.

1. Create a new virtual directory Parent1 and point it to dnn installation that you are using to create this portal
2. Go to Host > Sql and execute this query :
   UPDATE PortalAlias
   Set HTTPAlias = 'localhost/Parent1'
   Where HTTPAlias='Parent1' or HTTPAlias='parent1'
3. Try accessing localhost/parent1
   

We are done with installing a new parent portal.
Hope you enjoyed this trick.

Extending Skin class in DotNetNuke

Are you developing a new skin in DotNetNuke and need additional properties in Skin class? Let's look into how skinning works.

if you look at the top of the every skin, you will find following


<%@ Control Language="vb" Codebehind="~/admin/Skins/skin.vb" AutoEventWireup="false"
Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>


Please see the strong part of the above code. You will find that every skin that we develop in dnn is inherited from DotNetNuke.UI.Skins.Skin.

Ok so now is the time to introduce a new property to the class. Just create a new class like following:


public class MySkinBase : DotNetNuke.uI.Skins.Skin
{
private string _newOne;
public string NewOnw
{
get { return _newOne;}
set { _newOne = value; }
}
}


All you should do next is to use this class in place of DotNetNuke.UI.Skins.Skin in developing your skin like following.

<%@ Control Language="vb" Codebehind="~/admin/Skins/skin.vb" AutoEventWireup="false"
Explicit="True" Inherits="MySkinBase" %>


And you will now get a property NewOne into your skin object development. Enjoy!

What about user Types?

Every time you start developing new solution using DotNetNuke, you probably have a question about user types. If you are creating a job site, you will probably have user types like job seeker, employer etc. Is there any way to set multiple registration and login pages for a portal?

Well, This is tricky. As there is no direct way to multiple login page and registration page. So, I generally use query string parameter to determine the registration type. Once we know which is the right registration control to render (Employer signup or Job Seeker Signup), In addition to writing signup code, I add roles to the created user.

Once you register an employee with Role "Employee" and a job seeker with role "Job Seeker" it will be easier to modify login control and place a role check for logged in user and you can correctly redirect the user to its home without having separate login pages.

Does it make sense to you? Do you have another Idea? please tell me!

DotNetNuke - Access pages without tabId

I'm not sure which version of DotNetNuke included this magic, but if you create a page with tab name Sample Page, then you can simply access that page with portalAlias/SamplePage.aspx.

When I see this thing first time, I was impressed, and tried some more tab names with this. Next is to create a child tab of Sample Page called Child Page and tried and it doesn't work. I scratched my head for some time and tried /SamplePage/ChildPage.aspx and it worked.

I'm using dnn 5.x and it works nicely for almost all the pages.

Then I tried some more magic tabs and I come to know that there are some pages in dnn that are always available to all the portals and child portals regardless of they are created or not. For example, If you type portalAlias/login.aspx it will show a login window. If you try portalAlias/LogOff.aspx it will immediately logoff you!

It's nice to know this thing, because it will be useful when you are developing a new skin. If you forget to place login skin object and want to login or logoff, its easier to do that with this.

I assume this is a magic from dnn friendly url provider. I've come to know about this just before some time and thought it may be helpful to you also!

DotNetNuke path helper methods

1. ModulePath
Useful in – Module Development
Member of – PortalModuleBase Class

Bad Practice:
<asp:image id="img" runat="server" imageurl="/DesktopModules/ModuleName/Images/ImageName.gif"/>
Or
<img src="/DesktopModules/ModuleName/Images/ImageName.gif%E2%80%9D" alt="Alt" />

Good Practice:
<asp:image id="img" runat="server" ImageUrl="<%= ModulePath %>Images/ImageName.gif"/>
Or
<img src="<%= ModulePath %>Images/ImageName.gif" alt="Alt Text"/>

Please note:
a. ModulePath will correctly resolve the path to module image regardless of in whatever the tab you are using.
b. If module name is changed, it will still remain correct.
c. This is also useful when you are linking a javascript file or adding additional css reference.

2. SkinPath
Userfull in – Skin Development
Member of – Skin Class

Similar to ModulePath, SkinPath variable will help you resolve the path to your skin folder. You can use it in similar way as ModulePath.

3. Getting SkinPath in Module Development
Code:
PortalSettings.ActiveTab.SkinSrc will return an full path to your ascx control in skin folder. You can simply use System.IO.Directory.GetParent().Name get folder name.

4. Getting Domain name anywhere in your development cycle
Code:
DotNetNuke.Commons.Globals.GetDomainName(Request);

There many in the list, but that's it for now. Happy coding:)

Converting skin package of DotNetNnuke 4.x to DotNetNuke 5.x

• First step for converting the skin package is to Install dotetnuke 4.x skins to dotnetnuke 5.x.
• Once you install the lagency skin package, now you need to go to Admin > Extensions if you have installed that Skin to Admin Extensions otherwise go to Host > Extensions
• In the skins section, find the skin you want to create 5.x package and click on Edit icon at the starting of it
• This will launch the skin information. Update version number, release notes, licence, owner, company, email etc and press Update.
• Now click on Create Package
• This will launch a create package wizard. As you already change the information about version number, licence and all that, just follow the wizard by clicking Next each time.
• Once you finish this wizard, package is generated at ~/Insatall/Skins
• That zip file package is a dotentnuke 5.x compitible package for your skin.
• Follow the same steps for generating package for container also.

Notes:

• You can use this method to package any extension of dnn 5.x (like skin object, module)
  
• This will generate separate packages for skin and container.
  
• You can use this method to create update package of an existing skin
• If I want to create a single package for installing skin and container, I have to manually merge the files and .dnn files. Please suggest if someone knows about creating a single package for skin and conatainer using this method.
• This is how I have converted Cash 2.0 skin package for 4.x to 5.x
  

Installing dotetnuke 4.x skins to dotnetnuke 5.x

• If skin and container both are in single package, extract the zip files and rename Skins.zip to skinname.zip
• Login to your host account in dnn 5.x installation
• Go to Host > Extensions if you want to install the skin at host level, otherwise go to Admin > Extensions
• Switch the mode to Edit if it is not already in Edit mode
• Click on install extensions
• In the Extension Installation wizard, select your skinname.zip file and click on next.
• It will show you this message:
  "This package does not appear to be a valid DotNetNuke Extension as it does not have a manifest. Old (legacy) Skins and Containers do not contain manifests. If this package is a legacy Skin or Container Package please check the appropriate radio button below, and click Next"
• It will show 3 Radio buttons, Choose Skin and click Next
• Follow the installation wizard by clicking 'Next' throughout the wizard.
• Now to install container of the container of the skin, rename the skinname.zip back to Skins.zip and rename Containers.zip to skinname.zip.
• Follow the same step as above accept for the radio button where you choose Skin, you just need to choose Container this time.
• That's it. We are done with the installation! Happy Administration!
  

Please read the following this article about creating skin package for dotnetnuke 5.x from the skin package of the skin for dotnetnuke 4.x

Cash - New package for dnn 5.x is available

Free dotnetnuke skin Cash is updated and now it has a new installation package that supports dotnetnuke 5.x version also. Stay tuned to know how I converted dnn 4.x skin to dnn 5.x skin.

Thanks

DotNetNuke - Implementing Multi-color skins

Introduction:
Here I’m going to present an approach to create a DotNetNuke skin which has multiple colors using a single ascx skin control and multiple css files.

• Allow user to choose the color
• When user selects the color, post an ajax request to server to store the setting in database and send response
  
• read the response using javascript and change the css file.
  When user comes to the portal again, load right css from server side by reading database settings for the portal.
  
• implement authorization so that only admin and host of the portal can change skins

Theory:
jQuery – jQuery comes into the picture when our page is loaded in client browser and it is ready. We will use jQuery to post ajax request to server using some parameters that can tell server side code what to do. That ajax call will wait for response and it expects response code (true or false) and response data (new css url).

Skin Object – The skin object will contain UI for changing the skin color as well as jQuery code that does the change in UI after interaction of the user. It handles the ajax request and update the database with the new skin file name.

Skin – While rendering the skin, we have to look into the database to check if current portal has any skin related setting available or not. If its not, we will render the default color skin. If it contains the setting, we will read it and apply.

Htmls and css - We will have a single ascx control called HomePage.ascx, with multiple css files blue.css and gray.css. Default is gray.css. Common attributes for the skin will be included in skin.css. common images are stored in images folder under skin root. Images for individual color css will be resided in a images/colorname/ folder. For instance, images for blue.css wll be in images/blue/ folder and same for gray.

Let’s Implement
Extend Skin – Create a new class that inherits from DotNetNuke.UI.Skins.Skin. Add a property for saving cssName. In get section of the property write a code to load css name from database by passing PortalSettings.portalid.

Use new Property – in ascx control where you have inherits section, change the DotNetNuke.UI.Skins.Skin to your class name. and add following after the register section at the top of the ascx control.

<link id="lnkMyCss" rel="stylesheet" href="<%=SkinPath+GridCss %>" type="text/css" media="screen, projection" />

Note: Make sure you have all the ascx, css and images arranged like mensioned in Htmls and css section.

Skin Object – Create a new skin object and add following code to its ascx.

<a href="javascript:void(0);" onclick="changeTheme(this.color);" color="Gray">Gray</a> |
<a href="javascript:void(0);" onclick="changeTheme(this.color);" color="Blue">Blue</a>
<script language="javascript" type="text/javascript">

function changeTheme(color)
{
jQuery.post(document.location.href,{action:'changeSkin',colorcode:color},response);
}

function response(data)
{
jQuery('#lnkMyCss')[0].href=data;
}
</script>

Add following code to Page_Init of the skin object.

protected void Page_Init(object sender, EventArgs e)
{
if (Request.Form["action"]!=null)
{
string action = Request.Form["action"].ToString();
string settingValue = string.Empty;
switch (action)
{
case "changeSkin":
if (Request.Form["colorcode"] != null)
{
string colorCode = Request.Form["colorcode"].ToString();
settingValue = colorCode == "Blue" ? "blue.css" : "gray.css";
BR.BRESS.Skins.DataProvider.Instance().setSettings(PortalSettings.PortalId, "CSS", settingValue);
settingValue = PortalSettings.ActiveTab.SkinSrc.Replace("HomePage.ascx", settingValue);
}

break;
default:
break;
}
Response.Clear();
Response.Write(settingValue);
Response.End();
}
}

Register Skin Object – Register this skin object in ascx control.

<%@ Register TagPrefix="BRESS" TagName="SKINMANAGER" Src="~/DesktopModules/SkinManager/SkinManager.ascx" %>

Note: The Src should contain a correct path of your skin object.
And wherever you like to add the UI you need to include this:

BRESS:SKINMANAGER ID="sm" runat="server" />

Conclusion:
• This article is only for those who knows basics about skin development and skin object development
• The methods and techniques used in this code are for demo purpose and can be improved
• It is a starting point to implement multi-skin multi-color functionality using DotNetNuke skinning technique.
• Simple alternative to this approach is to create multiple ascx controls and apply css to each control separately.
• Suggestions for enhancements and improvements are always welcome

Using ASP.NET Cookies in Javascript and visa-versa

Is any of you creating a module that requires setting cookies and getting it back using javascript? If you want to do so, then you can be in trouble like me! I was trying to set cookies from asp.net code and trying to read the cookie in javascript code, :) bad part of this experience was, I was not able to read the cookies set by asp.net side code.

Then I started googling the proble. I come across several fundamentals, theories and the way asp.net handles the cookies machanism. Finally eggheadcafe has an answer to my problem. Though it was not a straigh forward answer, I got many hints there to solve my problem.

You must be thinking cookie is a vary simple fundamental thing and its nothing to learn about, but believe me, you will find this article informative.

DotNetNuke - Alternative for using getTabByName or getTab

Hey.
many time in dotnetnuke module development, you need to redirect an existing request to another page. I see most of the users use TabController.getTabByName method to get TabInfo object, And then use its TabId property to navigate to that page using DotNetNuke.Common.Globals.NavigateUrl() method.

Getting entire TabInfo object from database for only getting TabId doesn't seems correct in terms of performance. I see many developers who add intelligence to this by adding entire set of tabs for a portal in HashTable and uses TabId as key and TabName as value. We can add some static methods to get the TabId by name or get TabName by Id.

This approach seems to be perfect, but it still needs memory, if we store it in session state. We always have alternative to store the HashTable into Cache also. That will be more proper way to store data. Adding more tricky work is to add SqlCacheDependency into that. So that when set of Tabs changes, it automatically loads the new set of Tabs.

But this is way too intelligent technique. When you don't need the TabIds too many time in your development or you need to redirect to a specific Tab many times, you should use SiteUrl.config. Let's discuss when its useful.

For example you have a module that shows a message about an offer's page in your site, and you are showing the module in many pages. Now when a user clicks on it, we are sure that we need to redirect user to TabId=100. But you cannot place it hard code, Because you are not sure if the page is having a same id on when it will be deployed.

So the simple work around is to create an entry in the siteUrl.Config file for that TabId. Let's say we create an entry which looks for Offers.aspx and redirect it to Default.aspx?tabid=100. And that's it. It will never go to database to find TabId of the offer.aspx. and the code will get rid of the TabInfo loading from database of maintaining the set of tabs in memory for faster access.

I hope I understand the problem well and make you able to give a right trick. Tell me what you think about it?

DotNetNuke skin objects

DotNetNuke skin objects are ascx control (generally found at ~/Admin/Skins folder) . Skin objects are meant to be reusable UI elements that helps showing a single repeating elements of the page.

For instance, If are running a portal of dotnetnuke and want to show up a latest announcement entry in all your parent and child portal users, you can create a skin object that shows that entry and place that skin object to the skin.This way you can simply integrate the display of the latest announcement for all users in smart way using skin objects.

I worked on several skin objects. here is a quick list:

skin object to display custom logo image selected by an individual portal admin. They can upload the image and the change reflects to the entire portal pages
Vertical navigation which contains custom set of menu for advertising and control panel
News and blog feed display
And many more
We can also show/hide the skin object dynamically. For instance, if you like to hide the skin object when there is no announcement for last 2days, its easily possible to do in it.

Skin object offers smart way to reuse your design components.
There are existing skin objects available with dotnetnuke which provides you some interesting features that you can easily integrate and reuse. Skin objects like logo, user, login, breadcrumb, dnnmenu are almost useful in all the dnn sites. Eagleworx shows a complete list of skin objects and the properties provided by them. You can download the latest skin object documentation from download section of dotnetnuke.

Screenshots of the skins available on osdnnskins.codeplex.com

osdnnskins.codeplex.com has following skins available for free

Cash Skin



Nature Skin



Nutica Skin



BluePrint0.1

Easiest way to build connection string

Hey friends.
Most of the time, when a connection string is required, developers write it either manually, or use visual studio wizard from somewhere take make visual studio slower. So here is a quick fast way to do it. Let's build it more faster and easier way.

• Right click on desktop and create a new text document, say cn.txt
• Open that document and save it with .udl extension, cn.udl.
• save and close the file
• you will notice the file icon is now changed
• double click the icon.
• that will open a connection string dialog, same as you see in visual studio.
• choose provider, enter other details acoording to your provider and just test connection and click on ok
• right click that file, and open it in notepad. The file will contain connection string.
• Copy the connection string and use it anywhere you want.

Happy coding :)

skin updated - Nature 0.2 released

Nature skin updated

• Nature 0.2 released
• Submenu is fixed now
• Header links are no top right aligned
• link colors are fixed
• container fonts for Head and SubHead are fixed
  

Enjoy the new version of this skin and tell me the issues with this.

Using JQuery to dynamically change dnn menu

Dotnetnuke released a new dotnetnuke menu provider some time back, and also released dotnetnuke 5.0 with inbuilt support of JQuery. When I started learning about new things in dotnetnuke 5.0, I wonder how we can use JQuery and new menu provider feature to dynamically change the menu. This leads me to a very basic simple implementation which I will share with all of you here.

So let's start building the sample right away:

• Right click on Admin/Skins folder and add a new web control(C#), let's name it SwitchMenu.ascx


• Go to code behind view and add this:
  

  
  protected void Page_Load(object sender, EventArgs e)
  {
          DotNetNuke.Framework.jQuery.RequestRegistration();
  }
  

  
  


• Go to design view and add following:
  

  
  <a href="javascript:void(0)" id="lnkNavy">Navy</a>  <a href="javascript:void(0)" id="lnkBlue" >Blue</a>  <a href="javascript:void(0)" id="lnkOrange" >Orange</a>
  <script language="javascript" type="text/javascript">
   jQuery(document).ready(function() { 
      
       jQuery('#lnkNavy').click(function(e) { 
          
              if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnBlueMenu'))
              {
                  jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnBlueMenu');
                  jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('mainMenu');
                  jQuery('#menu').removeClass('menu_bg_blue');
                  jQuery('#menu').addClass('menu_bg_navy');               
              }   
              else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnOrangeMenu'))
              {
                  jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnOrangeMenu');
                  jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('mainMenu');
                  jQuery('#menu').removeClass('menu_bg_orange');
                  jQuery('#menu').addClass('menu_bg_navy');             
              }
           });
            jQuery('#lnkBlue').click(function(e) { 
             
              if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('mainMenu'))
              {
                  jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnBlueMenu');
                  jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('mainMenu');
                  jQuery('#menu').addClass('menu_bg_blue');
                  jQuery('#menu').removeClass('menu_bg_navy');               
              }   
              else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnOrangeMenu'))
              {
                  jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnBlueMenu');
                  jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnOrangeMenu');
                  jQuery('#menu').addClass('menu_bg_blue');
                  jQuery('#menu').removeClass('menu_bg_orange');               
              }
           });
           jQuery('#lnkOrange').click(function(e) { 
             
              if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('mainMenu'))
              {
                  jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnOrangeMenu');
                  jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('mainMenu');
                  jQuery('#menu').addClass('menu_bg_orange');
                  jQuery('#menu').removeClass('menu_bg_navy');               
              }   
              else if(jQuery('#dnn_dnnNAV_ctldnnNAV').hasClass('dnnBlueMenu'))
              {
                  jQuery('#dnn_dnnNAV_ctldnnNAV').addClass('dnnOrangeMenu');
                  jQuery('#dnn_dnnNAV_ctldnnNAV').removeClass('dnnBlueMenu');
                  jQuery('#menu').addClass('menu_bg_orange');
                  jQuery('#menu').removeClass('menu_bg_navy');               
              }
           });
      });
  </script>
  

  
  


• Go to your sample skin page and register the new skin object
  

  
  <%@ Register TagPrefix="PA" TagName="SWITCHMENU" Src="~/Portals/_default/Skins/Planet Aviator_0_1_0/SwitchMenu.ascx" %>
  

  
  


• Now, let's add DNN Navigation control to the skin. Add this:
  

  
  <dnn:NAV runat="server" ID="dnnNAV" ProviderName="DNNMenuNavigationProvider" IndicateChildren="false"
              ControlOrientation="Horizontal" CSSControl="dnnBlueMenu">
          </dnn:NAV>
  

  
  


• Let's add css for all the dynamic menu now:
  

  
  .menu_bg_blue {background-color:Blue;}
  .menu_bg_navy {background-color:Navy;}
  .menu_bg_orange {background-color:orange;}
  /*----------------------------------------------------------------------*/
  /* menu container css */
  .dnnBlueMenu                       {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px}
  .dnnBlueMenu_bg                    {margin: 0 10px 0 10px; height: 40px;}
  .dnnBlueMenu_left                  {}
  .dnnBlueMenu_right                 {}
  
  /* root menu css */
  .dnnBlueMenu .root                 {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: White;background-color:Blue}
  
  /* general submenu css */
  .dnnBlueMenu .m                    {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
  .dnnBlueMenu .hov, .dnnBlueMenu .bc   {}
  .dnnBlueMenu .m .mi                {background-color: Blue;}
  .dnnBlueMenu .m .icn               {padding-left: 5px; width: 20px;}
  .dnnBlueMenu .m .mi *              {color: white; margin-right: 5px;}  /* change * to .txt with latest webcontrols */
  .dnnBlueMenu .m .sel, .dnnBlueMenu .m .bc {}
  .dnnBlueMenu .m .hov               {background-color:gray;}
  
  /* glossy rounded corners */
  .dnnBlueMenu .m .first             {height: 30px;}
  .dnnBlueMenu .m .first .icn        {}                 /*needed to hide TR/TD image tiling*/
  .dnnBlueMenu .m .first.hov         {height: 30px;}
  .dnnBlueMenu .m .first.hov .icn    {}   /*needed to hide TR/TD image tiling*/
  
  .dnnBlueMenu .m .first.last        {height: 32px;}
  .dnnBlueMenu .m .first.last .icn   {}    /*needed to hide TR/TD image tiling*/
  .dnnBlueMenu .m .first.last.hov    {height: 32px;}
  .dnnBlueMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/
  
  .dnnBlueMenu .m .last              {height: 26px;}
  .dnnBlueMenu .m .last .icn         {}    /*needed to hide TR/TD image tiling*/
  .dnnBlueMenu .m .last.hov          {height: 26px;}
  .dnnBlueMenu .m .last.hov .icn     {} /*needed to hide TR/TD image tiling*/
  
  .m .break .icn                  {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
  /*----------------------------------------------------------------------*/
  /* menu container css */
  .dnnOrangeMenu                       {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px;}
  .dnnOrangeMenu_bg                    {margin: 0 10px 0 10px; height: 40px;}
  .dnnOrangeMenu_left                  {}
  .dnnOrangeMenu_right                 {}
  
  /* root menu css */
  .dnnOrangeMenu .root                 {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: Black;background-color:orange}
  
  /* general submenu css */
  .dnnOrangeMenu .m                    {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
  .dnnOrangeMenu .hov, .dnnBlueMenu .bc   {}
  .dnnOrangeMenu .m .mi                {color: Black;background-color:orange}
  .dnnOrangeMenu .m .icn               {padding-left: 5px; width: 20px;}
  .dnnOrangeMenu .m .mi *              {color: white; margin-right: 5px;}  /* change * to .txt with latest webcontrols */
  .dnnOrangeMenu .m .sel, .dnnBlueMenu .m .bc {}
  .dnnOrangeMenu .m .hov               {background-color:gray;}
  
  /* glossy rounded corners */
  .dnnOrangeMenu .m .first             {height: 30px;}
  .dnnOrangeMenu .m .first .icn        {}                 /*needed to hide TR/TD image tiling*/
  .dnnOrangeMenu .m .first.hov         {height: 30px;}
  .dnnOrangeMenu .m .first.hov .icn    {}   /*needed to hide TR/TD image tiling*/
  
  .dnnOrangeMenu .m .first.last        {height: 32px;}
  .dnnOrangeMenu .m .first.last .icn   {}    /*needed to hide TR/TD image tiling*/
  .dnnOrangeMenu .m .first.last.hov    {height: 32px;}
  .dnnOrangeMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/
  
  .dnnOrangeMenu .m .last              {height: 26px;}
  .dnnOrangeMenu .m .last .icn         {}    /*needed to hide TR/TD image tiling*/
  .dnnOrangeMenu .m .last.hov          {height: 26px;}
  .dnnOrangeMenu .m .last.hov .icn     {} /*needed to hide TR/TD image tiling*/
  
  .m .break .icn                  {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
  /*----------------------------------------------------------------------*/
  /* menu container css */
  .mainMenu                       {font-family: Verdana, Arial, Helvetica, sans-serif; cursor: pointer; font-size: 13px}
  .mainMenu_bg                    {margin: 0 10px 0 10px; height: 40px;}
  .mainMenu_left                  {}
  .mainMenu_right                 {}
  
  /* root menu css */
  .mainMenu .root                 {text-align: center; line-height: 40px; padding: 12px 12px 12px 12px; color: White;background-color:Navy}
  
  /* general submenu css */
  .mainMenu .m                    {width: 160px; font-size: 11px; z-index: 1000; line-height: 2em;}
  .mainMenu .hov, .dnnBlueMenu .bc   {}
  .mainMenu .m .mi                {background-color: Navy;}
  .mainMenu .m .icn               {padding-left: 5px; width: 20px;}
  .mainMenu .m .mi *              {color: white; margin-right: 5px;}  /* change * to .txt with latest webcontrols */
  .mainMenu .m .sel, .dnnBlueMenu .m .bc {}
  .mainMenu .m .hov               {background-color:gray;}
  
  /* glossy rounded corners */
  .mainMenu .m .first             {height: 30px;}
  .mainMenu .m .first .icn        {}                 /*needed to hide TR/TD image tiling*/
  .mainMenu .m .first.hov         {height: 30px;}
  .mainMenu .m .first.hov .icn    {}   /*needed to hide TR/TD image tiling*/
  
  .mainMenu .m .first.last        {height: 32px;}
  .mainMenu .m .first.last .icn   {}    /*needed to hide TR/TD image tiling*/
  .mainMenu .m .first.last.hov    {height: 32px;}
  .mainMenu .m .first.last.hov .icn {} /*needed to hide TR/TD image tiling*/
  
  .mainMenu .m .last              {height: 26px;}
  .mainMenu .m .last .icn         {}    /*needed to hide TR/TD image tiling*/
  .mainMenu .m .last.hov          {height: 26px;}
  .mainMenu .m .last.hov .icn     {} /*needed to hide TR/TD image tiling*/
  
  .m .break .icn                  {font-size: 1px; height: 1px; } /*ensure that all menu breaks are only 1px high */
  

  
  


• Okie, that's it, now we are ready for the test. As simple as that...
  

Further Improvements:

• Add some personalization so that we can save this setting for all users seperately.

As I'm new to both JQuery and Dotnetnuke 5.0, I would like to know what more we can improve here

Thanks freednnskins.com for posting about my skin CASH

Thank you freednnskins.com
Thank you for appriciating the skin Cash and including it in your article about free dotnetnuke skins. Thanks very much.

Who is using skins of OSDNNSKIN?

hey All,
Thanks for evaluating all the free skins. I'm not quite getting any response or feedback from any of the users. Please get back to me with some suggessions, feedbacks and bugs so that I can countinue working with skin. Tell me which are the sites you are using these skins.
Also post suggessions about which xhtml template you like to see as free dotnetnuke skin?
Thanks for the greate help again.

All new Dotnetnuke Navigation Provide

Hey
Dotnetnuke navigation provider is also upgraded with many new releases of dotnetnuke. I come across some nice demo of all new features. Now you can create an entire menu css using a single attribut in dnnNav control with CSSControl attribute. There are some good tutorial video to learning this new feature at : http://www.codeendeavors.com/. MimimalExtropy skin in download section of this website is very usefull for learning the new provider.
Hope this also help you.

Dotnetnuke 5.0 skin packaging

Hey, Welcome back!
I'm learning Dotnetnuke 5.0 skinning, and I think I must share some of the beautiful things I like about dotnetnuke 5.0 skinning and packaging.
When I come to know that dotnetnuke 5.0 skinning introduces a new packaging for skin install and that includes xml file with .dnn extension. It contains license, release notes and version text. Another thing was, each file you want to include in package should have an entry in .dnn xml file. So that is really a boaring task. Creating node and adding and tags for each of the package file.
So I thought we can just write a console application that generates the .dnn file for us. And thinking about using System.IO and System.Xml namespaces of .net framework to do so. But you know, I then come across a feature. If you login to host and go to Host > Skin and if you are in edit mode, it will show you an option 'Create Skin package'. That will help you create a skin package for your existing skin.
So here is how I develop a new skin:

• Create a folder for skin, copy version.txt, releasenotes.txt, license.txt and a single .ascx control with
• Copy .dnn file from existing skin, and rename it by your skin name.
• Remove all file entries in the skin section and add your 5 entries.
• zip and install skin.
• start developing skin, add images and css.
• use create package wizard to regenerate the dnn file again with all your files.

Hope this helps

Recaptcha.net control in UpdatePanel

Hey,
If you are looking for good free advanced captcha tool, just use Recaptcha. Its a nice free to use pluging available as asp.net plugin dll. There are code plugins available for various programming languages, ajax and non-javascript environment. So i like it. I just find it from some place and started integrating it to my demo project.
Everything goest well with it, accept when I place the control between UpdatePanel control, it was causing problem. It was disapearing when the page postbacks. The work arround to fix this is to make the ChildrenAsTrigger=false. This will fix the problem.
Have fun with this ready made feature and use it without worry in your asp.net projects.

I'm back

Hey friends,
There is long time since we posting an entry to a blog, it was like a vacation mode for my blog. But don't worry, I'm back with more tips, tricks, free stuff and more, keep in touch.

Thanks

New version of Cash released

Hey all,
New version of skin Cash is released. Here is a quick update:

• Cash0.2 released
• New containes (left, special, default, default-notitle)
• fixed submenu styling issues
• dotnetnuke logo is added
• login, user and break crumb controls are moved above content pane
• preview images are added

Here is a screenshot:

Modal popup and flash

Adding a modal popup in a document which is having a flash's object tag may make you in trouble. Because I was having a same kind of problem. To fix it just add another parameter to your object tag (and also to embed tag if any) wmode="opaque". This will allow your popup to show above the flash file.
For those who are using swfobject.js for displaying the flash swf file, just go to shource of the the js file and find this.addParam("quality",q); line. Add another like before or after it,
this.addParam("wmode","opaque"); This will fix your problem.
Hope this will help to you also.

Keep it up

I would like to thank all my visitors and will keep the good work going. March was a very good month as a technical blog for me. I would look forward for more and more technical source code, tutorials, articles etc. Please keep in touch and post your feedbacks.

Here is a quick statistics of the march month:

All my free skins are now opensource under New BSD License

I have just created an open source project on codeplex.com for Open Source DotNetNuke Skins. This is an open source initiative to provide good quality dotnetnuke skins for free. Downloads of all my free skins are available there under New BSD Licence. I would like to here from you guys which open source template you would like to get as dotnetnuke skin. I'm also looking for developers who can actively participate into it. Please visit project page for more information.

DotNetNuke - sql to get if there are sub tabs to a tab

SELECT  * FROM tabs
where parentid=@TABID

DotNetNuke - Copy skin of tab to multiple pages using T-SQL

UPDATE Tabs
SET
   SkinSrc = (SELECT SKINSRC FROM Tabs WHERE TabId=@TABID_TO_COPY_FROM)
WHERE TABID = @DTABID_TO_UPDATE

From DotNetNuke Forums.

Getting the code you want from DotNetNuke

Introduction:
DotNetNuke development is always an interesting for me. New developers come to the forums posting same silly questions again and again, and guys out there on the forums give them a gentle reply with some guidelines. This happens always everyday on DotNetNuke Forums. Sometimes i think is it really hard to find what we want from DotNetNuke source and DotNetNuke web app?

Understanding the way DotNetNuke works:
I think developers should start learning DotNetNuke from the basic understanding about portals, tabs, modules, skins, skin objects etc. Don't start your development before understanding these terms. I am not going to introduce or summarize these terms as you will find many web logs regarding this.

Getting started with development:
Once you get basic understanding about this, you will be able to understand how DotNetNuke development will go for you. Once you are done with this, whenever you need to write a code that you don't have ask this questions to your self: Is DotNetNuke doing this? How DotNetNuke is doing this? For instance, if you are looking for code to dynamically create a tab in dotnenuke. you should ask, is DotNetNuke creating dynamic tabs? and the answer is obviously yes. Second question is how it is creating the tab? This is a hard question for new developer. Basically, all the DotNetNuke admin related stuff can be found in admin directory. If you look at ~/Admin/Tabs/ManageTabs.ascx, You will see the page that is used to create a new tab from DotNetNuke UI. Click on update link and you can easily find the code written in vb. You just need to find a part of code you basically want. You can also convert this code to c#.

How to search the code i want?
Well its really depends upon what code you want. But if you think like the way I demonstrated above, you will probably find the code you want after some trial and errors. The big help will be from the DotNetNuke UI and the way the directory structure is provided. Let's take another example of updating a user. So for finding that code, if you look at admin folder, you will find ~/Admin/Users where we think the code can be. Let's try that folder first. Opps! looking at the folder increases the problems, we have many controls in it unlike tabs folder. So let's try the controls one by one. Just open the ascx control on by one in design mode and see if you can find update button on it. Well the control ~/Users/User.ascx controls a floppy icon which is obviously a universal icon for save in DotNetNuke . so let's see what is written in the code of the click event of it. Well it contains a code to create a new user as well as update an existing user. Am I right? Ok, so this code says UserController.UpdateUser() is a method you can use to update the user. Just pass userportalid and userinfo object to it, and it will update the stuff. So if you want to implement a custom user profile update page, you just need to get the userInfo object from UserController.GetUserByName and assign the new values to the object properties and UserUser Method of the UserController class. An you are done.

Conclusion:
So basically DotNetNuke has all the code you want. You just need to guests where can i find the code and just go through the code and you will definately find the code you want. Accessing source code is more complecated than accessing web application because you don't have UIs to compare with, but once you got familiar with DotNetNuke , you will find your required code in the source code also. I think DotNetNuke documentation is also helpful finding the right code as well as if you understand the way DataProvider and SqlDataProvider implemented, it will be fun digging into the code.
Best luck with your DotNetNuke code review and hope you will find the code you need from DotNetNuke .

Free DotNetNuke skin template of BluePrint CSS framework

There are lots and lots of css framework available across the world which means to solve the repetative css code writing problem for you. There are two remarkable frameworks that earn respect in the designing web 2.0 websites, 960 grid framework and BluePrint css framework. There are some good articles for comparing the the two and lots of other one, and most of the discussions ends with BluePrint css framwork is better than anyone else and after that 960 css framework. You can just click here for search results about comparing BluePrint vs 960 framwork. There are good css frameworks which can be found through google by the term Css Framework.


I found an implementation of 960 grid framework for dotnetnuke in dotnetnuke forums. You can visit the site here. Its always helpful to get this kind of efforts available online. Because of this implementation news, I started thinking about which is the css framework that really can help speed up the skin development in dotnetnuke. As 960 is a good option to go with, those who want to use 960 will get started with the implementation at http://www.dnngrid960.com/. Those who think BluePrint is a better option, I implemented a very basic skin. Here is how it looks like the one shown in the image. Here is a quick summary:

1. The template is of so basic lavel
2. There is a single container
3. Single skin file with html4 strict doctype validation.
4. No skin objects or dotnetnuke controls are added in it
5. Very light weight and simple template

You can download the skin template from here. The template will help you implementing your skin quickly.

You can find an example skin BluePrint0.1 implemented here.

• The example skin implementation is a very basic level and same as the default dnn blue skin
• Tried implementing the sking with just a grid.css and only core basic classes so that everyone can understand the dnn classes as well as blue print css classes easily
• IE and Mozilla fonts are leaved intentionally different so that users can understand they can fix ie related css stuff in ie.css
• No images, single basic container.
• YSlow : 28.4k Stylesheet files(4 files), 0.05k image (BluePrint.png), 169.2k Javascript files, total 214.4k with 17 requests.

Hope this will help you understand the BluePrint css implementation as well as help speed up your dotnetnuke skin development.

Free DotNetNuke Skin - Nutica

My third free dotnetnuke skin converted from a free xhtml template. Here is a quick description:

• Different layout support - supports one column, two column, three columns
• Different containers - 4 containers, each for left, right and middle column and a middle column block quote container
• Single package for skin and container, its working in dotnetnuke 4.5.5, but if its not working for you, extrack the file, and you will get different zips for skin and container, paste them to different folder and rename them with Nutica.zip
• Again, the limitation with this is, menu and submenu are not formated properly and not looking too good. please tell me how can we improve this?
• Download the skin

Please give your valueable feedbacks about the skin, so that i can improve the stuff. Providing feedback will help me understanding the skins conversion, that will help me write my tutorial about converting xhtml template to a dotnetnuke skin.

Note: Free skins are in this blog are distributed under creative common licence, you can use all skins for free, but please provide credit link to my blog. Thanks

Adding javascript events to dropdownlist items

This code applies to all the controls which contains ListItem, Here is a code sample for DropDownList:
XHTML Code

<asp:DropDownList ID="DropDownList1" runat="server">
 <asp:ListItem Value="1">Item 1</asp:ListItem>
 <asp:ListItem Value="2">Item 2</asp:ListItem>
</asp:DropDownList>

C# code

foreach (ListItem item in DropDownList1.Items)
{
        item.Attributes.Add("onclick", "itemclick(this);");
}

Javascript code:

function itemclick(obj)
{
            alert(obj.text);
            alert(obj.value);
}

DNN 5 - Get All tabs

TabController controller = new TabController();
TabCollection tabs = controller.GetTabsByPortal(0);
IDictionaryEnumerator hs = tabs.GetEnumerator();
while (hs.MoveNext())
{
        TabInfo tab = (TabInfo)hs.Entry.Value;
        Response.Write(tab.TabName + "<br/>");
}

Flash Remoting with ASP.NET

Before some time, I was involved with the project which requires a flash application to call asp.net application and gets data from there. There are obviously many ways for doing it. The way we implemented it was a bit tricky. We used Macromedia Flash Remoting MX which is a product by Adobe. Macromedia Flash Remoting MX allows a flash application to call an asp.net service (method) using remoting connection. According to the theories i've gone through on adobe, this way of calling a service of asp.net in place of using web services is more faster. The bad part of that experience was, none of the documentation samples were working directly and there are lots and lots of duplicate articles and links which discribes almost same code for sample. Finally, we manage to get through that and created a FACADE architecture at asp.net side which works like following:

• Flash application will call gateway.aspx at the asp.net website with some parameters in the request and name of class which is remotely invoked
• gateway.aspx will create an instance of the class described by the service parameter and passes all the request params to constructor as a collection
• The FACADE class then reads the parameters and decides which method to call, and it calls that method from business logic layer and returns the output to flash application

This story works nicely as a theory and practical for us, and I was satisfied with the way it was working.

There is almost a year passed after that, and today morning i came across an open source project AMF.NET which is an open source version of flash remoting. I was just reading the documentation and wondering if i can implement the thing again. I was surpriced that i get through this also.

Initially, i started implementing it and i was not quite getting it, then i came across an article on http://codebetter.com/blogs/karlseguin/archive/2006/04/13/142770.aspx which has some links about the documentation. I didn't quite get some good documentation but a comment on the post also helped me.

You can download the code from here

Using Sample code:

• Extract zip file and open the project.
• Add a blank Default.aspx page and run it.
• the url looks like http://localhost:3434/AMF/Default.aspx
• Now open the facade.fla in flash 8. Also open util.as
• In Util.as, line 12, you will require a service url as a first parameter, replace the with gateway.aspx of your application url, for example, http://localhost:3434/AMF/gateway.aspx.
• gateway.aspx will be available in the dll in the bin directory.
• That's it, run your AMF project and be in the debug mode, place breakpoint at getUser method of the User.cs in the app_code.
• Run your flash application and enter username and password, and click on button. If everything goes well, you will be redirected to scene 2 and will see label over there.

After some days of writing this article, I got a comment from a user who pointed me to yet another flash remoting open source library. This one is a simple to understand. You can find the library on codeplex at http://dotnetflex.codeplex.com/ the source code is available. This library gives some better implementation of flash remoting because its much more simpler to understand than AMF. I downloaded the library from the source code section of the site and try my hand on it. I got it working in almost an hour. So hopefully developers will simply get a quick start with this. The wiki on the site provides some implementation details from asp.net side, but there is no source code sample for flash, I just tried same file as i used in the AMF.NET with some minor changes and its working nicely. Hope you all find it helpful.

You can download the file from here. You can also find a link in DOWNLOAD section of this blog also. To test the code, follow the same step described in AMF.NET section. Sample Application description:

• Flash application displays a Login page with username and password and a login button
  clicking on login will calls a method getUser(HashTable ht) of an asp.net application from flash side
• after getting a successfull return value, it redirects to scene2

Enhancements that can be applied at Flash Side:

• I don't even know how to create a password textbox in flash, and i want to display a username returned from asp.net in scene2.
• I'm working on this but if anybody can help, it would be appriciated.

Please note that I don't know flash as well as action scripts, But I'm good at learning, and i have good experience on developing asp.net applications.

Thanks and happy coding. :)

How to use 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.

DotNetNuke - Clearing cache dynamically or programmaticaly

Perfomance is a key requirement for every application, and so does it is for DotNetNuke web applications also. DotNetnuke uses data caching as an inbuilt approach and provides a provider for cache also. It always adds good perfomance gain by setting the proper cache value and cache policy to you dotnetnuke web application. But there are times when you need to clear the cache of the application. If you are a host or admin and you want to manage it from the from end, you can go to :
Host - Host Settings - Advance Settings - Perfomance Settings
You can find a clear cache button there which will help you clearing cache. But there are times when this is not logical. For intance if you are allowing a user to choose a new skin from the list, when user clicks and applies a new skin, at that time you have to clear the cache manually, otherwise changes will not reflect properly.

DotNetNuke.Common.Utilities.DataCache is a class which will help you clearing cache at various occations like I discussed above. In our scenerio, we have to clear portal cache and we can do that by calling
DotNetNuke.Common.Utilities.DataCache.ClearPortalCache(PortalId, false);
And its as simple as that. There are lots of other functions to clear cache starting from clear, like ClearModuleCache or ClearModulePermissionCache. You can use them as and when required.
Hope that helps

DotNetNuke - Reset LoginTabId of a portal

Hey friends,
lots of time in DotNetNuke development, we change the default LoginTabId from site settings for portal 0 and forget to add the login module in the newly added tab. That will cause you into the problem. You can reset it by executing the following t-sql script:

update Update {databaseOwner}{objectQualifier}Portals
Set
   LoginTabId=NULL
Where PortalId=@portalid
-- by default if its in portal 0 with no qualifier then you can execute
--update Update dbo.Portals
--Set
--   LoginTabId=NULL
--Where PortalId=0

JavaScript Validation: Alphanumeric and underscore only

//add this to textbox :onkeypress="validate(event);"
// validates and don't allow typing characters other than a-z,A-Z, 0-9 and _
function validatePortalName(e)
{
if(window.event) // IE
keynum = e.keyCode;
else if(e.which) // Netscape/Firefox/Opera
keynum = e.which;
return ((keynum >= 97 && keynum <=122)(keynum >= 65 && keynum <=90)(keynum>=48 && keynum<=57) keynum==95);
}

Note: code is tested in ie7 and mozilla firefox 3.0.6. Please test in the borwser you target before using it in production. regards

converting JQuery samples into ASP.NET - Coda-Slider

JQuery is becoming popular now a days and there are lots and lots of new samples, plugings and small utilities are available across the web. Apart from the too many demos of plugins and UI, people are building nice looking samples which can be a plugable add on to your website. When I was browsing through google for JQuery samples, I see Coda-Slider, an HTML, CSS, JQuery sample that looks like a tab at first signt but when you change the tab, and actually it is, but it changes the slides stylishly.

After getting that, what i was doing is, trying to create and xml for the slides and get it working on asp.net with c# backend. So downloaded the files and just started converting it. Here is what i've done.

• I assumed i need to dislpay different product slides on the home page of the site, so I have created the xml and placed some dummy product data into it.
• Used sample html, and pasted all the required js and css into root directory.
• Added the requeired code in the aspx file and used repeater for the slides
• And that's it, i got it working.

I just name it a product slider. There are lots of improvements that can be done on it, but before that I am trying to implement it in DotNetNuke. From this code, anyone can create a module called ProductSlider, and just adjust the paths of js and renaming the css with modules.css will work.

You can download Coda-Slider from its website. You can aslo donwload asp.net version of it which i named Product Slider.

Please write back if you have troubles with implementation of dotnetnuke module.

Free DotNetNuke Skin : Nature

Free oswd.org template Nature is converted into a dotnetnuke skin.
Here is a quick summary of the skin:

• Validate XHTML 1.0 Strict
• Only root level menu its are having styles
• Dnn logo and search, login and username skin object styles can be improved by adding appropriate styles.
  

You are free to download and use this skin under creative common licence. You can download the skin from here

Modalpopup in DotNetNuke

Introduction
Web application interfaces are becaming more and more advanced and we see modal dialogs in many popular websites. One of the best social bookmarking site Digg uses modal popup for log In. As a developer, when you want to implement modal popups, you should know abcs of it. I've written an article about creating a simple modal popup in HTML4 after learning some basics of html, css and javascript. After almost a month, I was looking at the search keywords and dotnetnuke forums, and I have come to know that users want to implement modal popup in dotnetnuke also. So I just thought it would help to just guide those users.
Which Doctype are you using?
Well If you are using dotnetnuke 4.x and want to implement modal popup, first thing you should check is, which doctype your sking is using. If you don't know that, its really simple to know that. Just run your application in browser, and from View > View Source look at the very first line of browser source, it must be showing a doctype tag.
Implement in HTML4
Once you know the doctype tag, if you are using HTML4 doctype, then you can use my previous article which shows how you can create modal popup in HTML4. That article focus on javascript and css code to implement a simple modal popup dialog in your web application. You can change that modal background color and design your own popup design using that. The javascript code can be used as it is except you need to change the control ids according to your code if you are not using same ids as i have used in my html code give in that article.
Implement in XHTML
If you are using XHTML strict or transitional doctype then you can Ajax Control Toolkit's modal popup extender control. If you want to use ajax control toolkit controls in dotnetnuke, you have to learn how to do that, and this article can help you to quickly get familiar with that.
Implement using jQuery
Another way to implement modal popup in dotnetnuke for XHTML doctype is to use jQuery. You can easily get a modal popup plugin written in jQuery which you can use in dotnetnuke also. Here is an example to get it from google search.

If you are having problems referencing jQuery js and other js files, you can use ModulePath and SkinPath variables, to help browsers find right path in dotnetnuke application. If you are adding jQuery at module level and you have placed the jquery js and plugin js in module's directory, then used prefix like following to make sure browser will get the js properly.

<script src="<%=ModulePath%>jquery.js" type="text/javascript" />

and in same way if you using jquery at skin level then you can use SkinPath variable.

Hope you enjoyed the summary about creating a modal popup in dotnetnuke. Please write me your feedback if you need code along with this.
Happy coding :)

Google Map Asp.Net Control

Hey friends,
Google's Map API is one of the well known apis for mapping. Integrating that api into an asp.net web applications is a challenging working and we were googling around the web for getting an asp.net control for google map api.

First of all, we implemented javascript based apis for google maps. That was working nicely. The only problem we found that map is loading after all of the content of the page is loaded. The obvious reason behind that is, we are using javascript. So we thought we can improve the code by making a server side implementation of the code.

There are lots and lots of results on the web and most of them are not usable for me, either they are not working or they are implemented in framework 3.5 and we need for framework 2.0.

After juggling with downloading codes and testing them around, finally we got a working example. here is a link: http://www.codeproject.com/KB/webforms/Google-Maps-User-Control.aspx. I hope this will help when you need to implement your code, and you will not have to go for google it again and again.
Happy coding :)

Accessing ASP.Net Controls in JavaScript

Hey again,
Many times in our developement, we need some code to clear a form, or setting all the drop down lists to its zeroth indexes, or something related to that. At that time, writing a server side code using ajax is not a good practice, and doing it right away without ajax is the worst idea to deal with the situation.
Keeping that in mind, following code will help a lot, for example if we want to clear all the text boxes of the form we can write something like:

var inputElements = document.getElementsByTagName("input");
for (var count=0; count < inputElements.length; count++){
    if(inputElements[count].type === "text"){
       inputElements[count].value="";
    }
}

Here is a list of input types that you can deal with like i have done in line 3 (inputElements[count].type)

• For TextBox we have text
• For DropDownList or html select, we have select
• For RadioButton or RadioButton list, we have radio
• For CheckBox or Checkboxlist, we have checkbox
• For File Input, we have file

Note that all the types are in lower case. Regardless of they are asp.net controls or html controls, they will all became inputs at the clients end, so we can easily deal with them like above javascript. The only difference between them will be their ids. If any control is marked with runat=server attribute, its id will be generated by asp.net and that id can be accessible using control's ClientID property.

Hope this will help. Happy coding with js :)

Free DotNetNuke Skin : Cash

Hey friends,
Here is a cool new oswd html template converted into DotNetNuke Skin. The original template can be found here. I've just converted that cool template into DotNetNuke skin. Now its ready to use for all of you under Creative common licence, so you can use the skin for free but you have to place the credit links for hosting columbia and my blog as it is.
Please note that this skin is part of my excersice of how to create a DotNetNuke skin from xhtml template. so its not ready for the production purpose.
You can donwload the skin here

Here is a quick summary:

• CSS and XHTML 1.0 Transitional Validation.
• Tested in DNN 4.5.8 and works well.
• Tested in IE6 and Mozilla 2,3 and works well.
• submenus are not looking as per skins root level menu its, its still to be fixed
• You can do whatever you want with this template, just keep the Hosting Colombia link at the bottom as well as my blog's link for credits. Enjoy!

I'm preparing the tutorial for converting the template into a dnn skin and will publish soon, stay tuned...

Hope this will help...thanks

How to create a simple SEO Module in ASP.NET

Hey friends,
In the development life, we often develop asp.net pages that shows various category listings and product listings. Creating a page somewhat like http://yourDomain.Com/Categories.aspx?cid=123. As we all know, this kinda urls are not search engine friendly urls. The simplest way to make these urls search engine friendly is to use url rewrites.

There are lots and lots of url rewrites available across the web which converts above url to something like: http://yourDomain.com/cid/123/Categories.aspx or may be http://yourDomain.com/Categories123.htm. So that would make the url search engine friendly.

The next thing comes in SEO is to make proper entries for page's title, Description and keywords. We can set these things using meta tags. which looks something like

<meta content="Description of the content in the page" name="description"/>
<meta content="keywords related to the content" name="keywords"/>

So next thing comes is, how to make title, description and keywords different according to the querystring value of category in our above example. Well my approach to deal with this is:

1. Create an Xml file which stores category id, title, description and keywords. Here is a sample xml that looks like:
   

   
   <?xml version="1.0" encoding="utf-8" ?>
   <category>
    <entry id="29" keywords="keywords for category 29" title="category name and some most relevant keywords" description="description about category"/>
    <entry id="31" keywords="keywords for category 31" title="category name and some most relevant keywords" description="description about category"/>
    <entry id="32" keywords="keywords for category 32" title="category name and some most relevant keywords" description="description about category"/>
   </category>
   

   
   


2. Add asp.net literal control to header of the page. Please note that if you are using the master page, you should add this control to header tag of master page, otherwise you should add it to page's header. Another thing is, you should mark the header tag with runat=server to get this working
   

   
   <asp:literal runat="server" id="lMetaContainer"></asp:literal>
   

   
   


3. Read the xml in page load event and find the relative category in xml node. Here a c# code for that is having a literal control in master page. As i know its very easy to work with the normal page.
   

   
   //using System.Xml;
   if (!IsPostBack)
              {
                  if(Request.QueryString["cat"] !=null)
                  {
                      string cat = Request.QueryString["cat"].ToString();
                      XmlDocument xmlDoc = new XmlDocument();
                      xmlDoc.Load(Server.MapPath("~/CategoryData.xml"));
                      //Use appropriate path in Server.MapPath
                      XmlElement currentCat = null;
                      XmlElement root = xmlDoc.DocumentElement;
                      // i know this can be optimized by using
                      // root.SelectSingleNode method, :) try it yourself
                      foreach (XmlElement ele in root.ChildNodes)
                      {
                          if (ele.Attributes["id"].Value == cat)
                          {
                              currentCat = ele;
                              break;
                          }
                      }
                      if (currentCat != null)
                      {
                          string catTitle = currentCat.Attributes["title"].Value.ToString();
                          string catMetaDesc = currentCat.Attributes["description"].Value.ToString();
                          string catMetaKeywords = currentCat.Attributes["keywords"].Value.ToString();
   
                          this.Page.Title =  catTitle ;
                          Literal lMeta = (Literal)this.Page.Header.FindControl("lMetaContainer");
   //tip:comment out above line if you are not using master page and replace lMeta with
   //your literal control"s id in the below code
                          System.Text.StringBuilder meta = new System.Text.StringBuilder();
                          meta.Append("<meta name=\"description\" content=\"" + catMetaDesc + "\" />");
                          meta.Append("<meta name=\"keywords\" content=\"" + catMetaKeywords + "\" />");
                          lMeta.Text = meta.ToString();
                      }
                  }
              }
   

   
   

Using xml in the module will make the implementation of the SEO separate. So the guy who writes SEO keywords, descriptions, and titles will get only xml to modify. If its not convinient to do so for an SEO guy, we can write a simple window base tool that will read and write the xml accordingly.

Also, we can extend this for multiple items, or make savaral xmls for each listings as required. Tell me what you think about this module so that we can improve this...

You can easily modify the code in whatever the way you want and implement the SEO friendly web pages in your website. Feel free to ask for more details or modifications.

Happy coding :)

How to create Web Gallery with LightBox WebGallery Generator in ASP.NET

Dear Friends,
While i was looking for a javascript slide show options across the web, i come across the LightBox WebGallery Creator . This is a simple exe file that allows you to generate html slide show from your images. I was looking to implement the same gallery in my asp.net page. I was having images in some folder of my website and the file names are coming from database table. so i was looking how can i use the light box to show a gallery with slide show.
The integration was quite simple as i required my own look and feel and i just have to get the slide show functionality working. so i copy pasted the supported files and added a simple attribute to my image tag rel='lightbox[gallery]' and it worked. :) I was expecting atleast 4-5 hours work and that makes me smile.

Hope this would also help you make the slide show plugin easily.

How to create link list with javascript

Dear Friends,
I found data structures as one of the most interesting subjects in the academic i learned. Before some day i was learning object oriented features of javascript. I tried my hand on implementing a Link List algorithm in javascript and here is what i get.

Let's start building a Link List using JavaScript:

1. Declaring The basic data structures
   
   

   
   function LinkListNode()
   {
       this.Data = 0;
       this.Next = null;
   }
   function List()
   {
       var First = new LinkListNode();
   }
   

   
   


2. Adding an Insert method
   
   

   
   List.prototype.addNode=function(_node)
   {
       if(this.First == null)
       {
           this.First = _node;           
       }
       else
       {
           var temp = this.First;
           while(temp.Next != null)
               temp=temp.Next;
           temp.Next = _node;                       
          
       }
   }
   

   
   


3. Adding Search Method
   
   

   
   List.prototype.search=function(intData)
   {
       var temp = this.First;
       var node = null;
       while(temp !=null)
       {
           if(temp.Data == intData)
           {
               node= temp;
               break;
           }
           else
               temp = temp.Next;
       }
       return node;
   }
   

   
   


4. Adding Display Method
   
   

   
   List.prototype.show=function()
   {
       var temp = this.First;
       while(temp != null)
       {
           alert(temp.Data);
           temp=temp.Next;
       }
   }
   

   
   


5. Adding Edit Method
   
   

   
   List.prototype.edit=function(oldValue,newValue)
   {
       var node = this.search(oldValue);
       if(node !=null)
           node.Data =newValue;
   }
   

   
   


6. Adding Delete Method
   
   

   
   List.prototype.remove=function(value)
   {
       debugger;
       //if first
       if(this.First.Data == value)
       {
           this.First = this.First.Next
           return value;
       }
       //else
       var temp = this.First.Next;
       var prev = this.First.Next;
       while(temp!=null)
       {
           if(temp.Data == value)
           {
               if(prev.Data == temp.Data)
                   this.First.Next = temp.Next;
               else
                   prev.Next=temp.Next;
               return;
           }
           else
           {
               prev = temp;
               temp = temp.Next;
           }
       }
   }
   

   
   


7. Let's test the stuff
   
   
   

   
   //create data structure object
   var _list=  new List();
   //add nodes
   var node = new LinkListNode();
   node.Data = 11;
   _list.addNode(node);
   
   node = new LinkListNode();
   node.Data = 33;
   _list.addNode(node);
   
   node = new LinkListNode();
   node.Data = 44;
   _list.addNode(node);
   
   node = new LinkListNode();
   node.Data = 22;
   _list.addNode(node);
   
   node = new LinkListNode();
   node.Data = 55;
   _list.addNode(node);
   
   _list.show();
   //test edit
   _list.edit(11,99);
   _list.show();
   //test remove
   _list.remove(22);
   _list.show();