Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

Mar 28, 2012
Introduction:

In this article I will explain how to use JQuery and JSON to call asp.net page methods.
Description:
  
In previous article I explained
JQuery UI AutoComplete textbox with database in that I declared page method directly in code behind and used it in our application. Now I am using same concept to create web methods and call those methods in our page using JQuery.
Generally we will create static web methods in webservice and we will use those methods to call it from JQuery instead of that directly we can create static methods with [WebMethod] attribute in our code behind file and use those methods from JQuery.

If we want to call our page methods with JQuery then we need to use JQuery.ajax method and our JQuery declaration will be like this

$.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");
}
});
This is the function declaration of JSON format we are using this JSON function to call web methods 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 path of our Webmethods

data: we will pass parameters using this parameter if no parameters then we need to use data: "{}"

success: Once our web method execution completed then success function will execute and return required data
error: This parameter is used to display required error message whenever we get problem.

(Note: JSON is a case sensitive please be careful before write JSON format of data)
Now create new website and write the following code in your aspx page

<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/DisplayData",
data: "{}",
dataType: "json",
success: function(data) {
$("#lbltxt").text(data.d);
},
error: function(result) {
alert("Error");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<label id="lbltxt" runat="server"></label>
</form>
</body>
</html>
If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery.

Now open code behind file and add the following namespaces


using System;
using System.Web.Services;
After that write the following code

C#.NET Code


protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string DisplayData()
{
return DateTime.Now.ToString();
}
VB.NET Code:
  

Imports System.Web.Services
Partial Class Default2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
<WebMethod()> _
Public Shared Function DisplayData() As String
Return DateTime.Now.ToString()
End Function
End Class
Download sample code attached


 

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

12 comments :

suri said...

asd

suri said...

Hi i have a doubt..

Step 1 : upload a Excel File Consists of Table Data
Ex :

EID EName
1 AA
2 BB
3 CC

after uploading will bind it to grid view as per the excel sheet

we have few more controls like

MapFrom : EID, ENmame (dropdownlist single selection) binding the data
from Excel i.e all Column Headers

Map To : is the DropDown consists of all tables whose EID primary Key
is present (dropdown list single selection)
Emp_master,Travel_Request

Fields : populated based on Map To dropdown i.e all the fields of the
tables (dropdown list single selection)
EID,ENAME,EMAIL,DOB

Generage Reference : is a listbox for multiple selection, it consists
of all the fields of table, same as Fields EID,ENAME,EMAIL,DOB
i have selected Email, DOB

onclick of a button

i need to repopulate the grid like
EID ENAME EMAIL DOB
1 AA AA@tt.com 10-11-1990
2 BB as@rr.com 10-11-1995

which is the best solution to implement this??

chandru said...

Hi suresh,
i want the Demo Application using Jquery and asp.net
1.want to upload multiple Images wsing File Upload
there is option Add and remove
if i click add new fileupload control open
if i click remove fileupload will remove
2.when file upload is process is happening
i want to see in progress bar
3.file should be saved in different size
100*100 and 50*50
4.the file path should be saved in sqldatabase

chandru said...

Hi suresh,
i want the Demo Application using Jquery and asp.net
1.want to upload multiple Images wsing File Upload
there is option Add and remove
if i click add new fileupload control open
if i click remove fileupload will remove
2.when file upload is process is happening
i want to see in progress bar
3.file should be saved in different size
100*100 and 50*50
4.the file path should be saved in sqldatabase

bajinder said...

i want to button click to show data with the help of json.

Harjinder Singh Gaheer said...

You code helped me a lot, i have been searching for this for last five hours.

Thanks

Unknown said...

Hi suresh,
i have doubt

ontentType:"application/json; charset=utf-8",
url:"Default.aspx/DisplayData",--> //we have multiple methods then how do we call ?
data: "{}",

Unknown said...

Sir i dont understand data.d
If i remove d it does not work

Anonymous said...

superb nice explanation with examle

Anonymous said...

\\can you elaborate the realtime concept of json parsing...

Anonymous said...

Good...

Anonymous said...

Can that code work having the Friendly URLs NuGet installed? I cannot get these two things work together so far.

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.