In this article I will explain with an example, how to call Server Side function without Static WebMethod using JavaScript in ASP.Net using C# and VB.Net.
Whenever an AJAX call needs to be done to make call to Server Side in JavaScript, one has use a Static Web Method or a Web Service Web Method.
This article will illustrate how to call the Server Side code i.e. Page Load event with JSONP (JSON with Padding) using jQuery dynamic SCRIPT Tag and CallBack functions in ASP.Net.
Server Side code
Inside the Page Load event, the value of the name QueryString parameter is checked.
If the parameter is present, a JSON string is built using the value of name QueryString parameter, Current DateTime and the callback QueryString parameter.
There JSON Generic HTTP Handler accepts two optional QueryString parameters.
Note: The callback QueryString parameter holds the value of the Callback function which will be executed by the client side script when the response is received.
Finally the JSON string is sent to Client through the Response.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request.QueryString["name"]))
{
//Build a JSON string.
string responseJson = "{Name: '" + Request.QueryString["name"] + "', Time: '" + DateTime.Now + "'}";
//Check for CallBack function.
if (!string.IsNullOrEmpty(Request.QueryString["callback"]))
{
//Wrap a call to CallBack function with the JSON string as parameter.
responseJson = string.Format("{0}({1});", Request.QueryString["callback"], responseJson);
}
//Send the Response in JSON format to Client.
Response.ContentType = "text/json";
Response.Write(responseJson);
Response.End();
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not String.IsNullOrEmpty(Request.QueryString("name")) Then
'Build a JSON string.
Dim responseJson As String = ("{Name: '" & Request.QueryString("name") & _
"', Time: '" & DateTime.Now + "'}")
'Check for CallBack function.
If Not String.IsNullOrEmpty(Request.QueryString("callback")) Then
'Wrap a call to CallBack function with the JSON string as parameter.
responseJson = String.Format("{0}({1});", Request.QueryString("callback"), responseJson)
End If
'Send the Response in JSON format to Client.
Response.ContentType = "text/json"
Response.Write(responseJson)
Response.End()
End If
End Sub
Call Server Side function without Static Web Method using JavaScript in ASP.Net
The following HTML Markup consists of an ASP.Net TextBox and a Button assigned with a JavaScript click event handler.
The GetTime JavaScript function is called inside the Button Click event handler.
The Server Side code (Page Load event) is called using a method called as JSONP (JSON with Padding). In this method an AJAX request is made by attaching dynamic SCRIPT tags.
The SRC attribute of the dynamic SCRIPT tag is set to the URL of the Page along with the Name parameter (value of the TextBox) and the callback parameter (name of the function to be executed when the response is received).
Finally the dynamic SCRIPT tag is attached to the HEAD element which executes it and ultimately calls the Page Load event of the Page.
Once the response is received, the JavaScript function specified in the callback parameter i.e. DisplayTime gets called which displays the Name and the Server DateTime using JavaScript Alert Message Box.
<form id="form1" runat="server">
<asp:TextBox ID="txtName" runat="server"/>
<asp:Button ID="btnGet" runat="server" Text="Submit" OnClientClick="return GetTime()"/>
<script type="text/javascript">
function GetTime() {
//Fetch the Name value from TextBox.
var name = document.getElementById("<%=txtName.ClientID %>").value;
//Create a dynamic SCRIPT Tag.
var script = document.createElement("script");
script.type = "text/javascript";
//Set the SRC as the Page name with Parameters.
script.src = '<%=ResolveUrl("~/Default.aspx") %>' + '?name=' + name + '&callback=DisplayTime';
//Append the SCRIPT Tag to the HEAD Tag.
document.getElementsByTagName("head")[0].appendChild(script);
return false;
};
function DisplayTime(response) {
alert("Name: " + response.Name + "\nTime: " + response.Time);
};
</script>
</form>
Screenshot
![Call Server Side function without Static Web Method using JavaScript in ASP.Net]()
Demo
Downloads
