Calling Server-Side Code from Client-side Using JavaScript and TextBox's onblur Event

• Download source - 4.7 KB

Introduction

This tip/trick will call a server-side code from client-side using JavaScript whenever textbox's onblur event occurs.

Background

In ASP.NET, we have used TextBox's AutoPostBack Property set to True to call server side code written for TextChanged event. Whenever TextBox's value is changed, the server side code is called.

This tip will call server-side code on TextBox's onblur event whose AutoPostBack Property is set to False.

Using the Code

The code is divided into three parts:

1. Server-Side code
2. Client-Side JavaScript code
3. HTML part

First, we will look at server-side code as given below:

//C# code

protected void Page_Load(object sender, EventArgs e)
{
    string parameter = Request["__EVENTARGUMENT"];
    if (parameter == "")
        Changed();
}
private void Changed()
{
    TextBox2.Text = (Convert.ToInt32(TextBox2.Text)+1).ToString();
}

The second part of the code is JavaScript code block:

 <script type="text/javascript">
     function CallServerSide(controlid) {
         setTimeout(__doPostBack(controlid, ''), 0); 
     }
 </script>

The third part of the code is HTML Content:

 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />
 <asp:UpdatePanel  ID="UpdatePanel2"  runat="server">
     <ContentTemplate>
         <div>
             <asp:TextBox ID="TextBox1" runat="server" 
             onblur="CallServerSide(this.id);"></asp:TextBox>
             <asp:TextBox ID="TextBox2" runat="server" 
             Text="1"></asp:TextBox>
         </div>
     </ContentTemplate>
  </asp:UpdatePanel>
  </form>