aspx Tutorial

.NET Articles,jQuery demo, asp.net with jQuery, online tutorial,Jquery, SilverLight, Javascript, asp.net,JSON, MVC,.NET Articles,demo, Web Services, .NET articles, Sharepoint 2010, visual studio 2010,Aamir Hasan,IT, Building Your First Web Application Project
Advertise Here

Toolbar

Get our toolbar!

Advertize



Posted by Aamir Hasan   on Tuesday, July 13, 2010 Total Views:  
In this Article, I will demonstrate how to Disable/Enable button in asp.net use jQuery. To avoid multiple clicks on submit button, we simply disable the submit button during the process.
You can download jQuery current version from jQuery Site.
Let's start.

Step 1:

I have created a ASP.NET website. You can create a page in your existing web site.

Step 2:

Download jQuery current version from jQuery Site. You can also load jQuery online Reference from Microsoft or Google CDNs as links given below.

  1. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
  2. http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js

 

Create a Reference in the <Head> section of your Page as shown below.

<headid="Head1"runat="server">
   <title>Disable/Enable Button using jQuery</title>
   <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</Head>

Step 3:

Now under the <Body> Section add Texbox, Buttton and Label as shown below.

       <div>
       Name:<asp:TextBoxID="TextBox1"runat="server"Text="Aamir Hasan"></asp:TextBox>
       <inputtype="button"id="Button1"value="Submit"/>
       <divid="result">&nbsp;</div>
    </div>

Step 4:

Add the following script to Disable button while fetching data from server and Enable after data is fetched as shown below.

<scriptlanguage="javascript">
   $(function () {
       $('#Button1').click(getCars);
   });
   function getCars() {
       $('#Button1').attr("disabled", "true");
       $.ajax({
           type: "POST",
           url: "Default.aspx/getResult",
           data: "{result:'" + $("#TextBox1").val() + "'}",
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (response) {
               $('#Button1').removeAttr('disabled');
               $('#result').empty();
               $('#result').text(response.d);
           },
           failure: function (msg) {
               $('#result').text(msg);
               $('#Button1').removeAttr('disabled');
           }
       });
   }
</script>

Step 5:

Write a Method which will return a string from server side to client side as given below.

   [WebMethod]
   publicstaticstring getResult(string result)
   {
       return"Hello! " + result;
   }

You have noticed that method has been decorated with [WebMethod] attribute to allow from client side script. This will allow you return JSON data. Build the website and Run it, Click on Submit button. Button will be disable while fetching data from server side as shown below.

Step 6:

Output screen is shown below.

You can download source code from Here. Online Demo

Category: All | asp.net | jQuery | JSON
Protected by Copyscape Online Plagiarism Tool

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Advertizement 1
Advertizement 2
Advertizement 3
Advertizement 4
Advertizement 5