CODEWITHSUNDEEP
c#cssasp.net-mvcrazorvisual-studio-2015
Moose TheTitan
Moose TheTitan

Reputation: 113

Pop window displaying same result for each window in View

I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem

When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback

Problem

However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002 Problem

Here is my code for the View

@{
    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="#">&times;</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>

I really not sure how to solve this issue. Help would be greatly apprececiated

Upvotes: 0

Views: 59

Answers (2)

Moose TheTitan
Moose TheTitan

Reputation: 113

I managed to figure it out:) You can use the item.ReviewID as a 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="#">&times;</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>




}

Upvotes: 0

Paweł Hemperek
Paweł Hemperek

Reputation: 1180

On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.

@foreach (var item in Model)
{
//Popup window content
<div id="[email protected]" 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="#">&times;</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="#[email protected]">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>
}

Also href attribute in <li> element is invalid, so you should remove it.

Desired result would be

<div id="reviewpopup_1">
//div content here
</div>

and later

<a href="#reviewpopup_1">Review Number: @Html.DisplayFor(modelItem => item.ReviewID)</a>

Upvotes: 1

Related Questions