Call ASP.Net/C# function using
Javscript
Usually in ASP.net platform, server side functions (all
codes written in asp.net,C#) are executing from the server side and all client
side funtions (javascript,jquery,ajax) are executing from the client side.
Obviously client side functions are too faster than the server side because
there is no need to go upto server, will running from the browser itself.
But we are unable to written all functions in client
side to get good performance. But for this technique, there is some tips can be
used. What we are going to do is, we are writing a server side code in
ASP.Net,C# and call these functions from client side using javascript and ajax.
Steps to Calling ServerSide method from javscript
1. Create a aspx page with three textboxes and a button control.
2. User enter two numbers in first two textboxes and press
calculate button.
3. We are fetching entered values and calling a serverside
funtion by passing this values.
4. In the server side function find the sum and return the
result.
5. In client side’s succes event, getting result from the server
and displayed to third textbox.
Step 1 :
Create a aspx page with controls, two textboxes for
entering the numbers, one button for find the sum of number and a one more text
box to display the result.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="Result.aspx.cs"
Inherits="testWebApp.Result"
%>
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server"
EnablePageMethods="true">
</asp:ScriptManager>
<div>
<table>
<tr>
<td>
Number1:
</td>
<td>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Number2:
</td>
<td>
<asp:TextBox ID="txt2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Sum:
</td>
<td>
<asp:TextBox ID="txtSum" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSum" runat="server"
Text="Sum"
OnClientClick="CallSum();return
false;" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Step 2
In code behind, write a web method to access two parameters and return the
result. In the function we added parameters and return the result.
protected void Page_Load(object sender, EventArgs
e)
{
}
/// <summary>
/// Server side function
Sum
/// </summary>
/// <param name="arg1">arg1</param>
/// <param name="arg2">arg2</param>
/// <returns>result(sum)</returns>
[System.Web.Services.WebMethod]
public static int Sum(int arg1, int arg2)
{
/* On server side we can do any thing. Like we can access
the Session.
* We can do database access
operation. Without postback.
*/
try
{
return arg1 + arg2;
}
catch (Exception
ex)
{
throw ex;
}
}
Step 3
Create a javscript method in aspx page to get input textboxes values and
call serverside function. Here itself we decalre a success and failure event,
for getting the event from the server after the current function executed.
<script language="javascript" type="text/javascript">
<!--
//
Javascript function
function CallSum() {
//Get the controls
var txt1 = $get("txt1");
var txt2 = $get("txt2");
var txtresult = $get("txtSum");
//Call server side function
PageMethods.Sum(txt1.value, txt2.value, OnCallSumComplete,
OnCallSumError, txtresult);
/*Server side function get the 2 arguments arg1 and
arg2. We are passing txt1.value and txt2.value
for that. OnCallSumComplete is callback
function for complete successfully. OnCallSumError is callback
function on error. txtresult is
usercontext parameter.
OnCallSumComplete,OnCallSumError,txtresult are optional parameters.
If server side code executed
successfully then OnCallSumComplete will call.
If server side code do not executed
successfully then OnCallSumError will call.
*/
}
// Callback function on complete
// First argument is always "result" if
server side code returns void then this value will be null
// Second argument is usercontext control pass at the
time of call
// Third argument is methodName (server side function
name) In this example the methodName will be "Sum"
function OnCallSumComplete(result, txtresult,
methodName) {
//Show the result in txtresult
txtresult.value = result;
}
// Callback function on error
// Callback function on complete
// First argument is always "error" if server
side code throws any exception
// Second argument is usercontext control pass at the
time of call
// Third argument is methodName (server side function
name) In this example the methodName will be "Sum"
function OnCallSumError(error, userContext,
methodName) {
if (error !== null) {
alert(error.get_message());
}
}
// -->
</script>
No comments:
Post a Comment