In
this example we explain that how to call controller Action Method from view
using JavaScript in asp.net MVC.so here how to call controller’s Action method
at client side using JavaScript how to call controller Action method from the
Razor View using JavaScript in asp.net MVC.
Simply
controller action method will be called from the view with the use of the
Ajax.BeginForm extension method which allow to call controller action method
using JavaScript in MVC razor.
Below
is the code that demonstrate how call Controller’s action method using
JavaScript in MVC.
public class EmployeeController : Controller
{
// GET: Employee
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod(EmployeeModel employee)
{
int employeeId = employee.EmployeeId;
string name = employee.Name;
string Designation = employee.Designation;
return Json(employee);
}
}
View:
@model Ajax_Form_Post_MVC.Models.EmployeeModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Ajax.BeginForm("AjaxMethod", "Employee",
new AjaxOptions
{
OnSuccess = "OnSuccess",
OnFailure = "OnFailure",
LoadingElementId = "progress"
}))
{
<table id="tblEmployees" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" align="center">Employee Details</th>
</tr>
<tr>
<td>EmployeeId: </td>
<td>
@Html.TextBoxFor(m => m.EmployeeId)
</td>
</tr>
<tr>
<td>Name: </td>
<td>
@Html.TextBoxFor(m => m.Name)
</td>
</tr>
<tr>
<td>Designation: </td>
<td>
@Html.TextBoxFor(m => m.Designation)
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
}
<div id="progress" class="modal">
<div class="center">
<img src="~/images/loader4.gif"/>
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function OnSuccess(response) {
var message = "Employee Id: " + response.EmployeeId;
message += "\nName: " + response.Name;
message += "\nDesignation:
" + response.Designation;
alert(message);
}
function OnFailure(response) {
alert("Error
occured.");
}
</script>
</body>
</html>
0 comments:
Post a Comment