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.
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
|
<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
|
|||
8 comments :
GOOD
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
Is this function can work with asp.net control? (ex. ASP Button)
How to create the form filling image that you displayed.(jQuery-Submit-form-without-postback.Gif)
Thanks
thanks
thanks
--K.K.P.
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..
I know this old method but if you have any other method to do the same then please tell me.
Note: Only a member of this blog may post a comment.