Sunday, 19 January 2014

jQuery Ajax Submit Form without Page Refresh using JSON in Asp.Net

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


Posted by at

No comments:

Post a Comment

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

Subscribe to: Post Comments (Atom)