In earlier post I have written how we can use page methods to call server-side from the java script. In this post I am going to explain How we can pass parameters to page methods with java script.
So let’s take a simple example to see how we can pass parameters to the page methods. I am going to create a page method Hello World which takes name as parameter and return a string to greet user from that page method below is code for that.
using System;
using System.Web.Services;
namespace PageMethods
{
public partial class Test : System.Web.UI.Page
{
[WebMethod]
public static string HelloWorld(string name)
{
return string.Format("Hi {0}",name);
}
}
}
As you can see in following page method it’s returning string with greetings. So now our server-side code is completed. Now it’s time to write HTML and java script code for this. Following is code for java script.
<script type="text/javascript">
function GreetingsFromServer() {
var name = 'Jalpesh';
PageMethods.HelloWorld(name,OnSuccess, OnError);
return false;
}
function OnSuccess(response) {
alert(response);
}
function OnError(error) {
alert(error);
}
</script>
As you can see in above code I have created a function called ‘GreetingsFromServer’ which called page method helloworld with passing name parameter. Other two functions are handlers for the page methods Onsucess will be called if page method is called successfully without error other wise it will call onError method and alert error message.
Now we are done with java script so its time to write HTML code. So let’s write a HTML code for this page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PageMethods.Test" %>
<!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>Page Method with parameter demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" EnablePageMethods="true" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:button ID="btnHelloWorld" runat="server" Text="Greet User" OnClientClick="return GreetingsFromServer();"/>
</div>
</form>
</body>
</html>
As you can see from above code I have enabled page methods true with script manager and then I have called JavaScript function “GreetingsFromServer” on button client click. So it’s now time to run this code in browser. Following is output as expected.
That’s it. It’s very easy hope you liked it..Stay tuned for more…Happy programming