Post
Ask Question

Explicit Post Back to Server Using JavaScript

Introduction

 
This article is intended for those with a basic understanding of ASP.Net Server Controls and JavaScript.
 
The agenda is simple; we will learn:
  1. How to do an explicit post-back using JavaScript.
  2. Handle those events on the server-side.
  3. Pass data to the server.
  4. Convert a JSON-formatted string to an object of the specified type.
To fulfill the requirements a "_doPostBack ()" function is used to make the server-side event call. For example, if you want to raise the button (server-side control) click event from the JavaScript then the _doPostBack () function can be used.
 
Let's go through with one simple and short example to see how this happens.
 
Default.aspx
  1. <%@ Page Language="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation ="false" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7.     <script src="jquery-1.3.2.min.js" type="text/javascript"></script>  
  8.     <script src="MyJsFile.js" type="text/javascript"></script>  
  9.   
  10.     <style type ="text/css">  
  11.         .ButtonStyle  
  12.         {  
  13.        width:15em;  
  14.        height:2em;  
  15.         }  
  16.     </style>  
  17. </head>  
  18. <body>  
  19.   
  20.     <form id="form1" runat="server">  
  21.    <asp:ScriptManager ID ="ScriptManager1" runat ="server"></asp:ScriptManager>  
  22.     <div>  
  23. <button type ="button" id ="BtnClientSideButton"  class ="ButtonStyle" onclick ="funCallServerControl()">Call Server Control</button>  
  24.   
  25. <asp:Button ID ="BtnServerControl" runat ="server" style ="display:none;" />  
  26.    <asp:Label runat ="server" ID ="Lable1" Text ="" ForeColor="Green"        Visible="false"></asp:Label>  
  27.     </div>  
  28.     </form>  
  29. </body>  
  30. </html> 
Default.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Script.Serialization;  
  8. public partial class _Default : System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.   
  13.     }  
  14.     protected void BtnServerControl_Click(object sender, EventArgs e)  
  15.     {  
  16.         JavaScriptSerializer ObjLocSerializer = new JavaScriptSerializer();  
  17.          
  18.         List<ClsStorageBO> ObjLocDataStorageBO =    ObjLocSerializer.Deserialize<List<ClsStorageBO>>(Request.Form["__EVENTARGUMENT"]);  
  19.         Lable1.Visible = true;  
  20.         Lable1.Text = ObjLocDataStorageBO[0].ProPubMessage;  
  21.    
  22.     }  
  23. } 

Summary

 
In the above-given example, I have used two buttons and one label out of which one is the client-side button and another is the server control. On the click of the client-side button, I have called the JavaScript function in which I'm calling the doPostBack function explicitly to make the server-side control called and also am passing the data in the JSON format. At the server-side I have used the JavaScriptSerializer to convert a JSON-formatted string to an object of the specified type and have assigned it to Lable1 and displayed it.


Similar Articles