Blog from Saravanan Arumugam

Let us talk about Technologies

jQuery validation on hidden form elements


I recently wrote a code where I will have a wizard like page with multiple tabs. Each tab is a Div element, on clicking on a tab, one div will be visible while hiding the other divs, an usual design.

I implemented an unobtrusive validation on the web page, and it all worked well.

 

After I upgraded my jquery.validation.js, my web page’s validation was not as expected. Then I compared the two versions of jquery.validation.js files (1.8.1 and 1.9).

image

In the comparison it was evident that by default the jquery validator ignores all the hidden elements in 1.9 version, whereas 1.8 does validate every control in the page, no matter they are visible or invisible.

 

Of course validating only the visible controls is an useful feature, but not in my case. So I had to override the default value.

I wrote the following code in the page to instruct the validator not to ignore the hidden controls.

<script type="text/javascript" language="javascript">
$.validator.setDefaults({ ignore: [] });
</script>

Setting the default has to happen right when we include the scripts on the page. This would not work if we do it after the page load in any control’s event handle.

Identify Nullable Types


I had a need of using the reflection to go through different properties of a class and examine if it is a nullable type.

I have learned an interesting thing that GetType() method upon the property would not let us know if it is a nullable type. Moreover, there is no direct method in reflection to check that up, (like IsVisible or IsValueType).

I found an interesting write up from MSDN that explained the issues I faced and posted a solution to it as well.

 

How to: Identify a Nullable Type (C# Programming Guide)

 

The following code lets us know if it is a Nullable type. But before that we need to get the type from non-GetType() way.

 

                foreach (var property in typeof(Request).GetProperties())
                {
                    Type type = property.PropertyType;
                    
                    //Check the value of non nullable fields
                    if (type.Is.IsGenericType && type.GetGenericTypeDefinition() == typeof(Nullable<>))
                    {
                        
                    }
                }

Replacement to Fieldset to avoid alignment issues


I tried to use multiple fieldsets and encountered a lot of alignment issues. I did a lot of changes in the CSS to fix it. I could only minimize the issues but couldn’t avoid it completely.

So I have come up with a replacement of Fieldset using Div and Span (of course I got the idea from StackOverflow, and I modified it according to my need).

I embedded my content in the following elements

<div class="fieldset">
    <span class="legend">Project Manager</span>
    <p> My Content
    </p>
</div>

In the css file I added the following styles.

.fieldset 
{
	border: 1px solid #ddd;
	margin-top: 1em;		
	padding-left: 15px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;	
}
 
.fieldset span.legend
{
    color: #222;
    font-size: 1em;
	text-align: left;
	display: inline;
	background: #fff; padding: 5px 10px; 
	position: relative; 
	top: -.8em;	
}

 

This was a lot stable in alignment when compared to Fieldset. With this I am not complaining the Fieldset, its a lot neater way to group things. But I couldn’t figure out the fix to the alignment issues. So this one is a temporary replacement to the fieldset.

Simple jQuery enabled Menu


This paper explains a simple HTML based Menu written with the help of jQuery and CSS.

I have implemented the menu in a MVC 3 application’s default template. However this menu is not specific to MVC 3, its applicable in any Html page.

 

Step 1: Create the Menu and Sub-Menu items

Create the root menu and menu items using <ul> element or with <div> and <table> elements. For simplicity I have made the menu items with hyperlinks pointing to either Home or About page (Home and About pages are created by default with MVC 3)

<nav>
    <ul id="menu">
        <li id="Home">
            @Html.ActionLink("Home", 
                "Index", "Home")
        </li>
        <li id="About">
            @Html.ActionLink("About", 
                "About", "Home")
        </li>
    </ul>
    <ul parentmenu="Home">
        <li>
            @Html.ActionLink("Go to About",
                "About", "Home")
        </li>
        <li>
            @Html.ActionLink("Go to About again",
                "About", "Home")
        </li>
    </ul>
    <ul parentmenu="About">
        <li>
            @Html.ActionLink("Go Home", 
                "Index", "Home")
        </li>
        <li>
            @Html.ActionLink("Go Home Again", 
                "Index", "Home")
        </li>
    </ul>
</nav>

Note that parentmenu attribute is specified on the <ul> element to indicate that it is a sub menu of another menu item. Obviously the <ul> list element not having the parentmenu is the root menu.

In case of MVC 3, this is to be written in Views/Shared/_Layout.cshtml. In Web forms, the code above should be written in the master page.

 

Step 2: Hide the Sub-Menu’s in the default view

We don’t want the submenu to be visible in the default view. To hide it, I used the CSS stylesheet.

ul[parentMenu]
{
    display: none;
    position: fixed;
    z-index: 1;
}

 

Step 3: Set the style for the Menu and Sub-Menus

ul#menu, ul[parentMenu]
{
    clear: left;
    border-bottom: 1px #5C87B2 solid;
    padding: 0 0 0 0;
    position: relative;
    margin: 0;
    text-align: left;
}
 
ul#menu li
{
    display: inline;
    list-style: none;
}
 
ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}
 
ul#menu li a
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-color: #666666;
    color: #EFEFEF;
    border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
}
 
ul#menu li a:hover
{
    background-color: #9B9B9B;
    text-decoration: none;
}
 
ul#menu li a:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}
 
ul#menu li.selected a
{
    background-color: #fff;
    color: #000;
}
 
ul[parentMenu]
{
    display: none;
    position: fixed;
    z-index: 1;
}
 
ul[parentMenu] li
{
    list-style: none;
    border: 1px solid #e8eef4;
    border-width: thin thin 0 thin;
    background-color: #666666;
    color: #EFEFEF;
    padding: 5px 20px 5px 20px;
}
 
ul[parentMenu] li a
{    
    border-width: thin thin 0 thin;
    background-color: inherit;
    color: #EFEFEF;    
    font-weight: bold;
    text-decoration: none;    
}
 
ul[parentMenu] li:hover
{
    background-color: #9B9B9B;
    text-decoration: none;
}
 
ul[parentMenu] li:active
{
    background-color: #a6e2a6;
    text-decoration: none;
}

 

Step 4: Script to activate the menu

Here’s a full code listing. Code is explained in detail below the listing.

$(document).ready(function () {
    $("ul#menu li").hover(
        function () {
            //1. Slide up any existing menu
            if ($("ul[parentmenu]:visible").length > 0 &&
                $("ul[parentmenu]:visible:first")
                    .attr("parentmenu") != this.id) 
            {
                
                $("ul[parentmenu]:visible").slideUp(200);
            }
 
            //2. Show the Menu
            var subMenu = $("ul[parentmenu='" 
                + this.id + "']");
            subMenu.slideDown(200);
 
            //3. Position the sub menu
            var currentMenuPosition = $(this).offset();
 
            if (currentMenuPosition) {
                subMenu.offset({
                    left: currentMenuPosition.left,
                    top: $("ul#menu").offset().top + $("ul#menu").height()
                });
            }
        },
    //Don't do anything on the hover out
    function () { }
    );
});
 
$(document).click(function () {
    $("ul[parentmenu]").slideUp(200);
});
 
$(document).scroll(function () {
    $("ul[parentmenu]").hide();
});

 

Step 4.1: Handle the hover event for the menu items

$(document).ready(function () {
    $("ul#menu li").hover(
        function () {

$(document).ready() registers a handler to document’s load event.

Next thing to do is to handle hoverin and hoverout of menu list items. $(“ul#menu li”) selects the list items within the <ul> with the name “menu”. hover() method helps handle both the hover in and hover out events. In our case we do nothing in the hover out.

 

Step 4.2: Hide any other visible menu

//1. Slide up any existing menu
if ($("ul[parentmenu]:visible").length > 0 &&
    $("ul[parentmenu]:visible:first")
        .attr("parentmenu") != this.id) 
{
                
    $("ul[parentmenu]:visible").slideUp(200);
}

When the mouse is hovered over the menu name, first thing we do is hide any other menu that is actively visible at the moment. $(“ul[parentmenu]:visible”) selects the visible sub menu (we identify the submenu by searching for a <ul> element with the parentmenu attribute).

 

Step 4.3: Identify and display the menu

//2. Show the Menu
var subMenu = $("ul[parentmenu='" 
    + this.id + "']");
subMenu.slideDown(200);

slideDown() displays the subMenu by sliding it down. 200 is the milliseconds, which indicates the speed of the slide transition.

 

Step 4.4: Position the menu at its place

//3. Position the sub menu
var currentMenuPosition = $(this).offset();
 
if (currentMenuPosition) {
    subMenu.offset({
        left: currentMenuPosition.left,
        top: $("ul#menu").offset().top + $("ul#menu").height()
    });
}

$(this).offset() provides the current position of the menu’s list item. Based on its placement, position the submenu dynamically by setting the submenu’s offset value.

 

Step 4.5: Hide the menu if any click or scroll happens on the page

$(document).click(function () {
    $("ul[parentmenu]").slideUp(200);
});
 
$(document).scroll(function () {
    $("ul[parentmenu]").hide();
});

 

Output

image

The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.7.1 Client was not authenticated


When I tried to send an email from .Net code, I got the following exception.

Exception

The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.7.1 Client was not authenticated

Solution

This was because the mail was sent from the office network. By default the credentials in the SmtpClient object is null. The issue was resolved by setting SmtpClient.UseDefaultCredentials to true.

mailClient.UseDefaultCredentials = true;