Task List window of Visual Studio

Recently, when microsoft launched Visual Studio 2010, they launched it with the very nice Campaign “Life runs on code”.Who all have seen the any advertisement of VS 2010, must have seen this also. It’s very true, we, developer’s life runs on code, and our code runs on Visual Studio IDE ( Obviously only on development phase :)  ).

As most of the time in our offices and home (only for workaholics :) we spent most of the time with visual studio IDE, we always try to find some way to code faster/better, to increase the productivity.
Visual studio IDE is full of myriad features, that helps us for faster and smoother coding. We most of the time are not aware of this and don’t use these.I always try to find some good feature at Visual studio, which we can use in our daily life and share with you all.

In this post, I am going to discuss a window, that is called as Task List window, some of you might aware this so this for rest developers :)

So what is the Task window, how it can help us. Let’s go in bit detail

As we have other window, Error/Warning window, we also have Task list window.To see this window, Go To View->Task List or directly using the keys Ctrl+W, T. This task list window show us the TODO list that we track and other annotations. Task list window has two views : User Task Window and Comments Window. We’ll discuss first comments Window.

Generally, we write some TODO or UNDONE comments, while development phase of our application. These comments are a sign, that we need to update/Change the code before releasing to QA/Staging environment.

As in my sample project, I have added few comments multiple files. These are listed in the Task List window (Comment View). One can all the these type of of comments in this window from the entire project. And one can click one by one and make changes whenever required. Let’s see the comments…

Task List: Comment View

We can click on any of it and it will take us to directly that line of code.

HACK, TODO, UNDONE, UnresolvedMergeConflict are default comment Tokens in VS IDE. But one can add custom tag based on their requirements.Go to Tools-> Options then under Environment click task list as below ( If Task list is not visible make sure “Show all settings” checkbox is checked at bottom of Options window).

Options Wnidow

Options Wnidow

To add a Custom Token, write the Token at Name input box, set the priority and then click on add button.We can also remove/change the existing token with the given buttons.

Now lets move to User Task View, this view list down all the user created tasks. One can create user tasks by clicking Create User Task icon, just beside view dropdown. Let’s see it

Task List: User Tasks view

Task List: User Tasks view

This gives you option to write the description of the task and set the priority. Once the task get completed, then one can mark it as completed by checking the checkbox.

Note: I have VS2008 for this post.

That’s all for now!!!

Cheers!!

Brij

 

Why MaxLength property of a textbox with multiline mode doesn’t work? A Solution

Many developers set the MaxLength property of a Textbox and it works fine until the Textbox is not in multiline mode, which is by default behavior of a Textbox.

So what is the basic diffference between a textbox in single line and multiline mode!!!

Let’s see, how it gets rendered as html. Lets have a look

Textbox with SingleLine mode

Textbox with SingleLine mode

Now Textbox with MultiLine mode

Textbox with MultiLine mode

Textbox with MultiLine mode

As you can see, When a Textbox is in SingleLine mode, it gets rendered as a input type text  and when it is in MultiLine mode, it gets rendered as a textarea. As we know MaxLength property works only for input type.

So what is the solution. We need to have a custom solution for this.

Let’s try some solution,

One thing we can do, we can attach a function on onkeypress event to the textbox, which first check the length of input string and if exceed with limit it just returns else allow to enter any input. In the below example I have used the maximum length as 10.

<asp:TextBox ID="tb" runat="server" TextMode="MultiLine" onkeypress="return CheckLength();"></asp:TextBox>

//And the javascript code is
function CheckLength() {
            var textbox = document.getElementById("<%=tb.ClientID%>").value;
            if (textbox.trim().length >= 10) {
                return false;
            }
            else {
                return true;
            }
        }

This works fine until, a user doesn’t paste a text  which is greater than the max length that is given( here 10).  So there is no simple way to stop this. To overcome this problem, one should use one of the asp.net validators.

One can go for the custom validator, and provide a javascript function, which checks the length of the text and if exceeds the maxlength then show an error. Let’s see the code below

<asp:TextBox ID="tb" runat="server" TextMode="MultiLine" ></asp:TextBox>
//Validator
        <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please enter maximum 10 charachters." ControlToValidate="tb"
         SetFocusOnError="true" ClientValidationFunction="CheckMaxLength" ></asp:CustomValidator>

//Client Validator function
function CheckMaxLength(sender, args) {
            if (args.Value.trim().length >= 10) {
                args.IsValid = false;
            }
        }

But there is another smart way is there, to acheive this. We can also use Regular expression validator for this, which will check the count of the entered character and will throw an error if it exceeds. Here we would not require to write a javascript function. We need to have a regular expression that will work. Let’s see the code

<asp:TextBox ID="tb" runat="server" TextMode="MultiLine" ></asp:TextBox>

//Regular Expression validator
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="tb" ErrorMessage="Please enter maximum 10 charachters."
 SetFocusOnError="true" ValidationExpression="^[a-zA-Z.]{0,10}$"></asp:RegularExpressionValidator>

Here we don’t require to write a javascript function. I have used a regular expression ^[a-zA-Z.]{0,10}$, which allows all the characters with length 0 to 10.

Hope you all must have enjoyed.

Thanks,

Brij

 

Why textbox persists data during postback even if View State set to off

I have seen lots of confusion in various threads, that How and Why a textbox persists data even when View State is set to off. Even I was confused earlier but I tried to discover it and I found the root cause, so sharing it to you all.
For that, first let’s see the page life cycle on postback.

ASP.NET Page Life Cycle

Now lets first discuss about the View State, How View State works?

If View State is on for any control, during LoadViewstate, the View State data that got saved last time , gets populated in the control. And in last, the SaveViewState method of every controls that are part of the control hiearchy, gets called and combined View State of all the controls gets base64 enocoded and saved.

So as we know the page is recreated every time page makes a trip to the server, the data persistence is done with the help of viewstate.

Now here the point that are we are going to discuss, even if we set off the View State of some controls like textbox, checkbox etc.. the data persists during postback.

Let’s discuss it in bit detail, whenever a page is submitted or posted back to server, the entire form data is posted to the server as a collection with the request. The collection is in the form of NamedValue collection and this collection has the mapping with uniqueid of the control and the value of the control. You can read the data from the form collection by using the following code snippet

	 	 
//Reading textbox value from the form collection	 	 
string textboxvalue = Request.Form[textbox1.UniqueID];	 	 

ASP.NET uses this primitive to update the control’s value. ASP.NET uses IPostBackDataHandler for the controls that load the data from the form collection.

Actually all the controls which implement IPostbackdatahandler, implement the method LoadPostData and RaisePostDataChangedEvent. But here the key method is LoadPostData, which returns true if the posted value is changed from earlier value and updates it with posted value, else it returns false. Lets see the sample code here

	 	 
public virtual bool LoadPostData(string uniqueId,	 	 
NameValueCollection postedCollection) {	 	 
//Getting the current value of control	 	 
String currentValue = this.Text;	 	 
//Getting the posted value from the form collection	 	 
String postedValue = postedCollection[uniqueId];	 	 
//Checks whether the posted value is changed from the current value, if yes updates it with the posted value and return yes	 	 
if (currentValue == null || !currentValue.Equals(postedValue)) {	 	 
this.Text = postedValue;	 	 
return true;	 	 
}	 	 
//else return false	 	 
return false;	 	 
}	 	 

As from the Page Life Cycle, we can see LoadPostData is called after the LoadViewState, whether viewstate is on or not, it gets populated from the posted data. That’s why the data get persisted even if viewstate is set to off for few controls. Following is the complete list of the controls, those implement IPostBackDataHandler.

  • CheckBox
  • CheckBoxList
  • DropDownList
  • HtmlInputCheckBox
  • HtmlInputFile
  • HtmlInputHidden
  • HtmlInputImage
  • HtmlInputRadioButton
  • HtmlInputText
  • HtmlSelect
  • HtmlTextArea
  • ImageButton
  • ListBox
  • RadioButtonList
  • TextBox

I think, this must have helped many of you overcome from this hazzy picture.
Thanks,
Brij

Globalisation with jQuery

Download Sample application

Introduction

Recently, Microsoft announced three jQuery plugins as Official plugin.

  • jQuery Client Templating
  • Data linking
  • Globalization

I found all of them very cool feature for web development.
I have already written articles about the first two. Please find the link below.

I think, you all must have found the above articles very useful and will be using in near future or some of you might have started using this. I would request you all that to share your views about the article, which will be very helpful for me in better writing.

Now, In this article, I am going to discuss the last feature that is Globalization. When we say Globalization, the thing that comes in our mind is resource files. ASP.NET itself provides very good facility to cater the needs of Globalization.But which requires a postback, so it doesn’t look nice and not good in performance as well.

jQuery also provides us a way to implement the globalization, with supported plugin.

Again, I am writing few common points that I wrote in my last two Articles, for the new readers.

What is Globalization

As per MSDN “Globalization is the process of designing and developing
applications that function for multiple cultures
.”

So Globalization allows us to develop an application, which provides the option to localize the application in different cultures/languages. Now as we are working in global environment and serving the entire world, it becomes the necessity, to provide the globalization feature to our application.

So in this article, I am going to discuss, How we can provide the Globalization feature with the help of jQuery.

Prerequisite

  • jQuery library
  • Plugin for Globalization

jQuery already comes with VS2008/2010. But if you are working VS 2005 then you can download from the following link.

Download jQuery

To download plugin for Globalization,
click here

Globalization with jQuery:

So in this article, I am going to discuss, How we can utilise the Globalization feature of jQuery.

jQuery provides us the power to format and parse date, number and currencies in different cultures.  jQuery plugin defines over 350 cultures that currently supported by the plugin.

There are languages those are common in few regions/countries, but the formatting of numbers, currencies and date varies. Like English is spoken in several countries USA, UK and other various European countries. For these we have several cultures defined, that is used to identify the uniqueness amongst these countries.

This plugin comes in two flavors.

One file jQuery.glob.all.js includes around 350 cultures currently. So with this we need to include only this file for all
the cultures supported by the plugin. Another way,Plugin has also culture specific js files, that can included based on cultures that are supported by the application.

Some common APIs of the Plugin:

jQuery.culture:This holds the culture information that is currently set and is used in default case, i e while formatting various values this culture is used if no culture is specified.

jQuery.preferCulture:This method is used set the culture that user prefers and this culture is used for all the formatting, parsing etc done on the page. Actually as the method name suggests, it selects the best match culture that’s JavaScript is included in the page.

jQuery.format:
This method is used to format the date, number and currency in the given format string. This method is widely used.

jQuery.findClosestCulture:
This method works in similar way as preferCulture but it returns the best matching culture and don’t set the jQuery.culture to it.

jQuery.localize:
This method allows us to extend the specific culture and returns or set
the localized value.

There are many more functions like jQuery.parseInt, jQuery.parseFloat, jQuery.parseDate etc provided by the plugin, that can be used for several specific purposes.I have discussed some of them.

Let’s see some Examples:

Here In this section, I’ll be showing you some examples.

First Example:: In this example, I am displaying the stock deatils of Infosys on a specific date. It includes the price and number of unit sold on a specific date in two different cultures. Let’s see the running application.

 

 

 

 

 

 

 

 

 

Now lets move to the code. First let’s see the aspx code

<table style="border:1px solid black; font-family:Verdana; font-size:small">
            <tr>
                <td colspan="2"><h3>English - US</h3></td>
            </tr>
            <tr>
                <td>Stock Name</td>
                <td><span id="Text1" >Infosys</span></td>
            </tr>
            <tr>
                <td>Stock Price </td>
                <td><span id="price"/></td>
            </tr>
            <tr>
                <td>Day</td>
                <td><span id="date"/></td>
            </tr>
            <tr>
                <td>Units Transacted</td>
                <td><span id="unitsTransacted" /></td>
            </tr>
            <tr>
                <td colspan="2"><h3>France - French </h3></td>
            </tr>
            <tr>
                <td>Stock Name</td>
                <td><span id="Span1">Infosys</span></td>
            </tr>
            <tr>
                <td>Stock Price </td>
                <td><span id="price1"/></td>
            </tr>
            <tr>
                <td>Date</td>
                <td><span id="date1"/></td>
            </tr>
            <tr>
                <td>Units Transacted</td>
                <td><span id="unitsTransacted1" /></td>
            </tr>
        </table>

Above as you can see, I am displaying Stock details Infosys in two different cultures English-US and France-French.
Now lets jump to script. Here the script that I have include. These are

 <script src="scripts/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="scripts/jquery.glob.js" type="text/javascript"></script>
    <script src="scripts/globinfo/jQuery.glob.all.js" type="text/javascript"></script>

So I have included three files here. First the jQuery file the common Global file and last one is the file that contains all culture specific details.
Now rest javascript code is

       // Set culture
        jQuery.preferCulture("en-US");

        // Formatting price
        var price = jQuery.format(3899.888, "c");
        //Assigning stock price to the control
        jQuery("#price").html(price);

        // Formatting date
        var date = jQuery.format(new Date(2010, 11, 15), "D");
        //Assigning date to the control
        jQuery("#date").html(date);

        // Formatring units trabsacted
        var units = jQuery.format(45678.576, "n2");
        //Assigning units to the control
        jQuery("#unitsTransacted").html(units);

        // Set culture
        jQuery.preferCulture("fr-FR");

        // Format price
        var price = jQuery.format(3899.888, "c");
        //Assigning stock price to the control
       jQuery("#price1").html(price);

        // Format date available
        var date = jQuery.format(new Date(2010, 11, 15), "D");
        //Assigning date to the control
        jQuery("#date1").html(date);

        // Format units in stock
        var units = jQuery.format(45678.576, "n2");
        //Assigning units to the control
        jQuery("#unitsTransacted1").html(units);

As you can see from the above code, that I have used the preferCulture method to set the culture and format method to format the various data like price, date and units here.

So above one is the simple example which describes that how the plugin works.

Changing culture dynamically:

Now in this example, I am talking about another scenario where user may want to select the culture dynamically, and want to get the page updated accordingly.

In my sample example, I am having one dropdown, user selects the culture and page is getting updated accordingly.
First lets see the application.

 

 

 

 

 

 

 

 

Now let’s jump on the code.First let’s view the aspx code

 <table style="border:1px solid black; font-family:Verdana; font-size:small">
            <tr>
                <td style="font-weight:bold">Select Culture</td>
                <td>
                    <select id="ddlCultures">
                        <option value="en-US">English - US</option>
                        <option value="en-IN">EngLish - India</option>
                        <option value="en-AU">EngLish - Australia</option>
                        <option value="fr-FR">French - France</option>
                        <option value="es-MX">Spanish - Mexico</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="font-weight:bold">Stock Name</td>
                <td> <span id="Text1">Infosys </span></td>
            </tr>
            <tr>
                <td style="font-weight:bold">Stock Price</td>
                <td><span id="price"/></td>
            </tr>
            <tr>
                <td style="font-weight:bold">Day</td>
                <td><span id="date"/></td>
            </tr>
            <tr>
                <td style="font-weight:bold">Units Transacted</td>
                <td><span id="unitsTransacted"/></td>
            </tr>
        </table>

Now let’s see the scripts included

<script src="scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="scripts/jquery.glob.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-US.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-IN.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.en-AU.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.fr-FR.min.js" type="text/javascript"></script>
<script src="scripts/globinfo/jQuery.glob.es-MX.min.js" type="text/javascript"></script>

As you can see above,I have included culture specific files instead of one common files for all the cultures. Because the size of common files for all 350 cultures could be a performance overhead. As we know, that these are specific
cultures that are going to be used in the application, then we should go for culture specific files.

Now javascript code

     LoadPage("en-US");

     jQuery("#ddlCultures").change(function() {
         var selectedCulture = this.value;
         LoadPage(selectedCulture);
     });

        function LoadPage(selectedCulture) {

            jQuery.preferCulture(selectedCulture);

            var price = $.format(3899.888, "c");
            jQuery("#price").html('12345');

            // Format date available
            var date = $.format(new Date(2011, 12, 25), "D");
            jQuery("#date").html(date);

            // Format units in stock
            var units = $.format(45678, "n0");
            jQuery("#unitsTransacted").html(units);
        }

In this code, I have taken a dropdown with multiple cultures. One can select the desired culture and page will be modified accordingly. I have used the same form but I have called preferculture method based on the selection of dropdown.

Rest code is same as above example.

Picking culture info from Browser:

Sometimes user also set culture preferences in the browser. And lots of applications rely on it. So we can also read the culture information from the browser and can load the page accordingly. To get the culture information we
can use the following.

  var language = "<%= Request.UserLanguages[0] %>";
  jQuery.preferCulture(language);

Conclusion:

This feature is very useful for the applications targeting the entire Globe. As you are moving forward for RIA applications, this plugin of jQuery could be key.

Hope you all must have enjoyed my above article. Please share your valuable feedback, that will help me a lot for better writing.

Feedback and Suggestions:

Hope you all must have enjoyed my above article. Please share your valuable feedback, that will help me a lot for better writing.