Implementing 301 redirects for the Dotnet (ASPX) sites

In my previous post I have explained to implement 301 redirect at IIS Level . Now let us walk through how to implement it for ASPX/ DNN sites.

Implementing 301 redirection for ASPX sites at the application level can be done by rewriting the URL.URL Rewriting can be done by configuring HTTP Modules in the hosting website.

There are 3 simple steps to be done to implement 301 redirect for the DNN/ ASPX sites which I have implemented for my current project, Thought of sharing it with all of you .

1. Import UrlRewritingNet.UrlRewriter.dll in DNN Site Bin Folder - This is open source component dll. It can be downloaded from the following path http://urlrewriting.net/149/en/home.html

2. We need to change web.config settings for defining URL ReWrite Section, URL ReWrite Settings and ReWrite the HTTP Module

The following need to be added in config sections of Web.config

<!--1st Add URLRewrite Section -->

<section name="urlrewritingnet" requirePermission ="false" type="UrlRewritingNet.Configuration.UrlRewriteSection, UrlRewritingNet.UrlRewriter" />

<!--2nd UrlRewritingNet.UrlRewrite entry -->

<urlrewritingnet

rewriteOnlyVirtualUrls="true"

contextItemsPrefix="QueryString"

defaultPage = "default.aspx"

defaultProvider="RegEx"

xmlns="http://www.urlrewriting.net/schemas/config/2006/07" >

<rewrites>

<add name="KickIt" virtualUrl="^http\://mysite.com/(.*).aspx"

rewriteUrlParameter="ExcludeFromClientQueryString"

destinationUrl="http://www.mysite.com/$1.aspx"

redirect="Domain"

redirectMode="Permanent"

ignoreCase="true" />

</rewrites>

</urlrewritingnet>

<!--3rd Add URL Rewrite HTTPModule entry under HTTP Modules section -->

<add name="UrlRewriteModule" type="UrlRewritingNet.Web.UrlRewriteModule, UrlRewritingNet.UrlRewriter" />

http://himabinduvejella.blogspot.com/atom.xml

DNN Accordion Menu Issue with PNG images mouse over in Internet Explorer

I was working with DotnetNuke(DNN) site development and after applying the skin that I have accordion menu in leftnav , hover images are not getting displayed in mouse over.
I was using jQuery to call mouseover images dynamically from the script.

This is the script that I am using

[NavMenu-Container[ <ul id="{NavMenu.Id}"> ]]
[Level0-Container [ <li> ]]
[Level0-Item[ <div IIF({Page.HasChildren}=true,class="menuTitle")><a class="menua" IIF({Page.HasChildren}=false,href="{Tab.Url}",href="#") title="{Tab.Title}"><img class="LinkIcon" src="{SkinPath}images/{Page.IconFile}" alt="" style="border:0 ;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{SkinPath}images/{Page.IconFile}',sizingMethod='scroll');
" onmouseover="this.src=this.src.replace('.png','_hover.png')" onmouseout="this.src=this.src.replace('_hover','')" id="img{Tab.id}" /></a></div><div IIF({Page.HasChildren}=true,class="submenu" id="sub{Tab.id}")> ]]
[Level1-Item[<span> ]]
[Level1-Anchor[ <a href="{Tab.Url}" title="{Tab.Title}">{Tab.Name}</a>]]
[/Level1-Item[</span> ]]`
[/Level0-item[</div>]]
[/Level0-Container[ </li> ]]
[/NavMenu-Container[ </ul> ]]


As it clearly shows I am replacing normal images with hover images with the images appending _hover to the image name in mouse over and in mouse out with normal image names. But the problem I got here is the mouse over didn’t work in IE after the images are loaded and it is working fine in FF (Fire Fox) browser irrespective of loading images. After spending considerable amount of time, I came to know that the issue is with the PNG image, as I replace a JPEG image it works well.

Cause:
The issue with the menu was being caused by a combination of the pngfix.js and the accordion menu template. The reason it wasn't working in IE 7 or IE 8 was because the conditional comment was targeting all IEs. We need to make sure when using png fix that the conditional comment targets IE 6 or less than IE 7--



This fixed the issue in IE 7 and IE 8, however, due to the way the accordion menu is built using the template, the issue still existed in IE 6. I swapped over to using the iepngfix instead, and made a skin_ie.js which I put in the conditional comment and targeted each menu image directly and coded the swaps there

Resolution /Fix

We need to replace image in the mouse over as the code below:

 
// JavaScript Document
jQuery(document).ready(function(){
//mention hover image by specifying ID for the image      
jQuery("#img55").hover(function() {
  jQuery(this).attr('src', DNN_skinPath + 'images/home_hover.png') },
//mouse out image
  function () { jQuery(this).attr('src', DNN_skinPath + 'images/home.png') 
 }); 
 jQuery("#img57").hover(function() {
  jQuery(this).attr('src', DNN_skinPath + 'images/officeInfo_hover.png') },
  function () { jQuery(this).attr('src', DNN_skinPath + 'images/officeInfo.png') 
 });
 jQuery("#img66").hover(function() {
  jQuery(this).attr('src', DNN_skinPath + 'images/patientInfo_hover.png') },
  function () { jQuery(this).attr('src', DNN_skinPath + 'images/patientInfo.png') 
 });
 
});