JQuery with ASP.NET

In the past few days, I was working in development some components using JQuery. I was really impressed with the functionalities and performance as I am really a big fan of javascript.

You can take a look on JQuery and download the library from: http://jquery.com/.

Now, I’m going to give a sample about how to use JQuery ASP.NET to have an AJAX page.

1.Download the library from http://jquery.com/.

2.Create New ASP.Net web application using Microsoft Visual Studio.

3.Add new User Control in your project.

4.Add the downloaded file of JQuery to your project.

5. drag and drop the JQuery .js file into your control or just add the following line to your ascx:

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

Now we are going to start the most interesting part.

Consider a case that you want to have an expand/collapse button, when user clicks on it, it shows a form to let the user enter a data, if it is already expanded, then collapse it. Also you need to expand or collapse with animation (slide the form that will appear), that is, not just appears suddenly to the user.

Consider the following:

   1: <div>

   2:         <div>

   3:             <!--The button to expand or collapse-->

   4:             <a href="javascript:;" onclick="ExpandCollapse(this,'expandcpllapse')">+</a> Show

   5:             Panel

   6:         </div>

   7:         <!--The div that needs to be shown or hidden based on expand or collapse-->

   8:         <div id="expandcpllapse" style="display: none">

   9:             <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>

  10:             <asp:TextBox ID="txtName" runat="server"></asp:TextBox>

  11:         </div>

  12:     </div>

and the javascript to expand/collapse

   1: //Represents the current status of the panel to expand/collapse

   2: var status = 'Collapsed';

   3:  

   4: //Expand the form if collapsed. if collapsed, expand it.

   5: function ExpandCollapse(sender, div)

   6: {

   7:     switch (status)

   8:     {

   9:         case 'Collapsed':

  10:             {

  11:                 //Show the div that contains the data. the parameter "0" represents the speed to show it

  12:                 $('#' + div).show("0");

  13:                 //Change the text from "+" to "-"

  14:                 $(sender)[0].innerText = '-';

  15:                 //Change the status to be expanded

  16:                 status = 'Expanded';

  17:             }

  18:             break;

  19:         case 'Expanded':

  20:             {

  21:                 //Hide the div with speed "0"

  22:                 $('#' + div).hide("0");

  23:                 // change the text from "-" to "+"

  24:                 $(sender)[0].innerText = '+';

  25:                 //Change the status to collapsed

  26:                 status = 'Collapsed';

  27:             }

  28:             break;

  29:     }

  30: }

that was a very little from JQuery functionalities and how to use it to reach a better user experience.