jQuery Ajax Call With JSONResult in ASP.NET MVC

May 19 2021 by Admin

In this article, we will explain how to use jQuery Ajax Call With JSONResult in ASP.NET MVC with an example and a sample code.

In this article, we will explain how to use jQuery Ajax Call With JSONResult in ASP.NET MVC with an example and a sample code. In this example, we are using the Jquery document load function. on the load we using Ajax Post Method to get data from the server-side.

Step -1

Open Visual Studio and select Create a new Project.

jQuery Ajax Call With JSONResult in ASP.NET MVC

Step -2

Select new Application type.

Step -3

Enter your project name and Set project location.

Step -4

Select new Web Application type.

Index.cshtml

We are using map function to make HTML.

ViewData["Title"] = "jQuery Ajax Call With JSONResult in ASP.NET MVC–AspSolution.net ";

}

$(document).ready(function () {

$.ajax({

type: "POST",

url: '@Url.Action("GetJsonData", "Home")',

data: "",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

let output = data.map(i => "<tr><td>" + i.stockId + "</td><td>" + i.stockName + "</td><td>" + i.stockPrice + "</td></tr>");

$("#output").html(output);

}

});

</script>

<h1 class="display-4">Stock List</h1>

<th>Stock Id</th>

<th> Stock Name</th>

<th> Stock Price</th>

</tr>

</table>

</div>

Stockmodel.cs

public class Stockmodel

{

public int stockId { get; set; }

public string StockName { get; set; }

public decimal StockPrice { get; set; }

}

HomeController

public class HomeController : Controller

{

public IActionResult Index()

{

return View();

}

public JsonResult GetJsonData()

{

return Json(GetStock());

}

[NonAction]

private List<Stockmodel> GetStock()

{

List<Stockmodel> model = new List<Stockmodel>();

model.Add(new Stockmodel { stockId = 1, StockName = "Rel", StockPrice = 1200 });

model.Add(new Stockmodel { stockId = 2, StockName = "Relaxo", StockPrice = 650 });

model.Add(new Stockmodel { stockId = 3, StockName = "Tcs", StockPrice = 2100 });

model.Add(new Stockmodel { stockId = 4, StockName = "IGL", StockPrice = 500 });

model.Add(new Stockmodel { stockId = 5, StockName = "SBI", StockPrice = 200 });

return model;

}

Output

Download

Table
JSON
Ajax

Home > MVC > jQuery Ajax Call With JSONResult in ASP.NET MVC