Introduction:
Here
I will explain simple jQuery ajax json example in asp.net or submit a form without page refresh using jQuery ajax json with example in asp.net using c#,
vb.net.
Description:
In previous articles I explained integrate Facebook login authentication, integrate twitter login authentication, jQuery randomly change color of div and many articles relating to jQuery, asp.net, c#, vb.net. Now I will explain simple jQuery ajax json example in asp.net.
In previous articles I explained integrate Facebook login authentication, integrate twitter login authentication, jQuery randomly change color of div and many articles relating to jQuery, asp.net, c#, vb.net. Now I will explain simple jQuery ajax json example in asp.net.
To implement this
first design table in your database like below to save values in database.
Column Name
|
Data Type
|
Allow Nulls
|
Name
|
varchar(50)
|
Yes
|
Subject
|
varchar(50)
|
Yes
|
Description
|
varchar(250)
|
Yes
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>jQuery
Submit a form without postback</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>
<body>
<form id="form1"
runat="server">
<table>
<tr>
<td>Name:</td>
<td><input type="text"
id="txtname"
/></td>
</tr>
<tr>
<td>Subject:</td>
<td> <input type="text"
id="txtsubject"
/></td>
</tr>
<tr>
<td>Body:</td>
<td> <textarea id="txtbody"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="button"
id="btnSubmit"
value="Submit"
/>
</td>
</tr>
</table>
<label id="lblmsg"
style="font-weight:bold; color:Red"/>
</form>
<script type="text/javascript">
$(function ()
{
$('#btnSubmit').click(function () {
var name = $('#txtname').val();
var subject = $('#txtsubject').val();
var body = $('#txtbody').val();
if (name != ''
&& subject != '' && body) {
$.ajax({
type: "POST",
contentType: "application/json;
charset=utf-8",
url: "Default.aspx/InsertData",
data: "{'username':'"
+ name + "','subj':'" + subject +
"','desc':'" + body + "'}",
dataType: "json",
success: function
(data) {
var obj = data.d;
if (obj == 'true') {
$('#txtname').val('');
$('#txtsubject').val('');
$('#txtbody').val('');
$('#lblmsg').html("Details Submitted Successfully");
}
},
error: function
(result) {
alert("Error");
}
});
}
else {
alert('Please enter
all the fields')
return false;
}
})
});
</script>
</body>
</html>
|
After completion of aspx page design add the following
namespaces in code behind
C# Code
using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
|
After that write the following code in code behind
protected void
Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string InsertData(string
username, string subj, string desc)
{
string msg = string.Empty;
using (SqlConnection con
= new SqlConnection("Data Source=SureshDasari;Integrated
Security=true;Initial Catalog=MySampleDB"))
{
using (SqlCommand cmd = new SqlCommand("insert into TEMP_User(Name,Subject,Description)
VALUES(@name,@subject,@desc)", con))
{
con.Open();
cmd.Parameters.AddWithValue("@name", username);
cmd.Parameters.AddWithValue("@subject", subj);
cmd.Parameters.AddWithValue("@desc", desc);
int i= cmd.ExecuteNonQuery();
con.Close();
if (i == 1)
{
msg = "true";
}
else
{
msg = "false";
}
}
}
return msg;
}
|
VB.NET Code
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub
Page_Load(sender As Object,
e As EventArgs)
End Sub
<WebMethod()>
_
Public Shared Function InsertData(username As String, subj As String, desc As String) As String
Dim msg As String = String.Empty
Using con As New SqlConnection("Data Source=SureshDasari;Integrated
Security=true;Initial Catalog=MySampleDB")
Using cmd As New SqlCommand("insert into TEMP_User(Name,Subject,Description)
VALUES(@name,@subject,@desc)", con)
con.Open()
cmd.Parameters.AddWithValue("@name", username)
cmd.Parameters.AddWithValue("@subject", subj)
cmd.Parameters.AddWithValue("@desc", desc)
Dim i As Integer = cmd.ExecuteNonQuery()
con.Close()
If i = 1 Then
msg = "true"
Else
msg = "false"
End If
End Using
End Using
Return msg
End Function
End Class
|
|
Demo
 |
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 Email
|
|||
31 comments :
excellent!!!
good.... nice example
Hmm Wonderful , this method is very useful for me.
Nice Article....
http://www.freehostingeu.com/?aid=MTkyMzI3MTgyMDE5MjU=
Free hosting PHP MY SQL HTML for Developers and students
NO Add's Completely Free
Create Account and Hoat Your Website..
You should sanitize the input
simple example :)
Great Example for a fresher like me.
Sir Please Post any example for change language in asp.net.
yo
nice one
sir plz can u tell me how to update and delete record with jason plz provide me any link or code plz
Thanks in advance
Explained with Simplicity....Very nice example
Good Example
Really its an very good demo
Nice Article....
Hello Sir,
Being through your articles since 1years had learned a lot also, but here i dont see use of datatype :"json"
????
without using this even we can do the same wat u have done here.. kindly explain with the example of array passing and fetching
Nice.
How to read data from Json data list??
Suresh, THANK YOU !!!!!!!
beautiful
Good
short, simple and perfect example Suresh,,,
very good
Nice article suresh!
Can u post same article for Update and delete records through JSON?
Thanks.
Nice post................
Nice Article
hell i haven't sqlserver 2008 r2 so i was created visual studio inbuilt sql server database so please send me like inbuilt database code without store procedure.please
i cant get any click event on submit button what to do
I will do a thesis project that is a File Sharing System in our department foe Computer Engineering using ASP.NET with c#so,Please send a source code and some graphical user interfaces i.e screen shoots
Thank you sir Nice article
Note: Only a member of this blog may post a comment.