Introduction:
In this article I will explain how to use JQuery and JSON to call asp.net page methods.
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.
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
|
|
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 Email
|
|||
12 comments :
asd
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??
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
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
i want to button click to show data with the help of json.
You code helped me a lot, i have been searching for this for last five hours.
Thanks
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: "{}",
Sir i dont understand data.d
If i remove d it does not work
superb nice explanation with examle
\\can you elaborate the realtime concept of json parsing...
Good...
Can that code work having the Friendly URLs NuGet installed? I cannot get these two things work together so far.
Note: Only a member of this blog may post a comment.