Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Ajax JSON Example in Asp.net

Dec 10, 2013
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.
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
Once table creation completed then write code like as shown below in your aspx page


<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 RSS subscribe by email Subscribe by Email

31 comments :

Anonymous said...

excellent!!!

phani said...

good.... nice example

Anonymous said...

Hmm Wonderful , this method is very useful for me.

Anonymous said...


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..

Anonymous said...

You should sanitize the input

Unknown said...

simple example :)

ravi said...

Great Example for a fresher like me.

Unknown said...

Sir Please Post any example for change language in asp.net.

Anonymous said...

yo

Anonymous said...

nice one

Unknown said...

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

Sachin said...

Explained with Simplicity....Very nice example

Vutla said...

Good Example

Anonymous said...

Really its an very good demo

Anonymous said...

Nice Article....

Anonymous said...

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

Anonymous said...

Nice.

Anonymous said...

How to read data from Json data list??

Anonymous said...

Suresh, THANK YOU !!!!!!!

Anonymous said...

beautiful

RRT said...

Good

Jagadish said...

short, simple and perfect example Suresh,,,

Shobhit said...

very good

Unknown said...

Nice article suresh!

Unknown said...

Can u post same article for Update and delete records through JSON?

Unknown said...

Thanks.
Nice post................

Anonymous said...

Nice Article

varun pujara said...

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

arun ad said...

i cant get any click event on submit button what to do

snetsehay mulu said...

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

Dharmendra Kumar said...

Thank you sir Nice article

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.