当您单击列表中的特定餐厅时，我尝试显示有关餐厅的更多详细信息。目前，我正在列表中显示餐厅列表，并带有一个显示更多信息的按钮。我希望此信息显示在模式中
当我单击列表中的不同餐厅时，每个餐厅的模式中显示的信息都是相同的。
这是我正在使用的代码
@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>
}
这是带有按钮的代码
<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>
}
最佳答案
调用bootbox使用 Bootstrap 3 模态。
示例:
型号:
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);
}
}
查看:
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="edit_@item.Id" 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>
详细信息.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>
我认为这对你有帮助。
关于asp.net-mvc - 单击列表 MVC5 中的按钮时在模式中显示不同的详细信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43837781/