In this example we explain that how
to submit form without Page Refresh in ASP>NET MVC.or how to insert data
without form refreshing page in MVC.how to submit razor view form data without
refresh page in asp.net MVC.
Here we use AJAX.BefinForm method
to submit the form data without page refresh in Asp.Net 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