Step 1: Create asp.net Project
Step 2: Create "jsonFile.json" file and add below code
{
"status": "success",
"status_code": 200,
"product_name": "oneplus nord",
"product_details": {
"amount": 20000,
"manufacturing_year": 2020,
"manufacturing_month": "Jun",
"color": "Blue"
}
}
Step 3: create "WebForm1.aspx" page and add below code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JSON_Responce_from_Webmethod_To_Jquery_AJAX.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery/jquery-3.6.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnGetDetails" runat="server" Text="Get Details" />
<table>
<tr>
<td>Product Name:</td>
<td>
<asp:DropDownList ID="ddlProductName" runat="server">
<asp:ListItem Text="Select" Value="Select"></asp:ListItem>
<asp:ListItem Text="oneplus nord" Value="oneplus nord"></asp:ListItem>
<asp:ListItem Text="Vivo" Value="Vivo"></asp:ListItem>
<asp:ListItem Text="Moto" Value="Moto"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Amount:</td>
<td>
<input id="txtAmount" runat="server" type="text" />
</td>
</tr>
<tr>
<td>Manufacturing Year:</td>
<td>
<asp:TextBox ID="txtManufacturing_year" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Manufacturing Month:</td>
<td>
<asp:TextBox ID="txtManufacturing_month" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Color:</td>
<td>
<asp:TextBox ID="txtColor" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<script type="text/javascript">
$('#btnGetDetails').click(function (e) {
e.preventDefault();
//alert($("#DropDownList1 option:selected").text());
//var postData = {
// 'selectedData': $("#DropDownList1 option:selected").text()
//};
$.ajax({
type: "POST",
url: "/WebForm1.aspx/getProductDetails",
// data: JSON.stringify(postData),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("#ddlProductName").val(r.d.product_name);
$('#txtAmount').val(r.d.product_details.amount);
$('#txtManufacturing_year').val(r.d.product_details.manufacturing_year);
$('#txtManufacturing_month').val(r.d.product_details.manufacturing_month);
$('#txtColor').val(r.d.product_details.color);
console.log(r.d.product_details);
}
});
});
</script>
</div>
</form>
</body>
</html>
Step 4: go to "WebForm1.aspx.cs" and update code.
using Newtonsoft.Json;
using System;
using System.IO;
using System.Web.Hosting;
using System.Web.Services;
namespace JSON_Responce_from_Webmethod_To_Jquery_AJAX
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// JsonResponce();
}
[WebMethod]
public static ProductRoot getProductDetails()
{
string jsonString = File.ReadAllText(HostingEnvironment.MapPath("~/jsonFile.json"));
var content = jsonString;
var jsonResult = JsonConvert.DeserializeObject(content).ToString();
var result = JsonConvert.DeserializeObject<ProductRoot>(jsonResult);
return result;
}
}
public class ProductDetails
{
public int amount;
public int manufacturing_year;
public string manufacturing_month;
public string color;
}
public class ProductRoot
{
public string status;
public int status_code;
public string product_name;
public ProductDetails product_details;
}
}
Step 5: Now go and run the application it will display like below.
Step 6: Then click on "Get Details" button. it will hi the web method then it will read .json file and it will send response to jQuery. there we are assigning data to page controls. as below image.
Github Link: https://github.com/adi501/JSON-Response-from-Webmethod-To-Jquery-AJAX
