Jquery ajax, post data t generic handler : Here in this tutorial will explain how easily we can post or send JSON string ( data ) using jQuery to the generic handler ( ashx file) in Asp.net, C#. In another word How we can send parameters, data to Generic handler (ashx) file using jquery ajax (client side). You can also check my previous article on Asp.net, C#, jQuery, JSON and jQuery Ajax JSON Example in Asp.net with sql database.
Firstly, you will need to include latest jQuery .js file from the Google-hosted site. You can also host the jQuery file on your server, it's all your choice. Now add a button tag, which trigger click event and send / post data to the generic handler.
# HTML Markup:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
First Name<input type="text" id="txtFirstName" /><br />
Last Name
<input type="text" id="txtLastName" /><br />
Qualification
<input type="text" id="txtQualication" /><br />
Age
<input type="text" id="txtAge" />
<button id="bntSubmit">Submit</button>
</body># Client-Side: Jquery- calling ajax on button click to send JSON data.
On button click, we calling ajax method, and send user data. i.e. First name, Last name, Qualification, and Age. You may notice in below client-side code under ajax method we have used `data: jsonData,` this is important here bcoz we are going to send / post JSON object on
You may notice in below client-side code under ajax method we have used `data: jsonData,` this is important here bcoz we are going to send / post JSON object on server. This is how our client side looks like.
$("#bntSubmit").on('click', function (e) {
// Initialize the object, before adding data to it.
// { } is declarative shorthand for new Object()
var obj = {};
obj.first_name = $("#txtFirstName").val();
obj.last_name = $("#txtLastName").val();
obj.qualification = $("#txtQualication").val();
obj.age = $("#txtAge").val();
//In order to proper pass a json string, you have to use function JSON.stringfy
var jsonData = JSON.stringify(obj);
$.ajax({
url: 'myGenericHandler.ashx',
type: 'POST',
data: jsonData,
success: function (data) {
console.log(data);
alert("Success :" + data);
},
error: function (errorText) {
alert("Wwoops something went wrong !");
}
});
e.preventDefault();
});# Add Generic Handler ( ashx file) in your Asp.net Application.
First, import those two namespaces as shown in below code.//*
using System.Web.Script.Serialization;
using System.IO;
//* // we create a userinfo class to hold the JSON value
public class userInfo
{
public string first_name { get; set; }
public string last_name { get; set; }
public string qualification { get; set; }
public string age { get; set; }
}public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
try
{
string strJson = new StreamReader(context.Request.InputStream).ReadToEnd();
//deserialize the object
userInfo objUsr = Deserialize<userInfo>(strJson);
if (objUsr != null)
{
string fullName = objUsr.first_name + " " + objUsr.last_name;
string age = objUsr.age;
string qua = objUsr.qualification;
context.Response.Write(string.Format("Name :{0} , Age={1}, Qualification={2}", fullName, age, qua));
}
else
{
context.Response.Write("No Data");
}
}
catch (Exception ex)
{
context.Response.Write("Error :" + ex.Message);
}
}<%@ WebHandler Language="C#" Class="myGenericHandler" %>
using System;
using System.Web;
using System.Web.Script.Serialization;
using System.IO;
public class myGenericHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
try
{
string strJson = new StreamReader(context.Request.InputStream).ReadToEnd();
//deserialize the object
userInfo objUsr = Deserialize<userInfo>(strJson);
if (objUsr != null)
{
string fullName = objUsr.first_name + " " + objUsr.last_name;
string age = objUsr.age;
string qua = objUsr.qualification;
context.Response.Write(string.Format("Name :{0} , Age={1}, Qualification={2}", fullName, age, qua));
}
else
{
context.Response.Write("No Data");
}
}
catch (Exception ex)
{
context.Response.Write("Error :" + ex.Message);
}
}
public bool IsReusable
{
get
{
return false;
}
}
// we create a userinfo class to hold the JSON value
public class userInfo
{
public string first_name { get; set; }
public string last_name { get; set; }
public string qualification { get; set; }
public string age { get; set; }
}
// Converts the specified JSON string to an object of type T
public T Deserialize<T>(string context)
{
string jsonData = context;
//cast to specified objectType
var obj = (T)new JavaScriptSerializer().Deserialize<T>(jsonData);
return obj;
}
}
- Simple Asp.net C# webmethod call via jQuery Ajax JSON example.
- Chart.js + Asp.net: Create Pie chart with JSON response in Jquery.
- Easy way to upload Bulk Image in Asp.net C# using Dropzone JS.
- Preview Image before upload it with jQuery in Asp.net.
- Upload and Resize image using Dropzone Js in Asp.net.
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee
Post Comment
Your email address will not be published. Required fields are marked *