Display different details in a modal when clicking a button in a list MVC5
12,260
Calling bootbox with bootstrap 3 modal.
Example:
Model:
public class Restaurant
{
[Key]
public int Id { get; set; }
public string Name { get; set; }
public string Website { get; set; }
public string Address { get; set; }
}
Controller:
public class RestaurantController : Controller
{
public ActionResult Index()
{
var model =new List<Restaurant>();//load data from database
return PartialView(model);
}
[HttpGet]
public ActionResult Delails(int id)
{
var model = new Restaurant();//load data from database by RestaurantId
return PartialView(model);
}
}
View:
index.cshtml:
@model IEnumerable<Restaurant>
<table id="dataTable" class="table table-bordered table-hover">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Website)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
<th style="max-width:100px">Actions</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="dataItem">
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Website)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
<td>
<span class="btn btn-xs btn-primary btnEdit" id="[email protected]" onclick="createModal('@Url.Action("Details", "Restaurant" , new {id=item.Id })')">Details</span>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content" id="modelContent">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">
script>
<script>
function createModal(url){
$('#modelContent').load(url);
$('#myModal').modal('show');
}
</script>
Details.cshtml:
@model Restaurant
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fa fa-times-circle"></i></span>
</button>
<h4 class="modal-title">Details Record</h4>
</div>
<div class="modal-body">
<div>
<table class="table table-bordered">
<tr>
<td>@Html.DisplayNameFor(model => model.Name)</td>
<td>@Html.DisplayFor(model => model.Name)</td>
</tr>
<tr>
<td>@Html.DisplayNameFor(model => model.Website)</td>
<td>@Html.DisplayFor(model => model.Website)</td>
</tr>
<tr>
<td>@Html.DisplayNameFor(model => model.Address)</td>
<td>@Html.DisplayFor(model => model.Address)</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
</div>
I think it's helpful for you.
Author by
Smac
Updated on June 04, 2022Comments
-
Smac almost 2 years
Im trying to display more details about a restaurant when you click on a specific restaurant on a list. Currently I am displaying a list of restaurants in a list with a button saying more info. I want this information to show up in a modal
When I click on different restaurants in the list the information that is displayed in the modal is the same for each restaurant.
Here is the code that I'm using
@foreach (var item in Model) { <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <center><h2 id="modalTitle" class="modal-title">@item.RestaurantName</h2></center> </div> <div class="modal-body"> <ul class="details"> <li class="modalListItem"> <i class="fa fa-info-circle fa-5" aria-hidden="true"></i> <span>@item.RestaurantDescription</span> </li> <li class="modalListItem"> <i class="fa fa-envelope fa-5" aria-hidden="true"></i> <span>@item.RestaurantEmailAddress</span> </li> <li class="modalListItem"> <i class="fa fa-clock-o fa-5" aria-hidden="true"></i> <span>Opens from @item.OpeningTime.TimeOfDay - @item.ClosingTime.TimeOfDay</span> </li> <li class="modalListItem"> <i class="fa fa-list-alt fa-5" aria-hidden="true"></i> <span>@item.FurtherDetails</span> </li> <li class="modalListItem"> <i class="fa fa-map-marker fa-5" aria-hidden="true"></i> <span>@item.RestaurantAddress @Html.ActionLink("Directions", "GetDirections", new { id = item.RestaurantID }, new { @class = "btn btn-primary btn-xs" })</span> </li> <li class="modalListItem"> <i class="fa fa-bookmark-o fa-5" aria-hidden="true"></i> <span>Would you like to make a reservation? @Html.ActionLink("Reserve", "CreateReservation", new { id = item.RestaurantID }, new { @class = "btn btn-success btn-xs" })</span> </li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> }Here is the code which has the button
<table id="restaurantTable" class="table table-striped table-bordered" cellspacing="0" width="100%"> <thead> <tr> <th>Restaurant Name</th> <th>Type Of Restaurant</th> <th>Phone</th> <th>Address</th> <th>Options</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.RestaurantName) </td> <td> @Html.DisplayFor(modelItem => item.RestaurantType) </td> <td> @Html.DisplayFor(modelItem => item.RestaurantPhoneNo) </td> <td> @Html.DisplayFor(modelItem => item.RestaurantAddress) </td> <td> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">More info</button> | @*@Html.ActionLink("More Info", "Details", new { id = item.RestaurantID }, new { @class = "btn btn-info btn-xs" }) |*@ @Html.ActionLink("Reserve", "CreateReservation", new { id = item.RestaurantID }, new { @class = "btn btn-success btn-xs" }) | @Html.ActionLink("Directions", "GetDirections", new { id = item.RestaurantID }, new { @class = "btn btn-primary btn-xs" }) | @Html.ActionLink("Review", "Review", new { id = item.RestaurantID }, new { @class = "btn btn-primary btn-xs" }) </td> </tr> } </tbody> </table> }