我有一个视图显示来自数据库评论表的评论。首先显示每个项目的简要信息(ReviewID,作者和创建日期),然后如果单击ReviewID,则会在弹出窗口中显示评级和反馈。问题是弹出窗口提供与显示的第一个项目相同的详细信息(评级和反馈)。下面的图片给出了问题的直观表示
当您点击查看号码:5002(这是表格中的ReviewID(ID:5002))时,会生成一个弹出窗口,显示ReviewID的评级和反馈
但是,如果您点击Review Number:5006(ID:5006),则弹出窗口中的内容不是5006对应的内容,而是5002
这是我的视图代码
@{
ViewBag.Title = "Index";
Layout = "";
}
@model PagedList.IPagedList<Siza.Models.Review>
@using PagedList.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
@foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: @Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: @Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
@Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center"><a href="#reviewpopup">Review Number: @Html.DisplayFor(modelItem => item.ReviewID)</a></h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: @Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: @Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
@Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing @Model.FirstItemOnPage to @Model.LastItemOnPage of @Model.TotalItemCount Reviews
</td>
</tr>
</table>
我真的不确定如何解决这个问题。帮助将大大有助于
答案 0 :(得分:1)
在HTML页面上,只能有一个具有特定ID的元素。在您的情况下,我会将Model.ReviewId
添加到您的<a>
元素的popup和href属性的id属性中。
@foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_@Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: @Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: @Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
@Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center"><a href="#reviewpopup_@Model.ReviewID">Review Number: @Html.DisplayFor(modelItem => item.ReviewID)</a></h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: @Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: @Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
href
元素中的<li>
属性也无效,因此您应将其删除。
期望的结果将是
<div id="reviewpopup_1">
//div content here
</div>
以后
<a href="#reviewpopup_1">Review Number: @Html.DisplayFor(modelItem => item.ReviewID)</a>
答案 1 :(得分:0)
我设法解决了:)你可以使用item.ReviewID作为div ID
{
//Popup window content
<div id="@item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: @Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
@Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center"><a href="#@item.ReviewID">Review Number: @Html.DisplayFor(modelItem => item.ReviewID)</a></h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: @Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: @Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}