Pages

Friday, March 30, 2012

In this post I am going to show how to achieve cascading functionality with the help of jQuery AutoComplete UI control rather than we are doing with the help of comobo-box controls till date.

By the following screen shot I am going to explain what I am going to achieve in this post and in later on post I am going to explain the part of the code did by me.

Screen 1: Loading Suggestion

When user start typing in country textbox loader image shows that its loading suggestion for the character typed in textbox.

Screen 2: Display Suggestion

List of suggestion displayed to the end user , which is in turn fetch from the server.

Screen 3: Display State aftter country selection

Select State textbox get visible once user select country name from the suggestion list.

Screen 4: Display City after State selection

Select city textbox get visible once user select state name from the suggestion list.

Screen 5: Display Search button after selecting city

Search button get visible once user done with the selection of city name from the suggested cities.

Screen 6: Displaying Search data

Search Data get displayed in the gridview control once user click on search button.

Screen 7: "No Data Found" Error Message

Error message get displayed when user types in the textbox and suggestion is not available to display.

Screen 8: "Enter valid Data" Error Message
Alert Message of enter data get displayed when search button is press and one of the textbox value is not present.

Screen 9: "Enter valid Data" Error Message

Alert Message of enter data get displayed when search button is press and one of the textbox having value for which suggestion is not present.

As you can see in the screen shot when I type auto-complete functionality show me the suggestion and once I select suggestion , selected value get placed in the textbox and another row get visible which does the same functionality.

Now in the below post I am going to discuss about cascading thing with one textbox only but you can see whole by downloading the full source code of this post.

Aspx page i.e html markup
First start with the Aspx page, what the changes I did for the autocomplete textbox which is going to cascade other autocomplete textbox

TextBox id="txtCountry"
attached class="autosuggest", which tells that when you start typing in its going to display list of suggestion which fetched from the database using ajax and autocomplete plug-in.

Span id="spCountry"
It get display when there is no suggestion avaialbe for the character typed in textbox.

<div style="display: none;">

As you see above div having style display=none that means the button and textbox both remains hidden when the page get display on browser.Button id "btnCountry"
on click event get fire when of of the suggestion get selected. So this button fire up the server side event from javascript and make visible the next level textbox. How it fires the event

this layout is same for the State and City next level selection textboxes that you can see in full source code.

jQuery/Javascript
Following is jQuery method that going be utilize for the showing the suggestion , which is provided by autocomplete plug-in.

autocomplete - method
method provided by the pug-in which is in turn get attach with the textbox control which than show the suggestion when user types in. In the above code its attached with the Country textbox, which is same for the State and city textbox that you can see in full code.

Attribute of autocomplete source - is from which suggestion will come up, as I am fetching data from the server side page/function I used jQuery ajax function to get the list from server. Sucess - function attached with this attribute of the ajax function get the data for suggestion list as you can see if the data length is equal to 0 than it display span element which shows that data is not present.

minLength - no of char typed by use in textbox before the suggestion come up i.e after this many character typed by user than the source get query for suggestion. over here is having value 1 means its start showing suggestion once you start writing in it.

minLength: 1,

select - function associated with this attribute get fire when the use select the item from suggestion list. This is most useful function that do postback and do execute code on serverside by calling serverside button click function , button click function enable State row. As well as this break the string and assign text value to country textbox and id to countryid textbox which is hidden one and which value utilize by the state texbox to display suggestion.

the code checks for is any of the span element associated with the textbox control is visible which display error message "No Data Found" and also check that is any on textbox contrains blank value. If its all proper it return true value otherwise return false.

CodeBehind Files - aspx.cs file
In cs file I designed class for the testing purpose the name of the class is Common which is going to be utilize by GetCountry, GetState and GetCity methods

Name- name of the person
Email - email Address
CityID - is the id of city which user belongs.

As I explained before when user start typing in the textbox suggestion list come from the serverside method, following is the one of the method you find other in full code. GetCountry method get called when start typing in Country textbox.

As I am going to call the method from server side its having attribute WebMethod. In the above code I initialize the collection of country and country is parent element all element have the parentid 0.
Method has parameter called id which is contains the value of the textbox which is typed in textbox. ajax calling function in source pass the id as json parameter to method that you can see in above method of jQuery/javascript.

Above code as you can see apply linq query on the collection and locate the match element which starts by the character typed in textbox.

Conclusion
So the above post demonstrate that its easy to achieve the cascading with the help of the auto suggest functionality provided by jQuery autosuggest plug-in.

Note :
Find download code at the start of article and if you have any problem in downloading source code and if you have any query regarding this please mail me at : pranayamr@gmail.com or post comment at below.

When you run the above line and print value of the datetime variable on console. It write donw current date rather than adding 3 day in it.

For example : -
if the current date is 26/3/2012 output is 26/3/2012 not 29/3/2012.
This example clear out that DateTime is immutable type. what ever you changes done by you its not change the value of datetime. If you want to make chnage in the value of DateTime variable value youe need to write down

As you se above I did change in code by assigin value changed value to dt again so its now going to preserve the value what we change. Now if you write down value of dt on console its write donw "29/3/2012" if the current date is "26/3/2012".

I hope that I clear out the point DateTime is immutable because there are not of begineer level devloper thinks that when the do change in DateTime object it going to reflect on the sate of object.

Wednesday, March 7, 2012

TryParse methods which is provided by the .net framewok is one of the important method when you are converting string data into perticular primary datatype and wants to verify that it is convertable in given type or not.

Syntax

boolean datatype.TryParse(stringvariable, out datatypevariable)

As in syntax TryPrase method of the datatype try to convert stringvalue in the given datatype if it succeeds than returns true and assign value to datatypevariable otherwise return false.

Where to Use :
- Avoid runtime error of converting explicite data type.

object s = "5b";
int a = (int)s;

- To replace Parse Method code which is throws runtime exception.

string s = "5b";
int a = int.Parse(s);

- When you want to validate data which you are reading from your textbox.

Example
I am going to discuss about the case where I found it useful and how it's helpful to you in your project.

Recently I was working on project which is reading data from the excel file which contains employee details and converting that excel in the DataTable format.

So the above method return the employeeid in asending order and display the row which are not integer at last.
As you can see TryPrase method of int in Linq query return employeeid if its integer and 0 if the employeeid is not integer.