Use of JavaScript in ASP .NET over AutoPostBack

This article is about using JavaScript in ASP .NET Web-form. Generally every ASP .NET Developer come across situation where they want to alter the value of OR change property (e.g CssClass) OR enable/disable one web control depending upon one or more other web controls value.The solution for this type of situation is AutoPostBack property of web controls, AutoPostBack is very useful and widely used property. AutoPostBack posts the page to server based on the event of the web controls. When AutoPostBack property is set to true,it will send the request to the server when the event of web controls triggers. AutoPostBack actually calls JavaScript method which send request to the server,you can see some HTML code injected by ASP .NET when page is sent to the client. It is recommended to use AutoPostBack where database or some server side resource is needed for that operation. But for the operations such as mathematical calculation, enable/disable control or many other operations where interaction with server is not necessary I will recommend JavaScript. JavaScript is Programming language of HTML. JavaScript runs on client side, Generally your browser. And the reason I recommend this over AutoPostBack for simple operations is that AutoPostBack sends data to server and you can see loading circle at top left of the browser tab. Most of the user hate it, they don't want to wait for the server response when they are in middle of filling forms. I personally hate it when I'm in middle of filling of form and after drop-down selection suddenly that boring loader on top left starts loading, it's so frustrating. So I recommend Web Developers to :

Minimize the number of Server trips as much as possible

To achieve this we can use JavaScript. Now lets see one example so you will understand how JavaScript can be used in ASP .NET. Consider a situation where we need to add 2 numbers from separate ASP:TextBox control and show the result in 3rd ASP:TextBox.

        <asp:TextBox id="txtNo1" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="txtNo2" runat="server"></asp:TextBox>
        <br />
        <asp:TextBox ID="txtResult" runat="server"></asp:TextBox>    

Obviously this can be achieved by setting AutoPostBack to true and writing server code in txtNo2_textChanging function. But Imagine, after each number entered in txtNo2 the page is posted back to server, and that too just for simple Mathematical calculation.

Now to calculate and set addition value to txtResult without posting back to server using Pure JavaScript. Remember: Web Controls ID mostly differ than the id of the HTML element created of that Web Control. So we must use ID of HTML element in JavaScript, ClientID gives the id of the HTML Element of web control. JavaScript Code is:

document.getElementById("<%= txtNo2.ClientID %>").onkeyup = 
function () 
{
var firstNo
     =document.getElementById("<%= txtNo1.ClientID%>").value;
var secondNo
    =document.getElementById("<%= txtNo2.ClientID%>").value;
document.getElementById("<%= txtResult.ClientID %>").value
 = parseFloat(firstNo) + parseFloat(secondNo);

};

I recommend to use Jquery Framework, which is based on "Write Less, Do more" principle. It simplifies the JavaScript. Above Code in JQuery can be written as:

$("#<%= txtNo2.ClientID %>").on('keyup',function () {

  var firstNo = $("#<%= txtNo1.ClientID%>").val();
  var secondNo = $("#<%= txtNo2.ClientID%>").val();
  $("#<%= txtResult.ClientID %>").val(parseFloat(firstNo) + parseFloat(secondNo));

});

I Hope you now understand why & how to use JavaScript or JQuery in ASP .NET?

If you have any question's comment below.