Before reading this blog, you can read some of my popular blogs - ASP.Net Tutorial, WCF Tutorial, .Net Core Tutorial, JQuery Tutorial
In this blog, we will first know about Web Method.
Web methods are those methods which are generally exposed over the web for eg - in a Web service. A web method must contain an attribute [WebMethod]. A web method can be called from server-side code as well as client-side code. In this blog, I will write about how to call a WebMethod using Jquery AJAX.
Jquery allow users to call server-side code without any postback.
Follow below steps:
Create a table with below script:
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[userTable](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [varchar](50) NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
Write a stored procedure to save data into the table:
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE InsertData
@name varchar (50)
AS
BEGIN
SET NOCOUNT ON;
insert into [dbo].[userTable] (name) values(@name)
END
GO
AJAX Method to Call Web method
Web method
Declare below connection string within the class.
What is WebMethod?
Web methods are those methods which are generally exposed over the web for eg - in a Web service. A web method must contain an attribute [WebMethod]. A web method can be called from server-side code as well as client-side code. In this blog, I will write about how to call a WebMethod using Jquery AJAX.
Follow below steps:
Create a table with below script:
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[userTable](
[id] [int] IDENTITY(1,1) NOT NULL,
[name] [varchar](50) NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
Write a stored procedure to save data into the table:
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE InsertData
@name varchar (50)
AS
BEGIN
SET NOCOUNT ON;
insert into [dbo].[userTable] (name) values(@name)
END
GO
AJAX Method to Call Web method
function SaveData() {
var name = document.getElementById('<%=txtName.ClientID %>').value;
$.ajax({
type: "POST",
url: /MyFolder/MyAjaxPage.aspx / SubmitData ",
data: '{"name":"' + name + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
if (data.d == "success") {
alert('Your data has been submitted.');
}
},
error: function() {
alert('Please Try again.');
return false;
}
});
}
|
Web method
Declare below connection string within the class.
SqlConnection sqlConnection = new SqlConnection("database connection string");
[WebMethod]
public static string SubmitData(string name)
{
try
{
SqlParameter[] prmUserReg = new SqlParameter[1];
prmUserReg[0] = new SqlParameter("@name", name);
SqlCommand cmd = new SqlCommand("InsertData", sqlConnection);
cmd.CommandType = CommandType.StoredProcedure;
if (sqlConnection.State == ConnectionState.Closed)
{
sqlConnection.Open();
}
cmd.Parameters.AddRange(prmUserReg);
cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
}
finally
{
}
return message;
}
|