How to Call Action Method Using Ajax in MVC

September 02 2020 by Admin

In this article, we will explain how to call an action method using ajax in MVC with an example and sample code.

In this article, we will explain how to call an action method using ajax in MVC with an example and sample code. In this example, we are using the Jquery button click event. on the click, we using Ajax Post Method to send (pass) list of data.

Step -1

Open Visual Studio. Click on the file in the menu and select new Project .

how to call action method using ajax in mvc

Step -2

Select new project type.

Index.cshtml

We have provided razor view html below. We are binding the reposne in html table.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>How to Call Action Method Using Ajax in MVC.</title>

$(document).ready(function () {

$("#btnSend").click(function () {

var Stock = [{ stockId: 1, StockName: 'Rel', StockPrice: 1520 }

, { stockId: 2, StockName: 'Relaxo', StockPrice: 520 }

, { stockId: 3, StockName: 'SBI', StockPrice: 120 }];

$.ajax({

type: "POST",

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

dataType: "json",

data: JSON.stringify({ Stock }),

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);

$("#tbstock").show();

}

});

</script>

</head>

<body>

<p>

<th>Stock Id</th>

<th> Stock Name</th>

<th> Stock Price</th>

</tr>

</table>

</p>

<br />

</body>

</html>

Models

public class Stockmodel

{

public int stockId { get; set; }

public string StockName { get; set; }

public decimal StockPrice { get; set; }

}

StockController

public class StockController : Controller

{

// GET: Stock

public ActionResult Index()

{

return View();

}

public JsonResult GetJsonData(List<Stockmodel> Stock)

{

return Json(Stock);

}

Screenshot

Button
Ajax

Home > MVC > How to Call Action Method Using Ajax in MVC