Tech Tasks : Blogger Help,Asp.Net,C#.Net Articles

How to Bind the DropDownList With Enum

2011-12-21T20:59:00.001+05:30

We can Bind DropDownList with no of ways, Now I am going to show how to bind dropdown using ‘enum’.

Check This How To Bind DropDownList Using List Collection and DataSet in Asp.Net

Let’s take Countries ‘enum’ as follows

enum enCountries:int{India=0,USA,

,UAE};

Let see How to Bind the DropDownList With Enum

ddlEnumBind.Items.Add("--Select Country--");

//get enum items to get the respective enum value

string[] enumNames=Enum.GetNames(typeof(enCountries));

foreach (string item in enumNames)

{

//get the enum item value

int value = (int)Enum.Parse(typeof(enCountries), item);

ListItem listItem = new ListItem(item, value.ToString());

ddlEnumBind.Items.Add(listItem);

}

Blogger New Futures Are Available @ Draft

2011-06-09T23:14:00.040+05:30

Blogger already promises to introduce more new futures in this year. Today my Blogger dashboard becomes more powerful with new features and look.

Just see the Screen shots of my new Dashboard

How To Bind DropDownList Using List Collection and DataSet in Asp.Net

2011-05-28T14:45:00.001+05:30

We can bind DropDownList in Different ways by using List, Dictionary and DataSet.

To bind DropDownList we need to set some properties
DataSource
DataValueField
DataTextField
Let see how to use these properties to bind DropDownList

Binding DropDownList with List

In This Case the DropDownList both 'Value' and 'Text' field are same.

DropDownList ddl = new DropDownList();

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

countries.Add("USA");

countries.Add("India");

ddl.DataSource = countries;

ddl.DataBind();

Binding DropDownList with Dictionary

Dictionary<string, string> States = new Dictionary<string, string>();

States.Add("-1","-Select State-");

States.Add("AP", "Andhra Predesh");

States.Add("KA", "Karnataka");

States.Add("TN", "Tamilnadu");

States.Add("KL", "Kerala");

ddl.DataSource = States;

ddl.DataValueField = "Key";

ddl.DataTextField = "Value";

ddl.DataBind();

Binding DropDownList with DataSet

My DataSet Contains a Class table(class_id,class_name,description)

ddl.DataSource = dataset.Tables[0].DefaultView;

ddl.DataValueField = "class_id";

ddl.DataTextField = "class_name";

ddl.DataBind();

ListItem item = new ListItem("-Select Class-", "-1");

ddl.Items.Insert(0, item);

Happy Coding

jQuery Toggle Button Widget For Blogger

2011-04-28T21:09:00.004+05:30

jQuery is Most Powerful and useful Library.In my blog i used jQuery to Develop no of widgets for making more useful and attractive.

List of jQuery Widgets for Blogger

Closeable jQuery Floating Message Box For Bloggers

Simple jQuery Multi Tabbed Navigation Widget For Blogger

Smooth Scrolling Widget For Blogger

jQuery Accordion Widget for Blogger

In this article i am going to show how add a toggle widget for Blogger.

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

/* TT- Start Toggle Div CSS */
div.toggle_head {
padding: 0px 3px 0 15px;
margin: 0 0 0px 0;
margin-top:10px;
background: #0080FF url(https://lh4.googleusercontent.com/_-A4vw5BwqxA/TZmBZf6FvRI/AAAAAAAAFcs/dJzL2rz1KpY/minus.jpg) no-repeat right center;
height: 25px;
line-height: 25px;
width: 94%;
border-radius: 5px 5px 0px 0px;
float: left;
_float: none;
/* Float works in all browsers but IE6 */
border: 1px solid #999;
border-bottom: 1px solid #ccc;
cursor: pointer;
border-radius:5px;
color:#ffffff;
vertical-align:center;
}
div.toggle_head li {
padding-top:6px;
color: #ffffff;
display: block;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
vertical-align:center;
}
div.toggle_head li:hover {
color: #000000;
border-radius: 5px 5px 5px 5px;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
vertical-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.toggle_active
{
border-radius: 5px 5px 5px 5px;
padding: 0px 3px 0 15px;
background: #0080FF url(https://lh5.googleusercontent.com/_-A4vw5BwqxA/TZmBZahS8rI/AAAAAAAAFcw/p49jXBjARvI/pluse.jpg) no-repeat right center;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.toggle_body {
margin: 0 0 0px;
padding: 0;
border-top: 1px solid #d6d6d6;
background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
overflow: hidden;
font-size: 1.2em;
width: 100%;
clear: both;
}

/* TT- End Toggle Div CS S*/

»If you want customize the Tabbed Widget colors just Follow the comments to Change the colors

»Simply replace these colors with your custom colors in the above code respectively.

Step 2:Find </head>; .

Cope and paste the below just before </head> this.

Step 3:Find <div id='sidebar-wrapper'> or <div id='sidebar' > ;

If u can't find above code don't bother about that,Coz template designers are developed different ways.Just find the starting <Div> of Sidebar

Now copy and paste below code just below that.

Finally Save the Template.

Then Go to your page Elements Page and add the widgets for your accordion.

Your comments and suggestions are most encouraging thing for me to write more articles.

Happy Blogging.

Very Interesting Windows Magical Bugs

2011-04-16T11:28:00.000+05:30

Today i got mail notifying about very interesting and amazing Magical bug in WINDOWS

MAGIC #1

An Indian found that nobody can create a FOLDER anywhere on
the Computer which can be named as "CON". This is
something funny and inexplicable? At Microsoft the whole
Team, couldn't answer why this happened!
TRY IT NOW, IT WILL NOT CREATE A "CON"
FOLDER

MAGIC #2

For those of you using Windows, do the following:

1.) Open an empty notepad file
2.) Type "Bush hid the facts" (without the quotes)
3.) Save it as whatever you want.
4.) Close it, and re-open it.

Noticed the weird bug? No one
can explain!

MAGIC #3

Again this is something funny and can't be explained?
At Microsoft the whole Team, including Bill Gates,
couldn't answer why this happened!

It was discovered by a Brazilian. Try it out
yourself?

Open Microsoft Word and type

=rand (200, 99)

And then press ENTER
And see the
magic?..!

MAGIC #4

Did you know that a flight number from one of the planes that hit one of the two WTC towers on 9/11 was Q33N. In Notepad / WordPad or MS Word, type that flight number i.e Q33N. Increase the font size to 72. Change the font to Wingdings. ….. u will be amazed by the findings!!!…………………..

i got two Magics only can u try and let me about other also.

jQuery Accordion Widget for Blogger

2011-04-05T20:52:00.006+05:30

Accordion is more use as Multi Tabbed Widget.you might have been seeing on many sites.
I this article i am going to how to add Accordion as a Widget for your blog.
Check out my other useful jQuery Widgets For Blogger

Closeable jQuery Floating Message Box For Bloggers

Simple jQuery Multi Tabbed Navigation Widget For Blogger

Smooth Scrolling Widget For Blogger

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

/* TechTasks accordian CSS*/
#TTAccordian {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.accordionButton {
width:100%;
float: left;
_float: none;
background: #E0E0E0; /* Default Background Color*/
border: 1px solid #999;
border-bottom: 1px solid #ccc;
cursor: pointer;
border-radius:5px;
}
.accHead
{
padding:5px 5px 5px 10px;
font: bold 12px Arial, Tahoma, Verdana;
text-transform: uppercase;
}
.accordionContent {
width: 100%;
float: left;
_float: none;
background: #ffffff;
border-radius:5px;
}

.on {
background: #0080FF; /* Selected Accordion Background Color*/
border-radius:5px;
color:#ffffff;
}

.over {
background: #5CAEFF; /* Mouse Over Background Color*/
color:#fff
border-radius:5px;
color:#ffffff;
}

/* End TechTasks accordian CSS*/

»If you want customize the Tabbed Widget colors just Follow the comments to Change the colors

»Simply replace these colors with your custom colors in the above code respectively.

Step 2:Find </head> .

Cope and paste the below just before </head> this.

Step 3:Find <div id='sidebar-wrapper'> or <div id='sidebar'>

If u can't find above code don't bother about that,Coz template designers are developed different ways.Just find the starting <Div> of Sidebar

Now copy and paste below code just below that.

<div id='TTAccordian'>
<div class='accordionButton' id='open'><div class='accHead'>Facebook</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion1' preferred='yes'>
</b:section>
</div>
<div class='accordionButton'><div class='accHead'>Future Widgets</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion2' preferred='yes'>
</b:section>
</div>
<div class='accordionButton'><div class='accHead'>About Author</div></div>
<div class='accordionContent'>
<b:section class='sidebar' id='accordion3' preferred='yes'>
</b:section>
</div>
</div>

Finally Save the Template.

Then Go to your page Elements Page and add the widgets for your accordion.

I think i am free to respond your queries.

Source: stemkoski.com

Smooth Scrolling Widget For Blogger

2011-04-02T08:40:00.005+05:30

So many blogs contains lengthy pages,the readers fell difficult to navigate in page.In so many blogs or sites you may find this jQuery Scroll to top Widget,If u your looking for that,Then go add this jQuery Smooth Scrolling Widget to give more look and fell for your blog.Check these other jQuery Widgets

»jQuery Floating Message Box Widget

»jQuery Multi Tabber Widget

Just see Demo of Scrolling to Top and jQuery features

»First Download the Template

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

#top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Step 2:Find </head>.

Cope and paste the below just before </head&gt this.

Step 3:Finally find the >/body>

Now copy and paste below code just above the </body>.

Now See The jQuery Smooth Scrolling in Your Blog

»Finally save the Template and see the preview

Happy Blogging

A Great News To (Photo)Blogger Authors

2011-03-31T23:16:00.001+05:30

Absolutely this is great news blogger Authors especially photo bloggers,Blogger introduces new futures to authors to project their blog with great look and fell.

Blogger currently offers five dynamic views for its public blogs. These views are only accessible if allowed for by the blog author

Flipcard: available at http://funevil.blogspot.com/view/flipcard

Mosaic: available at http://funevil.blogspot.com/view/mosaic

Sidebar: available at http://funevil.blogspot.com/view/sidebar

Snapshot: available at http://funevil.blogspot.com/view/snapshot

Timeslide: available at http://funevil.blogspot.com/view/timeslide

These views require modern browsers such as Internet Explorer 8+, Firefox 3.5+, Chrome or Safari. Many elements of these views will not work should you have an older browser.
In all views, search is available in the upper right hand corner. Clicking on the ">" arrow in the very top left of the header bar will slide the header bar across and allow you to choose different views for the current blog as well as type in a new blog URL.
There is also a feedback link for each view.

Flipcard

Mouse over any of the cards to see the post title and comment count. As you scroll down, additional posts will continue to load.
Click on a card to see the post in full view. You can navigate through the posts using J (older post) and K (newer post) or the arrow keys. Hit escape or click Back to all posts to return to the Flipcard view.
In the upper left, click to sort by Date, Author and Category.

Mosaic

Clicking on an individual tile will expand that post to the full width of the view, and clicking again will collapse the post back into its original position.
The exact position of the tiles is randomly determined each time the blog loads, but they will appear chronologically from top left to bottom right.
Once a tile is expanded, you can page down by using the "up" and "down" arrow keys as well as J and K.
This view is optimized for the tablet viewing, and supports screen rotation.

Sidebar

Optimized for quick reading and browsing.
Left sidebar is list of chronological posts, with comment counts and thumbnails for individual posts.
J and K arrow keys will navigate through the posts, and comments can be displayed on the same page by clicking the Show link.

Snapshot

This view will display only the posts which have images.
Clicking through any photo will display the full post page, with naviagtion links at the bottom for Newer and Older posts
Mousing over any photo will display a post snippet

Timeslide

This view breaks the blog content down into three different areas:
- Left column: Enlarged picture with a post snippet, title, and snipppet displayed in chronological order
- Middle column: Displays just the post title and snippet
- Right column: Displays just the individual post titles
When searching for posts in this view, the results will be highlighted.

Source: Blogger Buzz

All In One Floating Subscribe N Share Widget For Blogger (Extension)

2011-03-27T11:56:00.006+05:30

In last article i write article on Floating Message Box for Blogger, Now in this article i am going to configure that one as a Fully Loaded Social Widget.

List Of Futures

»eMail Subscription
»Add This Share Widget
»All Connection To Your Blog

Now see how add the widget,For this you need to add the this widget Closeable jQuery Floating Message Box For Bloggers

»Skip the Step3 and Add this code Just before </body>

<div id='TT_float_box_top'>
<table class='float_table'><tr><td>
<form action="http://feedburner.google.com/fb/a/mailverify" style="border: 0px solid rgbundefined204, 204, 204); padding: 0px; text-align: center;" target="popupwindow" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=techtasks', 'popupwindow', 'scrollbars=yes,width=550,height=500');return true">Sign up to receive our site updates! <input onfocus="ifundefinedthis.value==this.defaultValue)this.value='';
" value="Enter your email address" / name="email" size="20" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" type="text"/><input value="techtasks" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="Send Me" id='searchbutton' type="submit"/></form>

</td><td>


Connect to TT
<a href='http://feeds2.feedburner.com/techtasks' target='_blank'><img border='0' src='https://lh3.googleusercontent.com/_-A4vw5BwqxA/TY2Pt_hipwI/AAAAAAAAFbE/jNxo4zUb73U/feed_24.png'/></a>

<a href='http://twitter.com/funevil' target='_blanck'><img alt='Facebook' src='https://lh3.googleusercontent.com/_-A4vw5BwqxA/TY2PuZEYaAI/AAAAAAAAFbI/A9ZvjE0q8O4/twitter_24.png'/></a>

<a href='http://www.facebook.com/pages/TechTasks/138232272896368' target='_blanck'><img src='https://lh6.googleusercontent.com/_-A4vw5BwqxA/TY2PtoQaunI/AAAAAAAAFbA/kamxHzLcNdM/facebook_24.png'/></a>

<a href='http://www.orkut.co.in/Main#Community?cmm=109585120' target='_blanck'><img src='http://lh3.ggpht.com/_-A4vw5BwqxA/TPiz5jRQmLI/AAAAAAAAElE/WXmavjbnqpM/orkut_32.png'/></a>

</td><td>
<img id='TT_close_box_t' src='https://lh5.googleusercontent.com/_-A4vw5BwqxA/TYRgmJlU71I/AAAAAAAAFaE/_bh9kfx5oT4/s288/DeleteRed.png'/>
</td></tr></table>
</div>

Now Configuration of Floating Share Widget

»Change the Subscription value as shown below image

»Change the Connection URL as Follows

Finally
Happy Blogging

Closeable jQuery Floating Message Box For Bloggers

2011-03-19T22:22:00.004+05:30

I very eagerly waiting for to make this available for blogger, Previously i make jQuery Tabber Widget For Blogger now in this article i will show how to display the jQuery Message Box

»I think no need to mention(First Download the Template)

See Demo

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

/*----------Begin TechTasks Message Box CSS--------------*/

#TT_float_box_top {
background: none repeat scroll 0 0 #E1F0FF;
border: 1px solid #0080FF;
border-radius: 0 0 20px 20px;
font-weight: bold;
padding: 1px;
position: absolute;
text-align: center;
top: 0;
width: 99%;
left: 5px;
right: 5px;
}
#TT_close_box_t
{
float:right;
cursor:pointer;
padding: 10px 10px 0px 0px;
}
/*----------End TechTasks Message Box CSS--------------*/

Step 2:Find </head> .

Cope and paste the below just before </head> this.

Step 3:Finally find the </body>

Now copy and paste below code just above the </body>.

Now See The jQuery Message Box in Your Blog

»Finally save the Template and see the preview

Feel Free to ask any queries about this...

How To Find Controls Inside MasterPage ContentPlaceHolder Of ASP.Net Page

2011-03-12T18:48:00.006+05:30

I experienced Page.FindControl() is not working in Asp.Net Page when we are using MastePage.

In this Article i am going to show how to find controls in Asp.Net Page as well How to get MaterPage controls in Asp.net Page

How To Find Controls Of MastePage In Asp.Net Page

»In MasterPage i added a label and One ContentPlaceHolder, This is My MasterPage code snippet to demonstrate

<form id="form1" runat="server"&gt

<div><asp:Label ID="lblUN" runat="server" Text="Raji">asp:Label>div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

asp:ContentPlaceHolder>

</form>

»I added a TextBox inside ContentPlaceHolder of Asp.Net page that uses a master Page.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server" >

<asp:TextBox ID="txtUName" runat="server" Text="Raji">asp:TextBox>

&lt/asp:Content>

»To find the 'Label' controls of Master page just add the following line in CodeBehind(.cs) page

Label l = Master.FindControl("lblUN") as Label;

How To Find The Controls In a Page

»To find the controls in page just use the following code snippet

TextBox TB= Master.FindControl("ContentPlaceHolder1").FindControl("txtUName") as TextBox;

Happy Coding

How To Display PreFixText In Different Style Of ASP.NET AutoComplete Extender

2011-03-12T11:47:00.004+05:30

In this article i am going to show how to display PreFixTest In Different Style.Before going to forward i think you have idea about How to Use AutoComplete Extender, If not check This Article
and in last article i discussed about AutoCompleteExtender with Progress Image

»First Set the Flowing Properties in AutoComplete Extender

BehaviorID="AutoCompleteEx"
OnClientItemSelected="aceSelected"

OnClientPopulated="acePopulated"

»Add The Following JavaScript Functions

<script type="text/javascript">

function aceSelected(sender, e) {

var value = e.get_value();

if (!value) {

if (e._item.parentElement && e._item.parentElement.tagName == "LI")

value = e._item.parentElement.attributes["_value"].value;

else if (e._item.parentElement && e._item.parentElement.parentElement.tagName == "LI")

value = e._item.parentElement.parentElement.attributes["_value"].value;

else if (e._item.parentNode && e._item.parentNode.tagName == "LI")

value = e._item.parentNode._value;

else if (e._item.parentNode && e._item.parentNode.parentNode.tagName == "LI")

value = e._item.parentNode.parentNode._value;

else value = "";

}

var searchText = $get('<%=txtCity.ClientID %>').value;

searchText = searchText.replace('null', '');

sender.get_element().value = searchText + value;

}

function acePopulated(sender, e) {

//Give BehaviourId here

var behavior = $find('AutoCompleteEx');

var target = behavior.get_completionList();

if (behavior._currentPrefix != null) {

var prefix = behavior._currentPrefix.toLowerCase();

var i;

for (i = 0; i < target.childNodes.length; i++) {

var sValue = target.childNodes[i].innerHTML.toLowerCase();

if (sValue.indexOf(prefix) != -1) {

var fstr = target.childNodes[i].innerHTML.substring(0, sValue.indexOf(prefix));

var pstr = target.childNodes[i].innerHTML.substring(fstr.length, fstr.length + prefix.length);

var estr = target.childNodes[i].innerHTML.substring(fstr.length + prefix.length, target.childNodes[i].innerHTML.length);

target.childNodes[i].innerHTML = "<div class='autocomplete-item'>" + fstr + '<B><font color=red>' + pstr + '</font></B>' + estr + "</div>";

}

<script>

»Add your style by changing the following line in 'acePopulated' JS Function

target.childNodes[i].innerHTML = "<div>" + fstr + '<B><font color=red>' + pstr + '</font></B>' + estr + "</div>";<

Happy Coding

Poor Error Handling In MSDN

2011-02-23T23:08:00.000+05:30

Today i am browsing MSDN in between i notify this error.

AutoCompleteExtender with Progress Image

2011-02-13T09:56:00.001+05:30

In last article i discussed about how to use AutoCompleteExtender,Now i am going to show here how to show progress image while retrieving results from DataBase,It is more use full if the DataBase Contains large no of records.

» Now create a website » Add TextBox » Add AutoCompleteExtender ass follows..

<asp:TextBox ID="txtCity" runat="server">asp:TextBox><img id="loading" style="visibility:hidden" src="ajaxloader-thumb.gif" />

<ac:AutoCompleteExtender ID="AutoCompleteExtender1" EnableCaching="true"

BehaviorID="AutoCompleteEx" TargetControlID="txtCity"

ServiceMethod="GetCities" MinimumPrefixLength="1"

onclientpopulating="ShowIcon"

OnClientPopulated="ShowIcon"

CompletionSetCount="10" CompletionListItemCssClass="autocomplete_completionListElement" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

CompletionListCssClass="autocomplete_listItem"

runat="server" FirstRowSelected="true" >

<ac:AutoCompleteExtender>

» onclientpopulating="ShowIcon" this make progress image visible

» onclientpopulated="ShowIcon" this make progress image hide

» Now add the flowing JavaScript in Head section

function ShowIcon() {

var e = document.getElementById("loading");

e.style.visibility = (e.style.visibility == 'visible') ? 'hidden' : 'visible';

}

» If your DataBase contains less no records then you can't able to see the effect of the progress image for this just add the following line..

System.Threading.Thread.Sleep(3000);

See the last article to understand completely How To Use Ajax AutoCompleteExtender in Asp.Net

happy coding

How To Use Ajax AutoCompleteExtender in Asp.Net

2011-02-12T20:49:00.001+05:30

Ajax a powerfull script on the web,It provides lot's more functionality to improve your application Perfomence and look and fell..

In this article i am going to show how to work with AutoCompleteExtender (Control in AjaxControlToolKIt).

AutoCompleteExtender is an ASP.NET AJAX Control that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.

Can we get the Auto Suggestion from server in two ways
1.From Webservice
2.From Static Method

Method 1:
Create a webmethod like as follows

[WebMethod]

public string[] GetCities(string prefixText)

{

SqlConnection con = new SqlConnection("server=localhost;Database=raji;User ID=sa;Password=abc;");

con.Open();

string strQuery = "select city from tbl_cities where cit like '" + prefixText + "%'";

DataSet ds = new DataSet();

SqlDataAdapter da = new SqlDataAdapter(strQuery,con);

da.Fill(ds);

con.Close();

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

for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

{

cityList.Add(ds.Tables[0].Rows[i][0].ToString());

}

con.Close();

return cityList.ToArray();

}

Note: Don't change the string parameter name 'prefixText'

»Run the webService and test it …

Now create a website » Add TextBox » Add AutoCompleteExtender ass follows..

<asp:TextBox ID="txtCity" runat="server">asp:TextBox>

<ac:AutoCompleteExtender ID="AutoCompleteExtender1" EnableCaching="true"

BehaviorID="AutoCompleteCities" TargetControlID="txtCity"

ServiceMethod="GetCities" ServicePath="Service.asmx" MinimumPrefixLength="1" CompletionSetCount="10"

runat="server" FirstRowSelected="true" >

ac:AutoCompleteExtender>

» Add Web Reference to the application

Note: ServicePath Give your WebService File Name and ServiceMethod is Nothing but your Method name, that returns the fetched results.

Method 2:By using Static Method

Add TextBox » Add AutoCompleteExtender ass follows..

<asp:TextBox ID="txtCity" runat="server">asp:TextBox>

<ac:AutoCompleteExtender ID="AutoCompleteExtender1" EnableCaching="true"

BehaviorID="AutoCompleteCities" TargetControlID="txtCity"

ServiceMethod="GetCities" MinimumPrefixLength="1"

CompletionSetCount="10"

runat="server" FirstRowSelected="true" >

ac:AutoCompleteExtender>

» For this we need to set EnablePageMethods="true" in ScriptManger

» In .cs file create a method as follows...

[System.Web.Services.WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static string[] GetCities(string prefixText)

{

SqlConnection con = new SqlConnection("server=localhost;Database=raji;User ID=sa;Password=123;");

con.Open();

string strQuery = "select city from city where city like '" + prefixText + "%'";

DataSet ds = new DataSet();

SqlDataAdapter da = new SqlDataAdapter(strQuery,con);

da.Fill(ds);

con.Close();

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

for (int i = 0; i < ds.Tables[0].Rows.Count; i++)

{

cityList.Add(ds.Tables[0].Rows[i][0].ToString());

}

return cityList.ToArray();

}

List Of Properties For AutocompleteExtender:
• TargetControlID - The TextBox control where the user types content to be automatically completed

• ServiceMethod - The web service method to be called. The signature of this method must match the following:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count) { ... }

Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

• ServicePath - The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page method.

• MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service.

• CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.

• EnableCaching - Whether client side caching is enabled.

• CompletionSetCount - Number of suggestions to be retrieved from the web service.

• CompletionListCssClass - Css Class that will be used to style the completion list flyout.

• CompletionListItemCssClass - Css Class that will be used to style an item in the AutoComplete list flyout.

• CompletionListHighlightedItemCssClass - Css Class that will be used to style a highlighted item in the AutoComplete list flyout.

• DelimiterCharacters - Specifies one or more character(s) used to separate words. The text in the AutoComplete textbox is tokenized using these characters and the webservice completes the last token.

• FirstRowSelected - Determines if the first option in the AutoComplete list will be selected by default.

Source:asp.net/ajax

Simple jQuery Multi Tabbed Navigation Widget For Blogger

2011-01-26T13:21:00.004+05:30

So many people heard about jQuery, for me still now no chance to work on that,finally the day came and i did tabbed navigation in one of my project.While working on that i got idea to make Blogger Widget.

Still i remember,How much struggle i faced to setup Multi Tabbed Widget on my blog. But here now i am going to show in easy 3 steps.

See Demo

Step 1:Login to Blogger dashboard » layout » Edit HTML

Find(CTRL+F) ]]</b:skin>tag.

Now copy and paste below code just before ]]</b:skin> this.

/*--------TechTasks Tabber CSS-------------------------*/
.techtasksTabber
{}
.tab_container {
border: 1px solid #0080FF;/*--Set The Border Color Of Tab Container--*/
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff; /*--Set The BackGround Color Of Tab Container--*/
}
.tab_content {
padding: 10px;
font-size: 1.1em;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #0080FF;/*Bottom Border Color Of Tab Menu */
width: 100%;
}
ul.tabs li {
float: left;
margin-right:5px;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-bottom:1px solid #0080FF;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0; /*Set Background color of Tab menu*/
}
ul.tabs li a {
text-decoration: none;
color: #000; /*Set tab text Link Color*/
display: block;
font-size: 1.1em;
padding: 0 5px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;/* Set Tab Mouse over Background Color */
}
ul.tabs li.active{
background: #fff;/* Set Active Tab Background Color */
color:#0080FF;
border:1px solid #0080FF;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
ul.tabs li.active a:hover /*--Set the active tab mouse hover properties--*/
{
background: #fff; /* Set active Tab Mouse over Background Color */
}
/*----------End TechTasks Tabber CSS--------------*/

»If you want customize the Tabbed Widget colors just Follow the comments to Change the colors

»Simply replace these colors with your custom colors in the above code respectively.

Step 2:Find </head> .

Cope and paste the below just before </head> this.

<div id='techtasksTabber'>
<ul class='tabs'>
<li><a href='#tab1'>Recent</a></li>
<li><a href='#tab2'>PageViews</a></li>
<li><a href='#tab3'>Subscribe</a></li>
</ul>

<div class='tab_container'>
<div class='tab_content' id='tab1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tab_content' id='tab3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
</div>

Finally Save the Template.

Then Go to your page Elements Page and add the widgets for your tabs one by one.

Feel Free to ask any queries about this...

Maintaine Scroll Position After PostBack For Partial Page in Asp.Net(Using Div)

2011-01-15T00:08:00.002+05:30

Some times our page contains scrollable division inside the page,In last article i disused about Maintain Scroll Position After PostBack in Page Level , But it maintains scroll position for page level only not inside.

For This to achieve we need to take two hidden fields to store scroll position in between postbacks

First add the following javascript code in head section of page...

var hid1,hid2;

function SetDivPosition()

{

hid1=$get('<%=HiddenField1.ClientID %>');

hid2=$get('<%=HiddenField2.ClientID %>');

hid1.value=$get('<%=divScroll.ClientID %>').scrollLeft;

hid2.value=$get('<%=divScroll.ClientID %>').scrollTop;

}

function GetPosition()

{

hid1=$get('<%=HiddenField1.ClientID %>');

hid2=$get('<%=HiddenField2.ClientID %>');

$get('<%=divScroll.ClientID %>').scrollLeft=hid1.value;

$get('<%=divScroll.ClientID %>').scrollTop=hid2.value;

}

script>

Add function on body onload event

Add Div code as follows

Maintaine Scroll Postion After Postback In ASP.Net

2011-01-14T23:35:00.003+05:30

In this article i am going to shows how to Maintain Scroll Position After PostBack.

The MaintainScrollPositionOnPostback page property attribute allows to do that in different ways as follows...

It is must need property for long pages...

1.In page directive tag

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MaintainScrollPositionOnPostback="true" %>

2.In code behind page by setting property

Page.MaintainScrollPositionOnPostBack = true;

3.In Web.Config file

<system.web>

system.web>

Monetize Blog With Image Space Ads : Mouse Over Image Ads

2010-12-23T16:51:00.000+05:30

        So many photo bloggers are suffered with low CTR with content Ads,A new solution for this is Image Space Ads.
        I tried some Image Space Ads( IMS & GumGum & Pixazza) on my photo blog(Fun Evil) Here i am going to discus about these Image Space Ad Provides

Image Space Media:IMS

         Image Space Media matches relevant advertisements to images across their network of 7,000 publishers, serving over a quarter billion impressions per month. IMS provide publishers with additional revenue for their sites, maximizing web advertisement space without compromising content integrity.

Easy to use:Place JavaScript

ISM is keyword matching is based on metadata, ensuring all ads are targeted and relevant.

Receive monthly payments via PayPal or check.

Displays relevant ads Compare to Other.

GumGum
GumGum, by default, may serve ads on all qualifying images within your web site. Qualifying images are those that have a width and height both greater than 150 pixels.But GumGum provides image ads

Easy to use:Place JavaScript

Provides a Feature Rich Toolbar ( Zoom,Share,View More)

Receive monthly payments via PayPal.

Displays less relevant ads Compare to Other.
Pixazza
Pixazza, Inc. is changing the way consumers interact with images on the web. By enabling consumers to simply mouse over images to learn more and see related products, Pixazza has pioneered the use of images as real estate for brand advertising and ecommerce. Through its network of leading publishers, Pixazza currently serves more than 40 million unique visitors per month at a rate of 10 billion image views per year.

Easy to use:Place JavaScript

Receive monthly payments via PayPal.

Displays More relevant ads compare to other.

What If Being Programmer?

2010-12-20T10:13:00.003+05:30

Google Body Browser

2010-12-17T22:45:00.002+05:30

Google introduce another service is Google Body Browser.

Google said in an introduction, “Body Browser is a detailed 3D model of the human body”. It is a three-dimensional, multi-layered browser version of those Visible Man/Woman model kits. It lets you peel back anatomical layers, zoom in, and navigate to parts. You can also click to identify anatomy, or search for muscles, organs, bones, and more.

Link Google Body Browser

No Of Select Statements In Stored Procedure:-.NET

2010-12-17T21:00:00.006+05:30

A Stored Procedure with how no of select statements then the SP returns the That many no of tables.
In this post i am going to show how to deal with Data returned by Stored procedure in ASP.NET Application

The SP is..

create procedure MultiSelectStm
As
Begin
select * from Emp
select * from Dept
End

If you want handle with DataAdapter ..

SqlConnection con = new SqlConnection(@"server=RAJI-PC\SQLEXPRESS;Initial Catalog=raji;integrated Security=True");

SqlCommand cmd = new SqlCommand("MultiSelectStm", con);

cmd.CommandType = CommandType.StoredProcedure;

SqlDataAdapter da = new SqlDataAdapter();

da.SelectCommand = cmd;

DataSet ds=new DataSet();

con.Open();

da.Fill(ds);

con.Close();

GridView1.DataSource = ds.Tables[0];

GridView1.DataBind();

GridView2.DataSource = ds.Tables[1];

GridView2.DataBind();

If you want handle with DataReader ..

SqlConnection con = new SqlConnection(@"server=RAJI-PC\SQLEXPRESS;Initial Catalog=raji;integrated Security=True");

con.Open();

SqlCommand cmd = new SqlCommand("MultiSelectStm", con);

cmd.CommandType = CommandType.StoredProcedure;

SqlDataReader dr = cmd.ExecuteReader();

bool more = true;

while(more)

{

while (dr.Read())

{

for (int i = 0; i <dr.FieldCount;i++)

{

Response.Write(dr[i].ToString() + " ");

}

Response.Write("<br>");

}

more= dr.NextResult();//control goes to next Set of Records

}

Comments more encourages me to post more Articles..

Non Editable Rows in GridView

2010-12-17T15:59:00.007+05:30

In This example A GridView containes non editable rows,

Here We use “Bit” DataType for Editable colume in sql server

When we use “Bit” Datatype the gridview binds the colume with Check boxes automatically

Productid (int)	Productname (Varchar)	price (int)	editable (bit)
1	keyboard	500	True
2	Monitor	5000	False
3	mouse	400	False
4	HDD	3000	True

in .CS file

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

{

SqlConnection con; SqlDataAdapter da; SqlCommand cmd; DataSet ds;

protected void Page_Load(object sender, EventArgs e)

{

con = new SqlConnection("server=FOCALPOI-392A7D\\SQLEXPRESS;user id=raji;password=chekuri;database=raji");

if (IsPostBack == false)

{

getdata();

}

public void getdata()

{

da = new SqlDataAdapter("select * from product", con);

ds = new DataSet();

da.Fill(ds, "product");

GridView1.DataSource = ds;

GridView1.DataBind();

}

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

{

Label1.Text = "";

GridViewRow r = GridView1.Rows[e.NewEditIndex];

CheckBox cb = (CheckBox)r.Cells[4].Controls[0];

//if the Check box in editable colume is checked then the colume is allow to edit

//if not then it is non Editable colume

if (cb.Checked)

{

GridView1.EditIndex = e.NewEditIndex;

getdata();

}

else

{

Label1.Text = "This Is Non Editable Item";

}

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

{

GridView1.EditIndex = -1;

getdata();

}

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

{

GridView1.EditIndex = -1;

getdata();

}

Google eBooks

2010-12-14T12:01:00.001+05:30

Tech Tasks : Blogger Help,Asp.Net,C#.Net Articles

How to Bind the DropDownList With Enum

Let see How to Bind the DropDownList With Enum

Blogger New Futures Are Available @ Draft

How To Bind DropDownList Using List Collection and DataSet in Asp.Net

Binding DropDownList with List

Binding DropDownList with Dictionary

Binding DropDownList with DataSet

jQuery Toggle Button Widget For Blogger

List of jQuery Widgets for Blogger

Very Interesting Windows Magical Bugs

jQuery Accordion Widget for Blogger

Smooth Scrolling Widget For Blogger

Now See The jQuery Smooth Scrolling in Your Blog

A Great News To (Photo)Blogger Authors

Flipcard

Mosaic

Sidebar

Snapshot

Timeslide

All In One Floating Subscribe N Share Widget For Blogger (Extension)

List Of Futures

Now Configuration of Floating Share Widget

Closeable jQuery Floating Message Box For Bloggers

Now See The jQuery Message Box in Your Blog

How To Find Controls Inside MasterPage ContentPlaceHolder Of ASP.Net Page

How To Find Controls Of MastePage In Asp.Net Page

How To Find The Controls In a Page

How To Display PreFixText In Different Style Of ASP.NET AutoComplete Extender

Poor Error Handling In MSDN

AutoCompleteExtender with Progress Image

How To Use Ajax AutoCompleteExtender in Asp.Net

Simple jQuery Multi Tabbed Navigation Widget For Blogger

Recent Posts Widget With Thumblines For Photo Bloggers

Maintaine Scroll Position After PostBack For Partial Page in Asp.Net(Using Div)

Maintaine Scroll Postion After Postback In ASP.Net

Monetize Blog With Image Space Ads : Mouse Over Image Ads

What If Being Programmer?

Google Body Browser

No Of Select Statements In Stored Procedure:-.NET

Non Editable Rows in GridView

Google eBooks