How to use JSON with ajax in ASP.NET?




In this article we learn how to use Ajax with Json in asp.net. It is very easy to call page method using ajax & Json. In this article we will call code behind method using jquery & Ajax. We can pass value or parameter from client end to server side using Json.




click Image to Enlarge it

Design(HTML Part):

<div>
Developer :
<asp:TextBox ID="txtDeveloper" runat="server"></asp:TextBox>
<input id="btnShow" type="button" value="Show Demo"
    onclick = "ShowJsonDemo()" />
</div>
When we click on the button btnShow, javaSript  function ShowJsonDemo will execute which will make Ajax call to GetJsonDemo Webmethod. In Javascript function we will pass textbox value as parameter to webmethod using Json.

Client Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
    function ShowJsonDemo() {
        $.ajax({
            type: "POST",
            url: "jSON.aspx/GetJsonDemo",
            data: '{developer: "' + $("#<%=txtDeveloper.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function (response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>


Code Behind:

[System.Web.Services.WebMethod]
    public static string GetJsonDemo(string developer)
    {
        return "First Application developed by " + developer +" on : "
            + DateTime.Now.ToString();
    }



Full Sample Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type = "text/javascript">
    function ShowJsonDemo() {
        $.ajax({
            type: "POST",
            url: "jSON.aspx/GetJsonDemo",
            data: '{developer: "' + $("#<%=txtDeveloper.ClientID%>")[0].value + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        failure: function (response) {
            alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
Developer :
<asp:TextBox ID="txtDeveloper" runat="server"></asp:TextBox>
<input id="btnShow" type="button" value="Show Demo"
    onclick = "ShowJsonDemo()" />
</div>
    </form>
</body>
</html>

ASP.NET Code File:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class jSON : System.Web.UI.Page
{
    [System.Web.Services.WebMethod]
    public static string GetJsonDemo(string developer)
    {
        return "First Application developed by " + developer +" on : "
            + DateTime.Now.ToString();
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}


Kategori

Kategori