Saturday, January 7, 2012

ASP.NET Page Methods with Parameters

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.

PageMethodWithParameter

That’s it. It’s very easy hope you liked it..Stay tuned for more…Happy programming

Shout it

kick it on DotNetKicks.com
Share:

2 comments:

  1. plz explain clearly about 3 tier architecture with simple example plz plz post
     

    ReplyDelete

Your feedback is very important to me. Please provide your feedback via putting comments.

Search This Blog
About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 10+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews