Display "Loading" And Disable a button after click event [.AJAX]
Have you wondered how to prevent a user from clicking a button more than once in case you are inserting data into the database!! Well below is an implementation
first, what you need to do is to insert an UpdatePanel control Containing a button and a gridview. On button_click server side event copy the below code which will fetch some data from the database to be inserted into the gridview.
string connectionString = "Data Source=(local);Initial Catalog=Northwind;Integrated Security=SSPI";
SqlConnection con = new SqlConnection(connectionString);
con.Open();
SqlDataAdapter da = new SqlDataAdapter("Select * from customers", con);
DataSet ds = new DataSet();
da.Fill(ds);
System.Threading.Thread.Sleep(9000);
GridView1.DataSource = ds;
GridView1.DataBind();
Page.DataBind();
Do not forget to import System.Data.SqlClient namespace
let's remember the client side page life cycle
1- Initialize Request
2- Begin Request
3- Page Loading
4- Page Loaded
5- End Request
We will handle the below two events to achieve our goal
1- beginRequest
2- endRequest
add the below code under the <asp:ScriptManager/> control
<script language="javascript">
// Get the PageRequestManager instance
var pageRequest = Sys.WebForms.PageRequestManager.getInstance();
// Add the beginRequest Event
pageRequest.add_beginRequest(beginRequest);
// Add the endRequest Event
pageRequest.add_endRequest(endRequest)
// Handle the Begin event
function beginRequest(sender, eventArgs)
{
// Get the button
var Button1 = $get('<%=Button1.ClientID %>')
// Set its text to Loading
Button1.value = 'Loading';
// Disable the Button
Button1.disabled = true
}
function endRequest(sender, eventArgs)
{
// Get the Button
var Button1 = $get('<%=Button1.ClientID %>')
// Enable it
Button1.disabled = false;
}
</script>
Hope this Helps