Pass Data From View To Controller Using Ajax In MVC

July 18 2020 by Admin

In this article, we will explain how to pass data from view to controller using ajax in MVC controller with an example and sample code.

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

Step -1

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

How to pass data from view to controller using ajax in mvc

Step -2

Select new project type.

Index.cshtml

We have provided html code below.

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<title>Pass Data From View To Controller Using Ajax In MVC</title>

$(document).ready(function () {

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

var Stock = { stockId: $("#stockId").val(), StockName: $("#StockName").val(), StockPrice: $("#StockPrice").val() };

$.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) {

alert(data.stockId + "-" + data.StockName + "-"+ data.StockPrice);

}

});

</script>

</head>

<body>

<p>

StockId :<input class="form-control" type="text" placeholder="Id" id="stockId">

<br />

StockName : <input class="form-control" type="text" placeholder="Name" id="StockName">

<br>

StockPrice : <input class="form-control" type="number" placeholder="StockPrice" id="StockPrice">

<br>

</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(Stockmodel Stock)

{

return Json(Stock);

}

Screenshot

Ajax
MVC

Home > MVC > Pass Data From View To Controller Using Ajax In MVC