ASP MVC Partial View popup Display Image in bootstrap modal using jquery ajax
Output:
Class and Action:
Output:
public class EmployeeViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string
ImagePath { get; set; }
//public string
EmployeeLastName { get; set; }
}
public class StudentController : Controller
{
// GET: Student
public ActionResult Index()
{
return View(emp);
}
[HttpPost]
public ActionResult Index(EmployeeViewModel emp)
{
return View();
}
public ActionResult Details(int
StudentId)
{
return PartialView("Details", emp.Where(x => x.Id == StudentId).FirstOrDefault());
}
List<EmployeeViewModel> emp = new List<EmployeeViewModel>()
{
new EmployeeViewModel(){Id=1, Name="Jhon",ImagePath="~/Content/Images/1.jpg"},
new EmployeeViewModel(){Id=2, Name="Will",ImagePath="~/Content/Images/2.jpg"},
new EmployeeViewModel(){Id=3, Name="Paul",ImagePath="~/Content/Images/3.jpg"},
new EmployeeViewModel(){Id=4, Name="keno",ImagePath="~/Content/Images/4.jpg"},
};
}
Index View:
@model IEnumerable<MvcTechnoTips.Web.Models.ViewModel.EmployeeViewModel>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<divc class="container">
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>Action</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<a href="#" onclick="DisplayStudentImage(@item.Id)" class="text-success">View Image</a>
</td>
</tr>
}
</table>
</divc>
<div class="container" style="margin-top:10px">
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</a>
<a href="#" class="btn btn-success" onclick="ShowEmployee('Add')">Add Student</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3 class="modal-title">Partial View Example</h3>
</div>
<div class="modal-body" id="myModalBodyDiv">
</div>
<div class="modal-footer">
<a href="#" class="btn
btn-default" data-dismiss="modal">Cancel</a>
</div>
</div>
</div>
</div>
</div>
<script>
//$.ajaxSetup({
// cache: false // Disable caching of AJAX responses
//});
var ShowEmployee = function (employeeId) {
$.ajax({
type: "get",
url: "/Student/AddStudent",
success: function (response) {
$("#myModalBodyDiv").html(response);
$("#myModal").modal("show");
}
})
}
var DisplayStudentImage = function (Id) {
$.ajax({
cache: false,
type: "get",
url: "/Student/Details",
data: { StudentId: Id },
success: function (response) {
$("#myModalBodyDiv").html(response);
$("#myModal").modal("show");
}
})
}
</script>
Details: partial View
@model MvcTechnoTips.Web.Models.ViewModel.EmployeeViewModel
<div class="row">
<div class="thumbnail">
<a href="" target="_blank">
<img src=@Url.Content(Model.ImagePath) alt="Consumer" style="width:100%">
<div class="caption">
<table class="table table-striped">
<tr>
<td>Id</td>
<td>@Html.DisplayFor(x => x.Id)</td>
</tr>
<tr>
<td>Name</td>
<td>@Html.DisplayFor(x => x.Name)</td>
</tr>
</table>
</div>
</a>
</div>
</div>
