How to call controller method from view in MVC using jquery

July 06 2020 by Admin

In this article, we will explain how to call controller method from view in MVC using jquery with an example and sample code.

In this article, we will explain how to call controller method from view in MVC using jquery 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) array data.

Step -1

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

How to call controller method from view in mvc using jquery

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 controller method from view in mvc using jquery</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 controller method from view in MVC using jquery