Insert Data using JSON, ASP.NET Web services and jQuery
In previous post, we saw how to retrieve data from database in JSON and display in tabular format using jQuery AJAX (Click here to read the article).
Today we will look at how to create a form which will take input from user and insert it into the database using jQuery AJAX call.
Record in Database:
Web service code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Configuration;
using System.Data;
using System.Data.SqlClient;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class MultipleUpdateWebService : System.Web.Services.WebService {
// getting connection string
stringconStr=WebConfigurationManager.ConnectionStrings["SampleTestDBConnectionString1"].ConnectionString;
int rowsInserted = 0;
[WebMethod]
public string ReceiveUpdatesWebservice(string name,string email, string phone,string address) {
// Creating Sql Connection
using (SqlConnection conn=new SqlConnection(conStr))
{
// Creating insert statement
string sql = string.Format(@"INSERT INTO [SampleTestDB].[dbo].[SampleInfoTable]
([Name]
,[Email]
,[Phone]
,[Address])
VALUES
('{0}'
,'{1}'
,'{2}'
,'{3}')",name,email,phone,address);
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = sql;
cmd.CommandType = CommandType.Text;
conn.Open();
rowsInserted=cmd.ExecuteNonQuery();
conn.Close();
cmd = null;
}
return string.Format("Thank you, {0} number of rows inserted!",rowsInserted);
}
}
ASPX Code:
<%@ Page Language="C#" AutoEventWireup="true"CodeFile="AJAXMultipleLines.aspx.cs" Inherits="AJAXMultipleLines" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function CallService() {
// Creating variables to hold data from textboxes
var name = $('#_txtname').val();
var email = $('#_email').val();
var phone = $('#_phone').val();
var addr = $('#_addr').val();
$.ajax({
type: "POST",
url: "MultipleUpdateWebService.asmx/ReceiveUpdatesWebservice",
data: "{ 'name': '" + name + "','email': '" + email + "', 'phone': '" + phone +"','address':'" + addr + "'}",
contentType: "application/json",
async: false,
success: function(data) {
$('#message').text(data.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Name: <asp:TextBox ID="_txtname" runat="server"></asp:TextBox><br />
Email: <asp:TextBox ID="_email" runat="server"></asp:TextBox><br />
Phone: <asp:TextBox ID="_phone" runat="server"></asp:TextBox><br />
Address: <asp:TextBox ID="_addr" runat="server"></asp:TextBox><br />
<input id="_btnSubmit" type="button" value="Submit" onclick="CallService();" />
<span id="message">
</span>
</div>
</form>
</body>
</html>
No comments:
Post a Comment