Download Source
In this article you will learn how to insert data without refreshing page jquery is used.
Create Table
HTML Code
C# Code
Output Preview
Download Source
In this article you will learn how to insert data without refreshing page jquery is used.
Create Table
HTML Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="JS/JavaScript1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btninsert').click(function () {
var name = $('#txtname').val();
var age = $('#txtage').val();
var address = $('#txtaddress').val();
var contact = $('#txtcontact').val();
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Home.aspx/Insertrecord',
data: "{'name':'" + name + "','age':'" + age + "','address':'" + address + "','contact':'" + contact + "'}",
success: function (response) {
$('#txtname').val(''); $('#txtage').val(''); $('#txtaddress').val(''); $('#txtcontact').val('');
},
error: function () {
alert("Error");
}
});
});
});
</script>
</head>
<body style="background-color:#eee">
<form id="form1" runat="server">
<div align="center" style="font-size:x-large">Insert Without Page Refresh</div>
<br />
<br />
<div>
<table align="center">
<tr>
<td style="font-size:large">Name </td>
<td>
<input type="text" id="txtname" runat="server" />
</td>
</tr>
<tr>
<td style="font-size:large">Age </td>
<td>
<input type="text" id="txtage" runat="server" />
</td>
</tr>
<tr>
<td style="font-size:large">Address </td>
<td>
<input type="text" id="txtaddress" runat="server" />
</td>
</tr>
<tr>
<td style="font-size:large">Contact </td>
<td>
<input type="text" id="txtcontact" runat="server" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" id="btninsert" value="Insert" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
C# Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Web.Services;
namespace Insertwithout_refresh
{
public partial class Home : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string Insertrecord(string name, string age, string address, string contact)
{
SqlConnection conn = new SqlConnection("Data Source=Servername;Initial Catalog=Databasename;Integrated Security=True");
try
{
conn.Open();
SqlCommand cmd = new SqlCommand("Insert into empdetail (name,age,address,contact) values(@name,@age,@address,@contact)", conn);
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@name", name);
cmd.Parameters.AddWithValue("@age", age);
cmd.Parameters.AddWithValue("@address", address);
cmd.Parameters.AddWithValue("@contact", contact);
cmd.ExecuteNonQuery();
conn.Close();
return "Insertmsg";
}
catch (Exception ex)
{
return "Failuremsg";
}
}
}
}
Output Preview
Download Source
No comments:
Post a Comment