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 Submit Form without Page Refresh using JSON in Asp.Net

Nov 27, 2013
Introduction

Here I will explain how to use jQuery to submit form without page refresh using ajax in asp.net or jQuery submit form without page reload using jQuery ajax  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 how to submit form without refresh or reload page using jQuery 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

8 comments :

Software Development and Travel Information said...

GOOD

Anonymous said...

Good Article. This is the easiest way to imeplement a webservice and use it through ajax. What about security? Can we restrict the usage of webmethod by only my program!?

Keep up the good work!
Jack

Anonymous said...

Is this function can work with asp.net control? (ex. ASP Button)

Unknown said...

How to create the form filling image that you displayed.(jQuery-Submit-form-without-postback.Gif)


Thanks

Anonymous said...

thanks

Anonymous said...

thanks

--K.K.P.

Unknown said...

how to display the list on text change in text box.. Same like Google search Text Box. as we enter some text it start showing related search..

Amin said...

I know this old method but if you have any other method to do the same then please tell me.

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.