Data View Webpart Show/Hide Accidently

Hey folks, yesterday I have faced a weird issue, it's in a webpart that I have designed. Result is a high level defect :)

Issue: Dataview webpart not showing the list contents properly, it's just vanished. Development environment it's properly showing.

So I have started to search the root cause of the issue

1.Checked whether list instance properly deploying.....passed
2.Check dataview webpart markup in onet.xml and verify deployment......passed
3.Check and compare the xslt and parameters passing to the webpart......passed
4.Check Styles of the webpart...........issue occured

I have noticed webpart zone having a inline style as "display:none" which is hiding the webpart. So I have gone through the webpart styles again and unfortunately didn't find any inline style, causing issue.

So I have edit page:

1.Click on Restore webpart
2.Publish the page

Issue solved successfully.

Learning points: If we set restore on webpart it's get hide by adding inline style as "display:none". However this can be helpful to you in your daytoday life, so decided to share.

Javascript Water mark effect for your password field

Most of web developers like or not, they have to deal with forms every time. There can be password fields available in your form itself with a magical effect of water mark. Herewith I would like to simulate a way to implement this functionality.

Functionality: We can have 3 textboxes (one to hold password, second to hold default text to be appeared and last one for move between 2 text boxes previously mentioned). So if there were no text in first text box we show second text box with default text, if else show password text with letters with hidden characters. 

So lets strart to implement.

1.Open VS 2008/2010 and open a new ASP.Net project

2.Add Text box and make it a password type (see the code snippet below)

<div id="divPassword">

        <asp:TextBox ID="txtCurrentPassword" TextMode="Password" runat="server"

            onblur="restorePassword('divPassword', 'divDummyPassword')"></asp:TextBox>

    </div>

Note: javascript function refer in onblur attribute will be describe in below steps

3.Then add next text box which is holding the default text to be appeared when there were no characters

<div id="divDummyPassword">

        <asp:TextBox ID='txtDummyPassword' runat='server' Text="Enter your current password"

            onfocus="changePassword('divPassword', 'divDummyPassword')"></asp:TextBox>

    </div>

4.Then add 3rd text box which is a hidden text box to show when user click on first text box 

<div>

        <input id="PasswordHidden" runat="server" type="hidden" />

    </div>

As you can see we are calling "onblur" function and "onfocus" function in different occasion. It's because we are going to load default text based text box initially with "onfocus" and "onblur" used while leaving password text box.

So lets see how our 2 javascripts being design

<script language="JavaScript" type="text/javascript">

        function changePassword(divPassword, divDummyPassword) {

            document.getElementById(divPassword).style.display = '';

            document.getElementById(divDummyPassword).style.display = 'none';

            document.getElementById('<% =txtCurrentPassword.ClientID %>').focus();

        }

        function restorePassword(divPassword, divDummyPassword) {

            if (document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {

                document.getElementById(divPassword).style.display = 'none';

                document.getElementById(divDummyPassword).style.display = '';

            }

        }

    </script>

As you can see, we just show and hide 2 divs, clear and assign focus appropriately to view and show the default text. So what about hidden field we implemented. Whenever user click on default text, our hidden textbox holding the values we are entering with temporary basis and then assign our values to correct text box for use further.

<script language="JavaScript" type="text/javascript">

        if (document.getElementById('<% =PasswordHidden.ClientID %>').value != '' && document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {

            document.getElementById('<% =txtCurrentPassword.ClientID %>').value = document.getElementById('<% =PasswordHidden.ClientID %>').value;

            document.getElementById('divPassword').style.display = '';

            document.getElementById('divDummyPassword').style.display = 'none';

        }

        else {

            document.getElementById('divPassword').style.display = 'none';

            document.getElementById('divDummyPassword').style.display = '';

        }

    </script>

Note: this script should appear just above the end of form tag.

Whole sample:

<form runat="server">



 <script language="JavaScript" type="text/javascript">




        function changePassword(divPassword, divDummyPassword) {
            document.getElementById(divPassword).style.display = '';
            document.getElementById(divDummyPassword).style.display = 'none';
            document.getElementById('<% =txtCurrentPassword.ClientID %>').focus();
        }


        function restorePassword(divPassword, divDummyPassword) {
            if (document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {
                document.getElementById(divPassword).style.display = 'none';
                document.getElementById(divDummyPassword).style.display = '';
            }
        }
    </script>


    <div id="divPassword">
        <asp:TextBox ID="txtCurrentPassword" TextMode="Password" runat="server"
            onblur="restorePassword('divPassword', 'divDummyPassword')"></asp:TextBox>
    </div>
    <div id="divDummyPassword">
        <asp:TextBox CssClass="txt_w187" ID='txtDummyPassword' runat='server' Text="Enter your current password"
            onfocus="changePassword('divPassword', 'divDummyPassword')"></asp:TextBox>
    </div>
    <div>
        <input id="PasswordHidden" runat="server" type="hidden" />
    </div>


    <script language="JavaScript" type="text/javascript">


        if (document.getElementById('<% =PasswordHidden.ClientID %>').value != '' && document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {
            document.getElementById('<% =txtCurrentPassword.ClientID %>').value = document.getElementById('<% =PasswordHidden.ClientID %>').value;
            document.getElementById('divPassword').style.display = '';
            document.getElementById('divDummyPassword').style.display = 'none';
        }
        else {
            document.getElementById('divPassword').style.display = 'none';
            document.getElementById('divDummyPassword').style.display = '';
        }
    </script>


    </form>


Note: Don't just copy and paste, allocate some time to understand the flow of the script

Get ruleset violation using FxCop

Most of you may wondering, how to analyse and find whether your VS 2008 project having RuleSet violations. You can install FxCop and check whether your compiled project having RuleSet violations.

You can read more about FxCop in below url:

msdn url for FxCop

Steps to follow:

1.Build your VS project using "Release" mode

2.Open Installed FxCop and open new project

3.Set appropriate rules to be use when analysis running

4.Attach your exe in bin folder to "Add target for analysis"

5.Run analysis

6.View results and apply fixes