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
No comments:
Post a Comment