How to show watermark text for password field


The code below shows how to show water mark text for password field.

  <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head id=”Head1″ runat=”server”>
    <title></title>
    <script type=”text/javascript” src=”JQuery/jquery-1.4.1-vsdoc.js”></script>
    <script type=”text/javascript”>

        $(document).ready(function () {

            $(“#txtPasswordWaterMark”).show();
            $(“#txtPasswordWaterMark”).addClass(“waterMark”);
            $(“#txtPasswordWaterMark”).val(“Password”);
            $(“#<%= txtPassword.ClientID  %>”).hide();

            $(“#txtPasswordWaterMark”).focus(function () {
                $(this).hide();
                $(“#<%= txtPassword.ClientID  %>”).show();
                $(“#<%= txtPassword.ClientID  %>”).focus();
            });

//            $(“#txtPasswordWaterMark”).keydown(function () {
//                $(this).hide();
//                $(“#<%= txtPassword.ClientID  %>”).show();
//                $(“#<%= txtPassword.ClientID  %>”).focus();
//            });

            $(“#<%= txtPassword.ClientID  %>”).blur(function () {

                if ($(this).val() == “”) {
                    $(“#<%= txtPassword.ClientID  %>”).hide();
                    $(“#txtPasswordWaterMark”).show();
                }

            });

        });

    </script>
    <style type=”text/css”>

      .waterMark{
            color : #9B9B9B;
        }

    </style>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
     <asp:TextBox ID=”txtPassword” TextMode=”Password” runat=”server”></asp:TextBox>
     <input type=”text” id=”txtPasswordWaterMark” />
    </div>
    </form>
</body>
</html>

 

Note : Jquery needed to run the above code.

How to show validation summary on change event or any other event when it required.


What leads me to develop the validation summary control?

Last week it was very much pain for me to manage the validation summary of application input forms. Normally in ASP.Net the validation summary fires on form submit. but our client requirement was to fire the validation summary on any input change by user.

To meet the client requirement I look for jquery validation plugins and some other but the plugins that I found doesn’t meet my client requirement. Then I decide to make a validation summary control from scratch but It seemed to me that it will be very tricky to implement it from scratch and to support for all the browsers. So I came up with a solution to build a validation control by mixing with ASP.Net existing validation controls and Jquery. So the validation of data will be done by validation control and I will just manage it to show whenever it requires. So my work now reduces to only doing show hides of the validations.

Introduction :  The control works for showing validation summary whenever it requires. It’s build by mixing up ASP.Net validation control and Jquery. I will point some of the flexibilities and features of the control below:

Ø      As its build with ASP.Net validation control, so the validation is done by ASP.Net validation control, as a result it will be painless to validate the data and  will be compatible with the browsers to which ASP.Net validation controls are compatible with.

Ø      It’s very much flexible to validate data whenever needed. The summary can be updated on any event it required. Obviously on form submit, onchange and any other event.

Ø      The style of the validation summary can be controlled by changing the CSS.

Prerequisites and Limitation: The limitation is it’s only useable in asp.net application. And a prerequisite is it requires jquery.

The code to use the validation control:

Download the required files from here validation summary.

And also download the jquery file from jquery site.

Add the following reference to the page where want to use the validation summary (the path can be different depending on how the downloaded folder is placed):

<script type=”text/javascript” src=”JQuery/jquery-1.4.1-vsdoc.js”></script>

<script type=”text/javascript” src=”ValidationSummary/ValidationSummary.js” />

<link rel=”Stylesheet” href=”ValidationSummary/ValidationSummary.css” />

Then add the validation control code as below:

<div id=”divValidationSummary”>

<asp:Label ID=”lblErrorSummaryHeader” runat=”server” Text=”Please resolve the following errors to proceed :”

CssClass=”hideValidationError”>

</asp:Label>

<ul>

<asp:RequiredFieldValidator ID=”rv1″

runat=”server” ControlToValidate=”txt1″>

<li>Error message</li>

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID=”rv2″

runat=”server” ControlToValidate=”txt2″>

<li>Error message</li>

</asp:RequiredFieldValidator>

……………………………..

……………………………..

……………………………..

……………………………..

……………………………..

<asp:RequiredFieldValidator ID=”rvn”

runat=”server” ControlToValidate=”txtn”>

<li>Error message</li>

</asp:RequiredFieldValidator>

</ul>

</div>

Here the RequiredFieldValidator controls ControlToValidate property will contain the controls Id whose validation message have to shown in the validation summary. And the ‘Error message’ is the error message that would be shown.

Here only RequiredFieldValidator is shown, its possible to add any other validation including regular expression validation and others.

Validation summary control in Action:

 The section is intended to show practical use of the validation summary control.

Form to validate

Form to validate

The use of validation summary control to validate the above form is given below:

<html xmlns=”http://www.w3.org/1999/xhtml&#8221; >

<head runat=”server”>

<title></title>

<script type=”text/javascript” src=”JQuery/jquery-1.4.1-vsdoc.js”></script>

<script type=”text/javascript” src=”ValidationSummary/ValidationSummary.js” />

<link rel=”Stylesheet” href=”ValidationSummary/ValidationSummary.css” />

<script type=”text/javascript”>

$(document).ready(function () {

var lblErrorSummaryHeaderClientID = ‘<%= lblErrorSummaryHeader.ClientID %>’;

$(“input[type=text]”).change(function () {

validation(lblErrorSummaryHeaderClientID);

});

$(‘#<%=btnSubmit.ClientID %>’).click(function () {

return validation(lblErrorSummaryHeaderClientID);

});

});

</script>

<style type=”text/css”>

</style>

</head>

<body>

<form id=”form1″ runat=”server”>

<div id=”divValidationSummary”>

<asp:Label ID=”lblErrorSummaryHeader” runat=”server” Text=”Please   resolve the following errors to proceed :” CssClass=”hideValidationError”>

</asp:Label>

<ul>

<asp:RequiredFieldValidator ID=”rv2FirstName”

runat=”server” ControlToValidate=”txtFirstName”>

<li>Enter First Name</li>

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID=”rv2LastName”

runat=”server” ControlToValidate=”txtLastName”>

<li>Enter Last Name</li>

</asp:RequiredFieldValidator>

<asp:RequiredFieldValidator ID=”rv2Address”

runat=”server” ControlToValidate=”txtAddress”>

<li>Enter Address</li>

</asp:RequiredFieldValidator>

</ul>

</div>

<div>

<table>

<tr>

<td>

First Name

</td>

<td style=”width:5px”></td>

<td>

<asp:TextBox ID=”txtFirstName” runat=”server”></asp:TextBox></td>

<td>

<asp:RequiredFieldValidator ID=”rv1FirstName” runat=”server” ControlToValidate=”txtFirstName”>*

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td style=”height:5px” colspan=”4″></td>

</tr>

<tr>

<td>

Last Name

</td>

<td style=”width:5px”></td>

<td>

<asp:TextBox ID=”txtLastName” runat=”server”></asp:TextBox>

</td>

<td>

<asp:RequiredFieldValidator ID=”rv1LastName” runat=”server”    ControlToValidate=”txtLastName”>*

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td style=”height:5px” colspan=”4″>

</td>

</tr>

<tr>

<td>

Address

</td>

<td style=”width:5px”></td>

<td><asp:TextBox ID=”txtAddress” runat=”server”></asp:TextBox></td>

<td>

<asp:RequiredFieldValidator ID=”rv1Address”

runat=”server” ControlToValidate=”txtAddress”>*

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td colspan=”2″>

&nbsp;

</td>

<td colspan=”2″>

<asp:Button runat=”server” ID=”btnSubmit” Text=”Submit” />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Using the above code the form validation summary will be updated on every change in the text boxes and clicking on the submit button.

How to install and use MemCacheD / Distributed caching implimentation


Introduction: Caching is very important for performance improvement of applications. By caching data applications can reduce roundtrip to data storage.

There is lots of open source Cache Management application. MemCacheD is one of the widely used distributed caching system. Giants like Youtube, FaceBook are using MemCached for there cache management. In the following sections I will try to show how to install and use MemCacheD with ASP.Net application.

MemCacheD Installation: Download MemCacheD by click here. After completion of download follow the steps below to install MemCacheD:

  1. Installation is very simple just click on the downloaded msi.
  2. After that clicking on the couple of Next buttons will finish the installation.

Configure MemCacheD: From start menu–>MemCacheD Manager–>MemCacheD Manager. Pops up MemCacheD Manager Window.

Choose MemCacheD Manager from start menu.

Click on the Add Server button to add MemCacheD server (May be installed on local machine or on some other location) to MemCacheD manager. So MemCacheD manager can maintain multiple MemCacheD server.

Now provide the server information to the right side boxes. In the server name text box provide IP of the MemCacheD server. For our case as just installed in the local machine we will add the IP of local machine (127.0.0.1). Click on the apply button. And the server will be added.

Now add instance to the server by right clicking on the server left side tree node and choose Add New Instance from the context menu, it’s possible to create multiple instance of the same server and the cache is maintained instance wise separately by MemCacheD. To create instance provide the necessary information in the right side input boxes and click on the Apply button. as the snap below :

To add instance in a Server

The added server as well as the instances can be deleted or start/stop by just right clicking on the corresponding tree nodes. The snap above shows the servers as well as the instances as start state.

To see the caching status of the instances click on the Status tab, it shows the no of cached items, no of times items read/write and other information.

Monitor caching status of different Instances

So the MemCacheD is installed and configured and ready for use.

Using MemCacheD : Create new web application with name MemcachedWebClient from visual studio. Add a new page GetSetCacheData.aspx on the web application with the following html content.

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true” CodeBehind=”GetSetCacheData.aspx.cs” Inherits=”MemcachedWebClient.GetSetCacheData” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>

</asp:Content>

<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>

<div>

<div style=”float:left;padding-right:20px”>

<div>Cached Key</div>

<div> <asp:TextBox runat=”server” id=”txtCacheKey”>

</asp:TextBox>

</div>

</div>

<div>

<div>CacheValue</div>

<div> <asp:TextBox runat=”server” id=”txtCacheValue” Width=”301px”></asp:TextBox>

</div>

</div>

<div style=”padding-top:20px;padding-bottom:20px”>

<asp:Button ID=”btnSetCacheValue” runat=”server” Text=”SetCacheValue” />

</div>

</div>

<div style=”float:none”>

<div style=”float:left;padding-right:20px”>

<div>KeyToRetrieveCache</div>

<div> <asp:TextBox runat=”server” id=”txtKeyToRetrieveCache”>

</asp:TextBox>

</div>

</div>

<div>

<div>CacheValue</div>

<div> <asp:TextBox runat=”server” id=”txtRetrievedValue” Width=”306px”></asp:TextBox>

</div>

</div>

<div style=”padding-top:20px;padding-bottom:20px”>

<asp:Button ID=”btnGetCacheValue” runat=”server” Text=”GetCacheValue” />

</div>

</div>

</asp:Content>

Viewing the page on browse looks like below:

Added page to test caching

The page is intended to set cache by providing cache key/value and by clicking on the SetCacheValue button.

And retrieves the cache value by providing the cache key on the KeyToRetrieveCache and clicking on the GetCacheValue button.

To implement these functionality add the button click events for GetCacheValue and SetCacheValue. Change the provided html code by the following to add the button events.

For GetCacheValue :

<asp:Button ID=”btnGetCacheValue” runat=”server” Text=”GetCacheValue”

onclick=”btnGetCacheValue_Click” />

For SetCacheValue :

<asp:Button ID=”btnSetCacheValue” runat=”server” Text=”SetCacheValue”

onclick=”btnSetCacheValue_Click” />

Add the following code in the GetSetCacheData.aspx.cs :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Memcached.ClientLibrary;

using System.Collections;

namespace MemcachedWebClient

{

public partial class GetSetCacheData : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

/* The list of the servers to which cached have to add*/

string[] serverlist = { “127.0.0.1:11212” };

SockIOPool oSockIOPool = SockIOPool.GetInstance();

oSockIOPool.SetServers(serverlist);

oSockIOPool.InitConnections = 3;

oSockIOPool.MinConnections = 3;

oSockIOPool.MaxConnections = 5;

oSockIOPool.SocketConnectTimeout = 1000;

oSockIOPool.SocketTimeout = 3000;

oSockIOPool.MaintenanceSleep = 30;

oSockIOPool.Failover = true;

oSockIOPool.Nagle = false;

oSockIOPool.Initialize();

}

}

protected void btnSetCacheValue_Click(object sender, EventArgs e)

{

MemcachedClient oMemcachedClient = new MemcachedClient();

oMemcachedClient.EnableCompression = false;

oMemcachedClient.Set(txtCacheKey.Text, txtCacheValue.Text);

}

protected void btnGetCacheValue_Click(object sender, EventArgs e)

{

MemcachedClient oMemcachedClient = new MemcachedClient();

oMemcachedClient.EnableCompression = false;

object retrievedvalue = oMemcachedClient.Get(txtKeyToRetrieveCache.Text);

txtRetrievedValue.Text = retrievedvalue != null ? retrievedvalue.ToString() : string.Empty;

}

}

}

Now view the added page in browser and set cache/ Get cache and follow the Status tab from the MemCacheD Manger, it reflects the no of cache added and no of times it read.

Server status after doing some caching