Description:
In this example we explain that how
to pass data from View to Controller using AJAX in asp.net MVC.or how to send
data from view to controller in MVC 4.or how to send form data from view to
controller in mvc.or how to send web form data or its form object from view to
controller in asp.net MVC.
Here we use AJAX.BeginForm method
to pass data from view to controller in MVC.
public class
EmployeeModel
{
public int EmployeeId { get;
set; }
public string EmployeeName { get;
set; }
public string Gender { get; set; }
public string City { get; set; }
}
Controller:
public class EmployeeController
: Controller
{
public ActionResult Index()
{
return
View();
}
[HttpPost]
public JsonResult AjaxMethod(EmployeeModel
employee)
{
int
employeeId = employee.EmployeeId;
string
name = employee.EmployeeName;
string
gender = employee.Gender;
string
city = employee.City;
return
Json(employee);
}
}
View:
@model
Ajax_Form_Post_MVC.Models.EmployeeModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Pass (Send) data from View to Controller using
AJAX in ASP.Net MVC</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.EmployeeName)
</td>
</tr>
<tr>
<td>Gender: </td>
<td>
@Html.DropDownListFor(m
=> m.Gender, new List<SelectListItem>
{ new
SelectListItem{Text="Male", Value="M"},
new SelectListItem{Text="Female",
Value="F"}}, "Please select")
</td>
</tr>
<tr>
<td>City: </td>
<td>
@Html.TextBoxFor(m =>
m.City)
</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 += "\nEmployeeName:
" + response.EmployeeName;
message += "\nGender:
" + response.Gender;
message += "\nCity:
" + response.City;
alert(message);
}
function
OnFailure(response) {
alert("Error
occured.");
}
</script>
</body>
</html>
0 comments:
Post a Comment