Ajax autoComplete extender Full Working example.

In This Example I am going to Show how to use AutoCompleteExtender of AjaxControlToolkit in asp .net.

For this we need a textBox , and one HiddenField for Storing Selected Items Value.

<asp:TextBox ID="txtSubledger" runat="server" Visible="true" AutoPostBack="True"                                                     OnTextChanged="ddlSubLedger_textChanged"></asp:TextBox>
                                              
  <ajax:AutoCompleteExtender ID="AutoCompleteExtender4" MinimumPrefixLength="3" runat="server"
                                                    TargetControlID="txtSubledger" ServiceMethod="GetCompletionListSubledger" FirstRowSelected="True"
                                                    UseContextKey="True" DelimiterCharacters="" Enabled="True">
 </ajax:AutoCompleteExtender>

  <asp:HiddenField runat="server" ID="ddlSubLedger" />

now on code behind we need a webservice for ServiceMethod="GetCompletionListSubledger" 

 [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
    public static string[] GetCompletionListSubledger(string prefixText, int count, string contextKey)
    {
        DataTable dtAN = TblSubLedgerService.getsubldegertablebyename(prefixText);
        Dictionary<string, string> dt = new Dictionary<string, string>();
        foreach (DataRow dr in dtAN.Rows)
        {
            dt.Add(dr["SubLedgerID"].ToString(), dr["SubLedgerName"].ToString());
        }
        return (from m in dt.Values.ToArray<string>() select m).Take(count).ToArray();
    }

a text Changed event for textbox

   protected void ddlSubLedger_textChanged(object sender, EventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(txtSubledger.Text))
            SetModuleNameListforSubledger(txtSubledger.Text, 3);
        else ddlSubLedger.Value = "";
    } 
text Changed event calls SetModuleNameListforSubledger Which will basically call previous function of web service but will set hidden field in case of selection of any item.

    protected void SetModuleNameListforSubledger(string prefixText, int count)
    {
        DataTable dtAN;
        dtAN = TblSubLedgerService.getsubldegertablebyename(prefixText);
        if (dtAN == null || dtAN.Rows.Count < 1)
        {
            ddlSubLedger.Value = "";
            return;
        }
        ddlSubLedger.Value = dtAN.Rows[0]["SubledgerID"].ToString();
    }
Here, TblSubLedgerService.getsubldegertablebyename(prefixText) is in Service class and will fetch data from the database with filter.

         public static DataTable getsubldegertablebyename(string subledger)
        {
            const string query = "select top(20) SubLedgerID,code+' '+SubLedgerName as SubLedgerName from tbl_SubLedger where  code+' '+SubLedgerName like @Subledger";
            var tbl = DAO.GetDataTable(query, args => args.Add("@Subledger", string.Concat("%", (string.Concat(subledger, "%")))));
            return tbl;
        }

 Now, we can get selected data from autocomplete in hidden field.

career as asp .net developer and challenges.

Every career has its challenges and upportunities, same is with asp .net developers. Their is always new task to accomplish and their challanges are uncertain.
Not every ideas gets accomplished as there is always client delivery pressure and deadlines to meet.
Projects are bigger and complex. Knowledge required are many to sustain in the field. Few most important are jquery, css, html, xml, json, sql, mvc, c#, webservices, javascript. Mastering all is other challenging part of the career nut yet we need to go through all of this. So that any of these can be used when needed and is needed most of the time.
Major tasks as developer in asp .net includes mis development for many domains.
Majority of industry are dependent on information and mis is the most for all to compete. These infomation system are now vastly migrating to web technologies and asp is one of the top choises of the development because of its vast library and support.
Real time systems is also possible now due to signalr with the release of .net frame work 4.5 and hence have increasing the scope of the technology.
This trend of enhancement in .net technology in every now and then also have made the market of asp .net development more preferable.
But any break in development career may that be of few months can make you get going from the industry as practice and knowledge required to be continuous in this industry to sustain the competition. Be that be in full time job or in freelancing. Although freelancing has not as much upportunities as it provides for php developers.
Problem solving skill and on site solution finding is another challenge for developera as there may be bug even after delivery and also after all the testings. On site solution provided may be temporary for the system to run instantly but you need to find a permanent solution for such problems or bugs and deliver them to customer as their working and business depends on this.

Javascript and jQuery Best Practices

When used correctly, jQuery can help you make your website more interactive, interesting and exciting. This article will share some best practices and examples for using the popular Javascript framework to create unobtrusive, accessible DOM scripting effects. The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a good choice of a framework to implement best practices.

1. Why jQuery?

jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are (almost) infinite.

Javascript and Best Practices

Javascript has long been the subject of many heated debates about whether it is possible to use it while still adhering to best practices regarding accessibility and standards compliance.
The answer to this question is still unresolved, however, the emergence of Javascript frameworks like jQuery has provided the necessary tools to create beautiful websites without having to worry (as much) about accessibility issues.
Obviously there are cases where a Javascript solution is not the best option. The rule of thumb here is: use DOM scripting to enhance functionality, not create it.

Unobtrusive DOM Scripting

While the term “DOM scripting” really just refers to the use of scripts (in this case, Javascripts) to access the Document Object Model, it has widely become accepted as a way of describing what should really be called “unobtrusive DOM scripting”—basically, the art of adding Javascript to your page in such a way that if there were NO Javascript, the page would still work (or at least degrade gracefully). In the website world, our DOM scripting is done using Javascript.

The Bottom Line: Accessible, Degradable Content

The aim of any web producer, designer or developer is to create content that is accessible to the widest range of audience. However, this has to be carefully balanced with design, interactivity and beauty. Using the theories set out in this article, designers, developers and web producers will have the knowledge and understanding to use jQuery for DOM scripting in an accessible and degradable way; maintaining content that is beautiful, functional AND accessible.

2. Unobtrusive DOM Scripting?

In an ideal world, websites would have dynamic functionality AND effects that degrade well. What does this mean? It would mean finding a way to include, say, a snazzy Javascript Web 2.0 animated sliding news ticker widget in a web page, while still ensuring that it fails gracefully if a visitor’s browser can’t (or won’t) run Javascripts.
The theory behind this technique is quite simple: the ultimate aim is to use Javascript for non-invasive, “behavioural” elements of the page. Javascript is used to add or enhance interactivity and effects. The primary rules for DOM scripting follow.

Rule #1: Separate Javascript Functionality

Separate Javascript functionality into a “behavioural layer,” so that it is separate from and independent of (X)HTML and CSS. (X)HTML is the markup, CSS the presentation and Javascript the behavioural layer. This means storing ALL Javascript code in external script files and building pages that do not rely on Javascript to be usable.
For a demonstration, check out the following code snippets:

Bad markup:

Never include Javascript events as inline attributes. This practice should be completely wiped from your mind.

<a onclick="doSomething()" href="#">Click!</a>

Good markup:

All Javascript behaviours should be included in external script files and linked to the document with a <script> tag in the head of the page. So, the anchor tag would appear like this:

<a href="backuplink.html" class="doSomething">Click!</a>

And the Javascript inside the myscript.js file would contain something like this:

...

$('a.doSomething').click(function(){
 // Do something here!
 alert('You did something, woo hoo!');
});
...

The .click() method in jQuery allows us to easily attach a click event to the result(s) of our selector. So the code will select all of the <a> tags of class “doSomething” and attach a click event that will call the function. In practice, this
In Rule #2 there is a further demonstration of how a similar end can be achieved without inline Javascript code.

Rule #2: NEVER Depend on Javascript

To be truly unobtrusive, a developer should never rely on Javascript support to deliver content or information. It’s fine to use Javascript to enhance the information, make it prettier, or more interactive—but never assume the user’s browser will have Javascript enabled. This rule of thumb can in fact be applied to any third-party technology, such as Flash or Java. If it’s not built into every web browser (and always enabled), then be sure that the page is still completely accessible and usable without it.

Bad markup:

The following snippet shows Javascript that might be used to display a “Good morning” (or “afternoon”) message on a site, depending on the time of day. (Obviously this is a rudimentary example and would in fact probably be achieved in some server-side scripting language).

<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
 document.write('Good Morning!');
else
 document.write('Good Afternoon!');
</script>

This inline script is bad because if the target browser has Javascript disabled, NOTHING will be rendered, leaving a gap in the page. This is NOT graceful degradation. The non-Javascript user is missing out on our welcome message.

Good markup:

A semantically correct and accessible way to implement this would require much simpler and more readable (X)HTML, like:

<p title="Good Day Message">Good Morning!</p>

By including the “title” attribute, this paragraph can be selected in jQuery using a selector (selectors are explained later in this article) like the one in the following Javascript snippet:

var now = new Date();
if(now.getHours() >= 12)
{
 var goodDay = $('p[title="Good Day Message"]');
 goodDay.text('Good Afternoon!');
}

The beauty here is that all the Javascript lives in an external script file and the page is rendered as standard (X)HTML, which means that if the Javascript isn’t run, the page is still 100% semantically pure (X)HTML—no Javascript cruft. The only problem would be that in the afternoon, the page would still say “Good morning.” However, this can be seen as an acceptable degradation.

Rule #3: Semantic and Accessible Markup Comes First

It is very important that the (X)HTML markup is semantically structured. (While it is outside the scope of this article to explain why, see the links below for further reading on semantic markup.) The general rule here is that if the page’s markup is semantically structured, it should follow that it is also accessible to a wide range of devices. This is not always true, though, but it is a good rule of thumb to get one started.
Semantic markup is important to unobtrusive DOM scripting because it shapes the path the developer will take to create the DOM scripted effect. The FIRST step in building any jQuery-enhanced widget into a page is to write the markup and make sure that the markup is semantic. Once this is achieved, the developer can then use jQuery to interact with the semantically correct markup (leaving an (X)HTML document that is clean and readable, and separating the behavioural layer).

Terrible markup:

The following snippet shows a typical list of items and descriptions in a typical (and terribly UNsemantic) way.

<table>
    <tr>
        <td onclick="doSomething();">First Option</td>
        <td>First option description</td>
    </tr>
    <tr>
        <td onclick="doSomething();">Second Option</td>
        <td>Second option description</td>
    </tr>
</table>

Bad markup:

The following snippet shows a typical list of items and descriptions in a more semantic way. However, the inline Javascript is far from perfect.

<dl>
    <dt onclick="doSomething();">First Option</dt>
    <dd>First option description</dd>
    <dt onclick="doSomething();">Second Option</dt>
    <dd>Second option description</dd>
</dl>

Good markup:

This snippet shows how the above list should be marked up. Any interaction with Javascript would be attached at DOM load using jQuery, effectively removing all behavioural markup from the rendered (X)HTML.

<dl id="OptionList">
    <dt>First Option</dt>
    <dd>First option description</dd>
    <dt>Second Option</dt>
    <dd>Second option description</dd>
</dl>

The <id> of “OptionList” will enable us to target this particular definition list in jQuery using a selector—more on this later.

3. Understanding jQuery for Unobtrusive DOM Scripting

This section will explore three priceless tips and tricks for using jQuery to implement best practices and accessible effects.

Understanding Selectors: the Backbone of jQuery

The first step to unobtrusive DOM scripting (at least in jQuery and Prototype) is using selectors. Selectors can (amazingly) select an element out of the DOM tree so that it can be manipulated in some way.

If you’re familiar with CSS then you’ll understand selectors in jQuery; they’re almost the same thing and use almost the same syntax. jQuery provides a special utility function to select elements. It is called $.

A set of very simple examples of jQuery selectors:

$(document); // Activate jQuery for object
$('#mydiv')  // Element with ID "mydiv"
$('p.first') // P tags with class first.
$('p[title="Hello"]') // P tags with title "Hello"
$('p[title^="H"]') // P tags title starting with H

So, as the Javascript comments suggest:

1. $(document);
   The first option will apply the jQuery library methods to a DOM object (in this case, the document object).
2. $(‘#mydiv’)
   The second option will select every <div> that has the <id> attribute set to “mydiv”.
3. $(‘p.first’)
   The third option will select all of the <p> tags with the class of “first”.
4. $(‘p[title="Hello"]‘)
   This option will select from the page all <p> tags that have a title of “Hello”. Techniques like this enable the use of much more semantically correct (X)HTML markup, while still facilitating the DOM scripting required to create complex interactions.
5. $(‘p[title^="H"]‘)
   This enables the selection of all of the <p> tags on the page that have a title that starts with the letter H.

These examples barely scratch the surface.

Almost anything you can do in CSS3 will work in jQuery, plus many more complicated selectors. The complete list of selectors is well documented on the jQuery Selectors documentation page. If you’re feeling super-geeky, you could also read the CSS3 selector specification from the W3C.

Get ready.
$(document).ready()

Traditionally Javascript events were attached to a document using an “onload” attribute in the <body> tag of the page. Forget this practice. Wipe it from your mind.
jQuery provides us with a special utility on the document object, called “ready”, allowing us to execute code ONLY after the DOM has completely finished loading. This is the key to unobtrusive DOM scripting, as it allows us to completely separate our Javascript code from our markup. Using $(document).ready(), we can queue up a series of events and have them execute after the DOM is initialized.
This means that we can create entire effects for our pages without changing the markup for the elements in question.

Hello World! Why $(document).ready() is SO cool

To demonstrate the beauty of this functionality, let’s recreate the standard introduction to Javascript: a “Hello World” alert box.
The following markup shows how we might have run a “Hello World” alert without jQuery:

Bad markup:

<script language="javascript">
alert('Hello World');
</script>

Good markup:

Using this functionality in jQuery is simple. The following code snippet demonstrates how we might call the age-old “Hello World” alert box after our document has loaded. The true beauty of this markup is that it lives in an external Javascript file. There is NO impact on the (X)HTML page.

$(document).ready(function()
{
 alert('Hello World');
});

How it works

The $(document).ready() function takes a function as its argument. (In this case, an anonymous function is created inline—a technique that is used throughout the jQuery documentation.) The function passed to $(document).ready() is called after the DOM has finished loading and executes the code inside the function, in this case, calling the alert.

Dynamic CSS Rule Creation

One problem with many DOM scripting effects is that they often require us to hide elements of the document from view. This hiding is usually achieved through CSS. However, this is less than desirable. If a user’s browser does not support Javascript (or has Javascript disabled), yet does support CSS, then the elements that we hide in CSS will never be visible, since our Javascript interactions will not have run.
The solution to this comes in the form of a plugin for jQuery called cssRule, which allows us to use Javascript to easily add CSS rules to the style sheet of the document. This means we can hide elements of the page using CSS—however the CSS is ONLY executed IF Javascript is running.

Bad markup:

HTML:
<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>

CSS:
p.hide-me-first
{
 display: none;
}

Assuming that a paragraph with the class of “hide-me-first” is going to first be hidden by CSS and then be displayed by a Javascript after some future user interaction, if the Javascript never runs the content will never be visible.

Good markup:

HTML:
<h2>This is a heading</h2>
<p class="hide-me-first">
This is some information about the heading.
</p>

jQuery Javascript:
$(document).ready(function{
 jQuery.cssRule("p.hide-me-first", "display", "none");
});

Using a $(document).ready() Javascript here to hide the paragraph element means that if Javascript is disabled, the paragraphs won’t ever be hidden—so the content is still accessible. This is the key reason for runtime, Javascript-based, dynamic CSS rule creation.

4. Conclusion

jQuery is an extremely powerful library that provides all the tools necessary to create beautiful interactions and animations in web pages, while empowering the developer to do so in an accessible and degradable manner.
This article has covered:

1. Why unobtrusive DOM scripting is so important for accessibility,
2. Why jQuery is the natural choice to implement unobtrusive DOM scripting effects,
3. How jQuery selectors work,
4. How to implement unobtrusive CSS rules in jQuery.

5. Further Reading

Further Reading: jQuery and JavaScript Practices

1. jQuery Web Site: How jQuery Works and Tutorials
   John Resig + Other Contributors
   One of jQuery’s true strengths is the documentation provided by John Resig and his team.
2. 51 Best jQuery Tutorials and Examples
3. Easy As Pie: Unobtrusive JavaScript
4. Seven Rules of Unobtrusive JavaScript
5. Learning jQuery
6. Visual jQuery
7. jQuery Tutorials For Designers
8. jQuery For Designers
   jQuery for Designers: learn how easy it is to apply web interaction using jQuery.
9. 15 Days Of jQuery
   jQuery tutorials and example code that takes you from zero to hero in no time flat.
10. 15 Resources To Get You Started With jQuery From Scratch
11. The Seven Rules Of Pragmatic Progressive Enhancement
12. The Behaviour Layer Slides
    Jeremy Keith
    Great slide notes giving a quick rundown on unobtrusive Javascripting.
13. A List Apart: Behavioral Separation
    Jeremy Keith
    A more in-depth explanation of the idea of separating Javascript into an unobtrusive “behavioural” layer.
14. Unobtrusive JavaScript with jQuery
    Simon Willison
    A great set of slides about using jQuery unobtrusively. Also, finishes with a wonderful summary of jQuery methods and usage.

Further Reading: Semantic Markup

1. Wikipedia: Definition of Semantics
   It’s worth understanding the idea of semantics in general prior to trying to wrap one’s head around the concept of semantic markup.
2. Who cares about semantic markup?
   Dave Shea
   Dave Shea explores the benefits of semantic markup and
3. Standards don’t necessarily have anything to do with being semantically correct
   Jason Kottke
   Kottke discusses the differences between standards compliance and semantic markup.
4. CSS3 selector specification
   W3C
   The complete specification for CSS3 selectors (most of which work perfectly in jQuery selectors also). This is great reading for anyone who likes to keep up to date with best practices and standards compliance.

Source: http://coding.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

Javascript and jQueary analysis

jQuery is JavaScript. It is a JavaScript library, so it operates on top of JavaScript. It cannot exist on its own, so you can't use one over the other. You can use just JavaScript or JavaScript and jQuery.

jQuery is designed to make many JavaScript development tasks much easier.

Use jQuery when it will significantly reduce your development time, and you can afford the extra overhead of downloading the library.

A lot of people automatically include jQuery without considering the fact that it might not make the particular development task at hand much easier. This is a bad habit to get into...

Personally my most common uses are:

1.     Complex element selection
2.     Animation
3.     Event handling   

the difference between JQuery vs JScript.

JavaScript is a scripting language for the web. Microsoft refers to their implementation of it as "JScript" but in terms of syntax it's pretty much the same.

jQuery is a software library, written in JavaScript, whose intention is to help JavaScript developers when writing code that is to be run in a web page.

    How we decide what to use and when to use those two technology.

JavaScript (including jQuery) can be used to add interactivity to a web page beyond that which is possible merely with HTML and CSS. This allows for a more "application-like" experience for the user. Many see it as a bad idea to make a web page which depends on JavaScript, and won't run without it, and insist that JavaScript should only enhance the user experience. However, websites which won't work without JavaScript do exist and are becoming more common.

jQuery runs in JavaScript, and is written in JavaScript. If you are writing JavaScript for a web page, it is often a good idea to also use a library (or framework) like jQuery to make the task of browser-compatibility that much easier. It is like a pre-packaged set of JavaScript routines that you may have otherwise needed to write yourself, packaged in an easy-to-use way.

A drawback of using jQuery is that it is a relatively large file size, which does matter on the web. Some would argue that if you are not using enough of jQuery to justify its file size on your site, you should consider something else (such as a more modular framework, or not using a library/framework at all).

here are some of the major Benifits of jQuery :

1.     crossbrowser support
2.     easy element selection
3.     customizable plugins
4.     large support community
5.     very popular

Some would argue that it is large, which could affect your web performance... and they would be right. However, because of its popularity, it is likely to have already been used on some site you've visited before. Most browsers these days are good about caching scripts/images, so that download hit is reduced over time.

On the other hand, many new programmers that rely on the framework become very dependent on it, so much so that they lose their ability to evaluate the best tool for the job, and use the most familiar tool that they're used to. These same programmers lose their ability to properly debug and become reliant on an API that has no standard.

What I like using it for is it's cross browser support, which is great for event handling; and whenever you apply dynamic styling to elements on the page (or really anything that requires you needing a more advanced set of elements). Element selection is it's #1 tool, where you can select elements by id, type, attribute, classname, tagname, hierarchical relationship,... all sorts of ways.

Benefits of Javascript - 

it's impossible to use jQuery only, all jQuery does is add a $ object to your global scope, with a bunch of methods in it. Even more manipulative libraries like prototype aren't an alternative to javascript, they're a toolbelt to solve common problems.

The main advantages to adding jQuery to your toolbelt would be:

    browser compatibility - doing something like .attr() is much easier than the native alternatives, and won't break across browsers.
    simplification of usually complicated operations - if you'd like to see a well written cross browser compatible version of an XHR method, take a look at the source for $.ajax - for this method alone it's almost worth the overhead of jQ.
    DOM selection - simple things like binding events & selecting DOM elements can be complicated and differ per-browser. Without a lot of knowledge, they can also be easily written poorly and slow down your page.
    Access to future features - things like .indexOf and .bind are native javascript, but not yet supported by many browsers. However, using the jQuery versions of these methods will allow you to support them cross browser.

Javascript is no longer just a client side language, and because jQuery is so DOM dependent, it is a terrible candidate to move to the server. I highly recommend putting some time into understanding why you are using jQuery (asking this question is a great first step!), and evaluating when it is necessary.

 jQuery can be dangerous, a few of the main dangers are:

    code quality - jQuery has a huge community and a low learning curve. This is a perfect storm for lots of poorly written open source plugins.
    inefficiency - jQuery is easy to write inefficiently. For instance, using jQuery's each instead of for loops is unnecessary and could have a performance impact in some cases. Lots of good info about this stuff at JSPerf
    bloat - jQuery is a huge library. Much of the time, you'll use a small subset of it's features, and grab the whole library. There are some great alternatives that will give you subsets of the features, like zepto.js, and underscore.js - depending on your situation, you can save some bytes by choosing the right library for your needs.

Ultimately, jQuery is an incredibly useful and helpful library, when used properly. However, it is not an alternative to javascript. It is a library, just like zepto.js, YUI, Dojo, MooTools, and Prototype - one of which may be a much better choice for your current project.

Javascript is a misunderstood language, and is only recently being regarded as something more than a scripting language by most people.

I really recommend reading up on it more, here's a few good places to start:

    Ben Alman's blog - lots of good best practices here. I don't agree with all of the, but I learn new things from his blog all the time.
    Code Academy - basic javascript training. No jQuery here. Sometimes going back to basics helps.
    Javascript Garden - a post regarding the more tricky or misunderstood features of javascript. Please read this from time to time, until everything makes sense.
    Bocoup - these are training classes. If you're near one, go to it. Many of the best JS speakers and teachers teach these.
    Paul Irish's blog - not strictly JS, but plenty of best practices are written about here. Him and Ben's twitter feeds are both great to follow.

PostBack Full Page Using Control in Update Panel.

If you've ever used an AJAX UpdatePanel and needed to have a control within the UpdatePanel cause a full postback of the page, here's how you do it.

ScriptManager scriptManager = ScriptManager.GetCurrent(Page);

if (scriptManager != null)

{

    scriptManager.RegisterPostBackControl(SaveButton);

}