Thursday, 12 September 2013

How to call asp.net Code behind page methods from JSON or JQuery






Description:-

            In this Example we Explain that How to Call a Asp.Net Serverside method or Codebehind Method that we wiil Define in Aspx.cs File are Call From Jquery.

To Call this Method From Jquery First we have to Create a those Method With a [WebMethod] Attribute in our Code behind file and then after we can easily call this Method From Jquery.


If we want to call our Code behind methods using JQuery then we need to use JQuery.ajax method and our JQuery declaration will be declared as follows :

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "yourpage.aspx/yourmethod",
data: "{}",
dataType: "json",
success: function(data) {
//Write functionality to display data
},
error: function(result) {
alert("Error");
}
});

In above Declaration we are using this JSON function to call [WebMethod] using JQuery $.ajax() whenever we need to make Ajax call with JQuery then we will use JSON functions like as we mentioned in above format. Here type, ContentType and dataType are same for all functions only url, data and success and error parameters will vary based on our requirement.

url: This is the Full path of our Webmethods that we are defined in Code behind File.

data: through this property we will pass the parameter to the method, if no parameters then we need to use data: "{}"

success: through this property when our [WebMethod] is Exccuted completely then success function will execute and return required data

error: This parameter is used to display the error message whenever we get an Exception.

Now Just Copy the Below Code and paste it in your Aspx page.

Before using this you must have to include the Namespace like

using System.Web.Services;

and Method is must Static with [WebMethod] Attribute


Fancy Slide Show of Image Gallery in JQuery Image slide show in Jquery

how to Disable Browser back button functionality using javascript Disable browser back button

Delete multiple record in gridview with checkbox selection Delete multiple record in gridview




Default.aspx:-



<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<title>JQuery Call asp.net page methods</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/DisplayMessage",
data: "{}",
dataType: "json",
success: function(data) {
 $("#lblmsg").text(data.d);
},
error: function(result) {
alert("Error occured");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<label id="lblmsg" runat="server"></label>
</form>
</body>
</html>



Default.aspx.cs:-


using System;

using System.Web.Services;



public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{


}
[WebMethod]
public static string DisplayMessage()
{
    return DateTime.Now.ToString();
}
}

 

0 comments:

Post a Comment