ビューを使用して、データベースレビューテーブルのレビューを表示しています。各項目の簡単な情報が最初に表示され(ReviewID、AuthorおよびDate Create)、ReviewIDをクリックすると、評価およびフィードバックがポップアップで表示されます。問題はポップアップで、表示される最初の項目と同じ詳細(評価とフィードバック)を示します。ポップアップが作成した表示ReviewIDの評価とフィードバックビュー内の各ウィンドウで同じ結果を表示するポップウィンドウ
です:(5002)表中のこれはReviewID(IDです)5002:あなたのレビュー数をクリックすると画像が以下の問題の視覚的な表現を与えます
あなたはレビューの数でクリックした場合しかし: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>
この問題を解決する方法は本当にわかりません。ヘルプが大きく寄与する
をitem.ReviewIDを使用することができます:)それを把握するために管理あなたのループ内にポップアップを構築するときは、すべてのポップアップに同じid( "reviewpopup")を渡すことが問題だと思います。それからすべてのリンクでhref = "#reviewpopup"を設定するだけです。私はこれがいつも開く最初のポップアップである理由だと思う。たとえば、int(reviewpopup_1、reviewpopup_2など)を追加するなど、ポップアップに異なるIDを付けて、それらを開くリンクについても同じ操作を行います。それが役立つかどうかを見てください。 –
どういう意味ですか?「レビュー番号:5006(ID:5006)をクリックすると、ポップアップの内容が5006に対応するのではなく5006」になりますか?あなたの投稿を編集してください。 –
上記の私のコメントに対する小さな修正/提案。実際には、ポップアップIDとリンクで1,2,3 ...の代わりにReview IDを使用する方がはるかに良いでしょう。 –