Description:
In this example we explain that how
to return partial view from controller using AJAX call in asp.net MVC.or how to
load or populate the partial view from controller using AJAX. Or how to call
partial view at client side using jQuery Ajax call in asp.net MVC.or how to
render partial view from controller using jQuery Ajax call at client side.
Here we demonstrate that how to
return or fetch partial view from controller to razor view using jQuery Ajax
call in MVC.
Here we have one form for the
Employee and we call the method by passing employee ID through jQuery Ajax call
and it will return the partial view with employee’s details.
Controller:
public class
EmployeeController : Controller
{
public ActionResult Index()
{
NorthwindEntities
entities = new NorthwindEntities();
return
View(from Employee in
entities.Employees.Take(10)
select Employee);
}
[HttpPost]
public ActionResult Details(string
EmployeeId)
{
NorthwindEntities
entities = new NorthwindEntities();
return
PartialView("Details",
entities.Employees.Find(EmployeeId));
}
}
View:
@model IEnumerable<Partial_View_MVC.Employee>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport"
content="width=device-width"/>
<title>Return Partial View from Controller using AJAX in
ASP.Net MVC</title>
</head>
<body>
<h4>Employees</h4>
<hr/>
<table
cellpadding="0"
cellspacing="0"
id="EmployeeGrid">
<tr>
<th>EmployeeID</th>
<th>Contact Name</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
@foreach (Employee Employee in Model)
{
<tr>
<td>@Employee.EmployeeID</td>
<td>@Employee.ContactName</td>
<td>@Employee.City</td>
<td>@Employee.Country</td>
<td><a class="details" href="javascript:;">View</a></td>
</tr>
}
</table>
<div
id="dialog"
style="display: none">
</div>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"
type="text/javascript"></script>
<link
href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script
type="text/javascript">
$(function
() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View
Details"
});
$("#EmployeeGrid
.details").click(function () {
var
EmployeeId = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "POST",
url: "/Home/Details",
data: '{EmployeeId: "' + EmployeeId + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function
(response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
PartialView:
@model Partial_View_MVC.Employee
<table cellpadding="0"
cellspacing="0"
border="0">
<tr>
<td valign="top"><b>@Html.DisplayNameFor(model => model.Address):</b></td>
<td>
@Html.DisplayFor(model =>
model.Address)
<br/>
@Html.DisplayFor(model =>
model.City),
@Html.DisplayFor(model =>
model.PostalCode)
<br/>
@Html.DisplayFor(model =>
model.Country)
</td>
</tr>
</table>
0 comments:
Post a Comment