ASP.NET - JQuery

To write JQuery in traditional asp.net with in VS what are the pre requisites has to be installed? any plug in kind of the thing has to be installed?

开发者_开发百科Expecting yours help.

Thanks Ka

Nothing special is required - just include the Jquery scripts. These days the recommended way is to link to a CDN like Google or Amazon this gives you more info:

http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery

This may help if you're new to JQuery (interactive demos): http://visualjquery.com/

With ASP.Net the key thing to remember is that as the framework writes client-side IDs automatically, you'll mostly be accessing your controls by their type and css classname rather than by ID. You can use multiple css classnames to allow you to find/filter your HTML controls.

Good luck.

Just include the jquery.js file in your page.

To add to what's already been noted, here are a couple hints and gotchas to watch out for.

1) Visual Studio 2008 and 2010 support intellisense support for jQuery using vsdoc files. For 2008 you need SP1 or a patch. Either way, if you include a vsdoc file for a script in the same folder as your include, you will have design support, e.g. if you are using jquery-1.4.2.js then also include jquery-1.4.2-vsdoc.js in the same folder. The vsdoc files often lag behind the current version of jquery, but you can just rename the previous version which will mostly work too.

2) An asp.net 3.5 or lower you'll need to use ClientID to reference DOM id tags. Better alternatives are available in 4.0 (see previous answer). In a markup file, just use <%=MyControl.ClientID %>. Sometimes you may find it's convenient to set up some references in advance:

<script type="text/javascript">
$(document).ready(function() {
  var $modalPanel = $('#<%=modalPanel.ClientID %>');
  var $myLink = $('#<%=somethingElse.ClientID %>');
  ...
  // now you can write clean looking jquery code
  $myLink.click(function(e) {
    ..
  }
}
</script>

3) Mixing jQuery and UpdatePanels together is possible but understand that there can be conflicts. e.g. using jQuery to add events to asp.net-generated objects (as above with myLink) does not always work, because asp.net also adds client event code. Though conventional jQuery wisdom is it's best practice to add events with jQuery, with asp.net a lot of times you're better off adding them in codebehind so that they play correctly with the stuff asp.net adds itself. So instead of the above snippet to add a click handler, in codebehind you would do:

somethingElse.Attributes.Add("click","myLinkClickFunction()");

and in script:

function myLinkClickFunction()
{
  $modalPanel.dialog();
}

4) In asp.net there's always just one form with id "aspnetForm" that everything which talks to the server should live inside. Sometimes jquery things (like modal dialogs) need to know about this.

5) When you get into using ajax, jquery can talk to asp.net just fine, but the way most people do it with jQuery doesn't quite work for asp.net. There's probably a lot to say about the nuances, but generally speaking, get the jquery-json plugin and build ajax queries like this:

var ajaxData = { parm1: 'value1',
    parm: 'value2'
};
// you will probably use other options too (success, error, asycn) 
$.ajax({
            url: "/my/webservice.asmx/MyMethodName",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: $.toJSON(ajaxData),
        });

The key here is you need to serialize the jQuery object to a string. This seems to not be the case for php (and in most examples) so it can be confusing until you figure it out.

Have fun!