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

Comments

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

    ReplyDelete

Post a Comment

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

Popular posts from this blog

How to create Rest API(Web API) with ASP.NET Core 1.0

Creating PDF with ASP.Net MVC and RazorPDF

Solution: gulp is not recognized as internal or external command- Visual Studio