Wednesday, December 11, 2013

Labels: , ,

How to Call C# server side Method from java script in Asp.net with C# using Jquery Ajax and JSON

Posted by Abhay Makadiya at 12/11/2013
In previous example we had learn How to call jquery function from code behind in asp.net with C#.
and otherIn this Tutorial we will learn something new which is really helpful for dynamic web applications without loading. There are many situations where we need to do some action in Code behind(C#) without post back. In this type of situation generally we are using Update Panels of course this is suitable when you want to execute a specific control events you can register it with using triggers in Update Panel but when you want to call server side Method from java script then Jquery AJAX is the best approach. It is faster and easier. We can easily improve user experience and performance of web applications by reducing unnecessary post backs.

One of the best things which I like in jQuery is JQuery Ajax functions. this is a way through which we can call server side page's method in java script. This brings so many opportunities we can perform lots of operations without using slow and annoying post backs.

In this post I am showing the basic use of  Jquery AJAX. In this example I am creating a small application in which i am calling one Server side Method from java script with two arguments.

Here is the screening of below web application. Show this image carefully there is no loading sign in browser tab.



Add below Code to aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript" language="javascript">
$(document).ready(function () {
            $('#<% =Button1.ClientID %>').click(function () {
                
                  $.ajax({
                      type: "POST",
                      url: "WebForm1.aspx/serverMethodHello",
                      data: JSON.stringify({ name: 'Abhay'}),
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      async: true,
                      cache: false,
                      success: function (msg) {
                          $('#myDiv').text(msg.d);
                      },
                      error: function (XMLHttpRequest, textStatus, errorThrown) {
                          var jsonError = JSON.parse(XMLHttpRequest.responseText);
                          alert(jsonError.Message);
                      }
                  })
                return false;
            });
        });

</script>

</head>
<body>
    <form id="form1" runat="server">
        <div class="log"></div>
        <div id="myDiv" style="font-size: x-large; color: saddlebrown; background-color: #C1C1C1">
        </div>
        <br />
        <p>Click This Button To CALL Server Side Method</p>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>

</body>
</html>

Code in C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Services;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static string serverMethodHello(string name)
        {
            return ("Hello this is server message......."+name);
        }
        
    }
   
}

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )