Karan's Blog

jQuery Watermark

2010-10-27T02:48:00Z

This simple to use jQuery plugin adds watermark capability to a textbox. You can download this jQuery plugin from the following link: http://code.google.com/p/jquery-watermark/

Here is the code for using this plugin:

        1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

       2:       <script src="Scripts/jquery.watermark.min.js" type="text/javascript"></script>

       3:       <script type="text/javascript">

       4:           $(document).ready(function () {

       5:               $('#<%=txtInputBox.ClientID %>').watermark('Watermarked Text', { className: 'watermark' });

       6:             });

       7:          });

       8:      </script>

       9:      <style type="text/css">

      10:            .watermark {

      11:               color: #999;

      12:            }

      13:        </style>

       1: <asp:TextBox ID="txtInputBox" runat="server" />

It’s very simple to use this plugin. With a single line as shown above (No 5 in the Javascript) you could add a watermark to your textbox. Here in the above code I am also passing an additional parameter which is the class name which basically controls how you want your text to appear. The output of the above code is shown below:

If you want to remove the watermark when you click the textbox you could use the following code:

       1: $('#<%=txtInputBox.ClientID %>').mousedown(function () {

       2:    $.watermark.hide($('#<%=txtInputBox.ClientID %>'));

       3: });

Hope this post was helpful.

jQuery AutoComplete

2010-10-07T03:41:00Z

In this post I would show how to use jQuery AutoComplete plug-in. Auto-complete takes input from the user, and returns a list of words that match the users input.

You could download jQuery AutoComplete plug-in from the following link: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Below I am calling a web handler "select.ashx" which returns values/list based on text user
types (prefix text) in the textbox.

Aspx Markup:

     <asp:TextBox ID="txtAutoComplete" runat="server" />

jQuery AutoComplete calling web handler:

       1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

       2:    <script src="jquery.autocomplete.min.js" type="text/javascript"></script>

       3:   <script type="text/javascript">

       4:    $(document).ready(function () {

       5:      $("#<%=txtAutoComplete.ClientID %>").autocomplete('select.ashx');

       6:   });

       7:   </script>

Below is the web handler which returns the auto complete list:

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Web;

       4:  

       5:     /// <summary>

       6:     /// Summary description for handler "select"

       7:     /// </summary>

       8: public class select : IHttpHandler

       9: {

  

    public void ProcessRequest(HttpContext context)

    {

        if (!String.IsNullOrEmpty(context.Request.QueryString["q"]))

        {

            foreach (string s in GetAutoCompleteValues(context.Request.QueryString["q"]))

            {

                context.Response.Write(s + Environment.NewLine);

            }

        }

  

    }

    public static string[] GetAutoCompleteValues(string prefixText)

    {

        List<string> myList = new List<string> { "Alicia", "Steven", "Stephany", "Robert", "Johanne" };

        List<string> autoCompleteList = new List<string>();

        foreach (string s in myList)

        {

            if (s.ToUpper().Contains(prefixText.ToUpper()))

            {

                autoCompleteList.Add(s);

            }

        }

        return autoCompleteList.ToArray();

    }

  

    public bool IsReusable

    {

        get

        {

            return true;

        }

    }

}

When your run the above code and start typing say for example “s”, you would see the following output:

There are many optional options available to configure the auto complete. Some of which
I discuss here:

minChars: 2

It is the minimum number of characters a user has to type before the auto complete
activates.

extraParams: {"p1":"1","p2":"2"}

If you want to send extra params along with your auto complete you can use this
option. Here I am sending param "p1" as 1 and param "p2" as 2. You can access these params in the above handler as:

string param1 = context.Request.QueryString["p1"];

string param2 = context.Request.QueryString["p2"];

formatItem:function(data, i, total){ 
return data[0];              
}

Provides advanced markup for an item. For each row of results, this function will be
called. Parameters to this function: the results row, the position of the row in the
list of results (starting at 1),the number of items in the list of results.

formatResult:function(data) {             
    return data[0];
}

Similar to formatItem, but provides the formatting for the value to be put
into the input field.

multiple: true

Another useful parameter sometime if you want to have multiple values in your
textbox. The above param indicates whether to allow more than one auto completed-value to enter. So with above parameter you could start typing one value, select that value, a comma is inserted automatically, and you could start typing again for other value. Example:

multipleSeparator:", "

Separator to put between values when using multiple option.

More set of options you could find in this link:
http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

You could also find which value from the auto complete the user clicked.
Say you want to update a label when the user selected a particular value from
auto complete. You could use the following code along with the aboce to do so:

       1: $("#<%=txtAutoComplete.ClientID %>").result( function findValueCallback(event, data, formatted)

       2:         {    

       3:           if(data)

       4:           {

       5:             $('#<%=lbl.ClientID %>').text("You Selected: "+ data[0]);

       6:           }            

       7:         });

So here is the entire jQuery code along with the some of options that I discussed above:

       1:  

       2:     $(document).ready(function () {

       3:      $("#<%=txtAutoComplete.ClientID %>").autocomplete('select.ashx', {

       4:             minChars: 2,

       5:             extraParams: {"p1":"1","p2":"2"},

       6:             formatItem:function(data, i, total) {             

       7:              return data[0];          

       8:             },

       9:             formatResult:function(data) {             

      10:              return data[0];

      11:             },

      12:             multiple: true,

      13:             multipleSeparator:", "  

      14:         });

      15:       

      16:         $("#<%=txtAutoComplete.ClientID %>").result( function findValueCallback(event, data, formatted)

      17:         {    

      18:           if(data)

      19:           {

      20:             $('#<%=lbl.ClientID %>').text("You Selected: "+ data[0]);

      21:           }            

      22:         });

      23:      });

Note: You could also use a web service/wcf service/code behind web method to return the list of items. Also you could write code that returns list of items from your database.

Hope anyone find this information useful.

Calendar Extender Today’s Date

2010-09-21T03:16:00Z

The following is a simple code to show how to set/highlight the selected date in a Calendar Extender as Today’s Date. I am using JavaScript to set the Calendar’s date. Here is the code:

Aspx:

        1: <asp:ToolkitScriptManager ID="toolKitScriptManger" runat="server" />

       2: <asp:TextBox  ID="txtCalender" runat="server" />  

       3: <asp:ImageButton ID = "imgCalender"  runat="server" ImageUrl="~/calendar.gif"/>

       4: <asp:CalendarExtender  ID="calenderExtender" runat="server"  CssClass="cal_theme" TargetControlID="txtCalender"  

       5:         PopupButtonID="imgCalender" OnClientShowing="CurrentDateShowing"/>

In the above code I am calling Javascript function CurrentDateShowing on the CalendarExtender which set’s Today’s Date.

Here is the Javascript and a css class which I use on the Calendar Extender.

Css:

       1: .cal_theme .ajax__calendar_active    

       2:   {      

       3:       color: Red;       

       4:       font-weight: bold;       

       5:       background-color: #ffffff;  

       6:   }

JavaScript:

       1: <script type="text/javascript">

       2:    function CurrentDateShowing(e) 

       3:    {

       4:        if (!e.get_selectedDate() || !e.get_element().value)

       5:            e._selectedDate = (new Date()).getDateOnly();

       6:    }     

       7:    </script>

On using the above code when the Calendar pops up on the Image Button Click you would see Today’s date is highlighted in Red.

Controls in Modal Pop Extender Causing Postback

2010-09-17T02:26:00Z

Last week someone came up with a problem of a button on a modal pop up extender causing a postback and thereby hiding the modal up itself. Consider the situation where you have some asp.net controls on a modal pop up say a Texbox, Label, and a button control. Onclick of the button you want to display the message on the label. What happens is when you click the button it causes the postback thereby causing your modal popup to hide.

So with the following solution I determine which control caused the postback, depending on which I show my modal pop up back again. Here is the code:

        1: <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

       2:        <asp:Button ID="Button1" runat="server" Text="Open Modal" />

       3:        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="modal" TargetControlID="Button1" PopupControlID="Panel1"

       4:        BackgroundCssClass="modalBackground" CancelControlID="btnCancel">

       5:        </asp:ModalPopupExtender>

       6:  

       7:       <asp:Panel ID="Panel1" runat="server" CssClass="modalpopup" style="display:none">

       8:                <div class="container">

       9:                    <div class="header">

      10:                        <asp:Label ID="lblText" runat="server" CssClass="msg" Text="Enter value and press save" />

      11:                    </div>

      12:                    <div class="body">

      13:                        <asp:TextBox ID="TextBox1" runat="server" />

      14:                        <asp:Label ID="lblMessage" runat="server" Text="Saved" Visible="false" ForeColor="Red" />

      15:                        <br />

      16:                        <asp:DropDownList ID="DropdDownList1" runat="server" OnSelectedIndexChanged="DropdDownList1_SelectedIndexChanged" AutoPostBack="true">

      17:                            <asp:ListItem>Item1</asp:ListItem>

      18:                            <asp:ListItem>Item2</asp:ListItem>

      19:                        </asp:DropDownList>

      20:                    </div>

      21:                    <div class="footer">

      22:                        <asp:Button ID="btnSave" OnClick="btnSave_Click" runat="server" Text="Save" Width="50px" />

      23:                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="60px" />

      24:                    </div>                                                

      25:                </div>

      26:            </asp:Panel>

In the above Aspx markup I am using a ModalPopupExentender to show a Panel containing a Textbox, Label, DropDownList and a Button. Onclick of the Button the label would show a message. I am also using some css classes above, here are those classes:

       1: .modalpopup

       2: {

       3:     font-family: arial,helvetica,clean,sans-serif;

       4:     font-size: small;

       5:     padding: 2px 3px;

       6:     display: block;

       7:     position: absolute;

       8: }

       9:  

.container

{

    width: 300px;

    border: solid 1px #808080;

    border-width: 1px 0px;

} 

  

.header

{

    color: #000;    

    border-color: #808080 #808080 #ccc;

    border-style: solid;

    border-width: 0px 1px 1px;

    padding: 3px 10px;

} 

  

.header .msg

{

    font-weight: bold;

}         

  

.body

{

    background-color: #f2f2f2;

    border-color: #808080;

    border-style: solid;

    border-width: 0px 1px;

    padding-top: 10px;

    padding-left: 10px;

    padding-bottom: 30px;

} 

.footer

{

    background-color: #f2f2f2;

    border-color: #808080;

    border-style: none solid;

    border-width: 0px 1px;

    text-align:right;

    padding-bottom: 8px;

    padding-right: 8px;

} 

.modalBackground 

{

    background-color:Gray;

    filter:alpha(opacity=50);

    opacity:0.5;

}

A Small javascript function I use to close the modal pop up:

       1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>   1:     2: <script type="text/javascript">   3:     function ClosePopup() {   4:         $find('modal').hide();    5:         return false;   6:     }</script>

Here is the entire code behind:

       1: protected void Page_Load(object sender, EventArgs e)

       2:  {

       3:      if (!IsPostBack)

       4:      {

       5:    

       6:      }

       7:      else

       8:      {

       9:          string postBackControlName = GetPostBackControlName(this.Page);

         if (postBackControlName == "btnSave" || postBackControlName == "DropdDownList1")

         {

             ModalPopupExtender1.Show();

         }

     }

 }

  

 protected void btnSave_Click(object sender, EventArgs e)

 {

     if (Page.IsValid)

     {

         lblMessage.Visible = true;

     }

 }

 protected void DropdDownList1_SelectedIndexChanged(object sender, EventArgs e)

 {

  

 }

  

 public static string GetPostBackControlName(Page page)

 {

     string strControlName = "";

     Control control = null;

     //first we will check the "__EVENTTARGET" because if post back made by the controls

     //which used "_doPostBack" function also available in Request.Form collection.

     string ctrlname = page.Request.Params["__EVENTTARGET"]; if (ctrlname != null && ctrlname != String.Empty)

     {

         control = page.FindControl(ctrlname);

     }

      // if __EVENTTARGET is null, the control is a button type and we need to

      // iterate over the form collection to find it

     else

     {

         string ctrlStr = String.Empty;

  

         Control c = null;

         foreach (string ctl in page.Request.Form)

         {

             //handle ImageButton they having an additional "quasi-property" in their Id which identifies

             //mouse x and y coordinates

             if (ctl.EndsWith(".x") || ctl.EndsWith(".y"))

             {

                 ctrlStr = ctl.Substring(0, ctl.Length - 2);

                 c = page.FindControl(ctrlStr);

             }

             else

             {

                 c = page.FindControl(ctl);

             }

             if (c is System.Web.UI.WebControls.Button)

             {

                 control = c;

                 break;

             }

         }

     }

     if (control != null)

         strControlName = control.ID;

   

     return strControlName;

  

 }

In the above code the method GetPostBackControlName returns the name of the control that caused the postback. This method has been taken from the following post: http://geekswithblogs.net/mahesh/archive/2006/06/27/83264.aspx so all credits (if its original) to that poster for that code. You could find more explanation of the that method in that link.

How to above code works is like this: So when you run the above code, it would show a button, on click of that button I am showing a modal popup with some controls. When you hit save or you change the dropdownlist (autopostback=true), the page hits the page load event where in I check if the page is postback, if it is I find the name of the control which caused the postback and show the modal pop up and thus the modal pop up stays instead of hiding.

Hope this helps.

Calling Server Side Method Using jQuery/Ajax

2010-09-13T02:47:00Z

With this post I would show how to call server side method from client side. Here we will use jQuery to utilize the Ajax Capabilities which will help us to get/post data to/from server Asynchronously. There are many methods available to perform an async callback to the server. Here I will show a simple example as in how to call a code behind Webmethod.

For simplicity I would be calling the code behind method on a Button Click. Here is the code:

Aspx markup:

        1: <asp:Button ID="Button1" runat="server" Text="Click" />

       2: <br /><br />

       3: <div id="myDiv"></div>

jQuery:

       1: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

       2:   <script type ="text/javascript">

       3:       $(document).ready(function () {

       4:           $('#<%=Button1.ClientID %>').click(function () {

       5:               $.ajax({

       6:                   type: "POST",

       7:                   url: "WebForm1.aspx/ServerSideMethod",

       8:                   data: "{}",

       9:                   contentType: "application/json; charset=utf-8",

      10:                   dataType: "json",

      11:                   async: true,

      12:                   cache: false,

      13:                   success: function (msg) {

      14:                       $('#myDiv').text(msg.d); 

      15:                   }

      16:               })

      17:               return false;

      18:           });

      19:       });

      20:   </script>

Code Behind (C#):

       1: [WebMethod]

       2:    public static string ServerSideMethod()

       3:    {

       4:        return "Message from server.";

       5:    }

In the above code, the aspx markup contains a button on click of which we would call the server side method named ServerSideMethod(). The div would show the message returned from the server. When you run the code above and click the button, it would the div would show the message "Message from server".

If you want to send parameters to your code behind method, you would change the line 8 in the above jQuery code as:

       1: data: "{'param1': 1}"

With the above line I would be sending a parameter with value as 1 to the server side method.

The method would change as:

       1: [WebMethod]

       2:    public static string ServerSideMethod(string param1)

       3:    {

       4:        return "Message from server with parameter:"+param1;

       5:    }

The output will now be:

Message from server with parameter:1

You could also call any webmethod method in your webservice by changing the url in the jQuery as:

       1: url: "WebService1.asmx/ServerSideMethod"

where WebService1 is your webservice and ServerSideMethod is your webmethod in WebService1.

Recently I have seen a lot of questions from members in the asp.net forums asking about how to call Javascript confirm on button click and then based on user selection ie Yes/No process code behind logic.

Here is another example of how to do so:

       1: function MyConfirmMethod() {

       2:         if (confirm('Are your sure?')) {

       3:             $.ajax({

       4:                 type: "POST",

       5:                 url: "WebForm1.aspx/ServerSideMethod",

       6:                 data: "{}",

       7:                 contentType: "application/json; charset=utf-8",

       8:                 dataType: "json",

       9:                 success: function (msg) {

      10:                     $('#myDiv').text(msg.d);

      11:                 }

      12:             });

      13:             return false;

      14:         }

      15:         else {

      16:             return false;

      17:         }

      18:     }

       1: protected void Page_Load(object sender, EventArgs e)

       2:   {

       3:       Button1.Attributes.Add("onclick", "return MyConfirmMethod();");

       4:   }

       5:   [WebMethod]

       6:   public static string ServerSideMethod()

       7:   {

       8:       return "Message from server!";

       9:   }

Above you will see I am calling javascript confirm on the button click. On pressing yes, jQuery calls code behind method ServerSideMethod and returns back the message. You could perform any server side logic/database operations here based on the user response. Note I use return false as it prevents postback to the server.

Parse an XML file

2010-04-30T02:57:00Z

The following code shows a simple method of parsing through an XML file/string. We can get the parent name, child name, attributes etc from the XML. The namespace System.Xml would be the only additional namespace that we would be using.

string myXMl = "<Employees>" +
                 "<Employee ID='1' Name='John Mayer'" +
                      "Address='12th Street'" +
                      "City='New York' Zip='10004'>" +
                 "</Employee>" +
               "</Employees>";

XmlDocument xDoc = new XmlDocument();
xDoc.LoadXml(myXMl);

XmlNodeList xNodeList = xDoc.SelectNodes("Employees/child::node()");
foreach (XmlNode xNode in xNodeList)
{
  if (xNode.Name == "Employee")
  {
    string ID = xNode.Attributes["ID"].Value; //Outputs: 1 
    string Name = xNode.Attributes["Name"].Value;//Outputs: John Mayer 
    string Address = xNode.Attributes["Address"].Value;//Outputs: 12th Street 
    string City = xNode.Attributes["City"].Value;//Outputs: New York 
    string Zip = xNode.Attributes["Zip"].Value; //Outputs: 10004 
  }
}

Lets look at another XML:

string myXMl = "<root>" +
                 "<parent1>..some data</parent1>" +
                 "<parent2>" +
                   "<Child1 id='1' name='Adam'>data1</Child1>" +
                   "<Child2 id='2' name='Stanley'>data2</Child2>" +
                 "</parent2>" +
               "</root>";

XmlDocument xDoc = new XmlDocument();
xDoc.LoadXml(myXMl);
XmlNodeList xNodeList = xDoc.SelectNodes("root/child::node()");

//Traverse the entire XML nodes.
foreach (XmlNode xNode in xNodeList) 
{
    //Looks for any particular nodes
    if (xNode.Name == "parent1") 
    {
        //some traversing....
    }
    if (xNode.Name == "parent2")
    {
        //If the parent node has child nodes then 
        //traverse the child nodes
        foreach (XmlNode xNode1 in xNode.ChildNodes)
        {
           string childNodeName = xNode1.Name;       //Ouputs: Child1
           string childNodeData = xNode1.InnerText; //Outputs: data1

           //Loop through each attribute of the child nodes
           foreach (XmlAttribute xAtt in xNode1.Attributes)
           {
               string attrName = xAtt.Name;   //Outputs: id
               string attrValue = xAtt.Value; //Outputs: 1
           }
        }
    }
}

Asp.net Session State Revisited

2010-04-27T03:53:00Z

Every now and then I see doubts and queries which I believe is the most discussed topic in the .net environment - Asp.net Sessions. So what really are they, why are they needed and what does browser and .net do with it. These and some of the other questions I hope to answer with this post.

Because of the stateless nature of the HTTP protocol there is always a need of state management in a web application. There are many other ways to store data but I feel Session state is amongst the most powerful one. The ASP.NET session state is a technology that lets you store server-side, user-specific data. Our web applications can then use data to process request from the user for which the session state was instantiated.

So when does a session is first created? When we start a asp.net application a non-expiring cookie is created and its called as ASP.NET_SessionId. Basically there are two methods for this depending upon how you configure this setting in your config file. The session ID can be a part of cookie as discussed above(called as ASP.NET_SessionId) or it is embedded in the browser’s URL. For the latter part we have to set cookie-less session in our web.config file. These Session ID’s are 120-bit random number that is represented by 20-character string. The cookie will be alive until you close your browser. If you browse from one app to another within the same domain, then both the apps will use the same session ID to track the session state. Why reuse? so that you don’t have to create a new session ID for each request. One can abandon one particular Session by calling Session.Abandon() which will stop the page processing and clear out the session data. A subsequent page request causes a brand new session object to be instantiated. So what happened to my cookie? Well the session cookie is still there even when one Session.Abandon() is called and another session object is created.

The Session.Abandon() lets you clear out your session state without waiting for session timeout. By default, this time-out is a 20-minute sliding expiration. This expiration is refreshed every time that the user makes a request to the Web site and presents the session ID cookie. The Abandon method sets a flag in the session state object that indicates that the session state should be abandoned. If your app does not have global.asax then your session cookie will be killed at the end of each page request. So you need to have a global.asax file and Session_Start() handler to make sure that the session cookie will remain intact once its issued after the first page hit. The runtime invokes global.asax’s Session_OnEnd() when you call Session.Abandon() or the session times out. The session manager stores session data in HttpCache with sliding expiration where this timeout can be configured in the <sessionState> of web.config file. When the timeout is up the HttpCache will remove the session state object.

Sometimes we want particular pages not to time out as compared to other pages in our applications. We can handle this in two ways. First, we can set a timer or may be a JavaScript function that refreshes the page after fixed intervals of time. The only thing being the page being cached locally and then the request is not made to the server so to prevent that you can add this to your page:

<%@ OutputCache Location="None" VaryByParam="None" %>

Second approach is to move your page into its own folder and then add a web.config to that folder to control the timeout.

Also not all pages in your application will need access to session state. For those pages that do not, you can indicate that session state is not needed and prevent session data from being fetched from the store in requests to these pages. You can disable the session state at page level like this:

<%@ Page EnableSessionState="False" %>

tbc…

Proper casing of the strings

2010-04-22T02:13:26Z

Many a times we are required to show strings with proper casings. The TextInfo property from System.Globalization provides culture-specific casing information for strings. This has the advantage that it is culture aware and thus can be used for any country specific culture. This is how you would use it.

Two specific namespaces required for this:

using System.Globalization;
using System.Threading;

protected void Page_Load(object sender, EventArgs e)
{
   string myTitle = "to Proper casing";
   CultureInfo cultureInfo = Thread.CurrentThread.CurrentCulture;
   TextInfo textInfo = cultureInfo.TextInfo;

   Console.WriteLine(textInfo.ToTitleCase(myTitle)); 
   Console.WriteLine(textInfo.ToLower(myTitle));     
   Console.WriteLine(textInfo.ToUpper(myTitle));     

}

//Result: To Proper Casing
//Result: to proper casing
//Result: TO PROPER CASING