Introduction
The objective of this article is to explain how to use a .ashx handler to access a DLL or any server on an HTML page using JSON to make the server side/DB call very fast in a simple manner.
This can be done using the following files in a project.
- HTML: The UI of the project.
- JS: A JavaScript file to call the handler asynchronously.
- .ASHX Hander: to call the API.
- .DLL: .NET API Code to access DB or any business logic.
Kindly use the following to do that.
- Create a DLL.
- Consume the DLL in the Web project.
How to Create the DLL in .NET?
public int AddNumber(int num1, int num2)
{
return num1 + num2;
}
- Create a ClassLibrary project (ClassLibrary1) and add a class file into it named (Class1.cs).
- Add the following sample method into it and build the DLL.
How to Consume the DLL on the Web?
- Create a new .NET Web project, add a default.htm file, and make it the start-up file.
- Add the reference of the SampleLibrary project created above.
- Add a . JS file (sample.js) and a .ashx (sample. ashx) file to the project.
- Add a Generic Handler (Handler. ashx) file into the project and write the following code to access the DLL code.
Add a reference for System.Web.Extensions.dll.
public void ProcessRequest(HttpContext context)
{
context.Response.ContentEncoding = System.Text.Encoding.UTF8;
context.Response.ContentType = "text/html";
var strResult = string.Empty;
switch (context.Request.QueryString["RequestType"].Trim())
{
case "AddNum":
strResult = this.AddNumber(
Convert.ToInt32(context.Request["number1"]),
Convert.ToInt32(context.Request["number2"]));
break;
}
context.Response.Write(strResult);
}
public bool IsReusable
{
get
{
return false;
}
}
public string AddNumber(int number1, int number2)
{
int total = 0;
ClassLibrary1.Class1 sampleLib = new ClassLibrary1.Class1();
total = sampleLib.AddNumber(number1, number2);
var jsonData = new
{
Total = total
};
JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
return javaScriptSerializer.Serialize(jsonData);
}
Add the following lines in the default.htm file.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="Sample.js" type="text/javascript"></script>
</head>
<body>
<p>
<input id="txtNumber1" type="text" />
</p>
<p>
<input id="txtNumber2" type="text" />
</p>
<p>
<input id="showSum" type="button" value="Calculate Sum" />
</p>
</body>
</html>
Open the. JS file (sample.js) added previously and write the following code to access the handler.
$(document).ready(function() {
$('body').delegate("#showSum", 'click', function() {
var number1 = $("#txtNumber1").val();
var number2 = $("#txtNumber2").val();
CallHandlerSync("Handler.ashx?RequestType=AddNum", { 'number1': number1, 'number2': number2 });
});
});
function CallHandlerSync(inputUrl, inputdata) {
$.ajax({
url: inputUrl,
contentType: "application/json; charset=utf-8",
data: inputdata,
async: false,
success: function(result) {
var objResult = $.parseJSON(result);
alert(objResult.Total);
},
error: function() {
alert("Error...");
}
});
}