Hi mukesh1,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of NorthWind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entities = new NorthwindEntities();
return View(entities.Employees.Take(5).ToList());
}
[HttpGet]
public ActionResult Details(int? id)
{
NorthwindEntities entities = new NorthwindEntities();
return PartialView("EmployeeDetails", entities.Employees.Where(e => e.EmployeeID == id).FirstOrDefault());
}
}
Index View
@model IEnumerable<_Render_PartialView_jQuery.Employee>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table class="table">
<tr>
<th>@Html.DisplayNameFor(model => model.EmployeeID)</th>
<th>@Html.DisplayNameFor(model => model.FirstName)</th>
<th>@Html.DisplayNameFor(model => model.LastName)</th>
<th>Action</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.EmployeeID)</td>
<td>@Html.DisplayFor(modelItem => item.FirstName)</td>
<td>@Html.DisplayFor(modelItem => item.LastName)</td>
<td><input type="button" name='@item.EmployeeID' value="Details" id="btnDetails" /></td>
</tr>
}
</table>
<br />
<div id="dvPartialView"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[id*=btnDetails]').on('click', function () {
$.ajax({
url: '@Url.Action("Details", "Home")',
dataType: "html",
data: { "id": $(this).attr('name') },
type: "GET",
contentType: "application/json",
success: function (response) {
$('#dvPartialView').html(response);
},
error: function (err) {
alert(err.responseText);
}
});
});
});
</script>
</body>
</html>
EmployeeDetails Partial View
@model _Render_PartialView_jQuery.Employee
<b>Address of @Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName) is :</b>
<hr />
@Html.DisplayFor(model => model.Address)
<br />
@Html.DisplayFor(model => model.City),
@Html.DisplayFor(model => model.PostalCode)
<br />
@Html.DisplayFor(model => model.Country)
Screenshot
