Блог

Главная - Вопросы по программированию - Всплывающее окно, отображающее один и тот же результат для каждого окна в представлении

Всплывающее окно, отображающее один и тот же результат для каждого окна в представлении

#c# #css #asp.net-mvc #razor #visual-studio-2015

#c# #css #asp.net-mvc #razor #visual-studio-2015

Вопрос:

У меня есть представление, отображающее обзор из таблицы обзоров базы данных. Сначала отображается краткая информация для каждого элемента (идентификатор отзыва, автор и дата создания), затем, если вы нажмете на идентификатор отзыва, рейтинг и отзывы отображаются во всплывающем окне. Проблема в том, что всплывающее окно предоставляет те же сведения (рейтинг и отзывы), что и первый отображаемый элемент. Рисунки ниже дают наглядное представление о проблеме

Когда вы нажимаете на номер отзыва: 5002 (это идентификатор отзыва (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="#">amp;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>

Я действительно не уверен, как решить эту проблему. Помощь была бы очень признательна

Комментарии:

1. Я думаю, проблема в том, что когда вы создаете всплывающие окна в своем цикле, вы присваиваете каждому всплывающему окну один и тот же идентификатор («reviewpopup»). Затем в каждой ссылке вы просто устанавливаете href=»#reviewpopup». Я думаю, именно по этой причине всегда открывается первое всплывающее окно. Попробуйте присвоить всплывающим окнам разные идентификаторы, например, добавив int (reviewpopup_1, reviewpopup_2 и т. Д.) И сделайте то же самое для ссылок, которые их открывают. Посмотрите, поможет ли это.

2. Что вы имеете в виду «Однако, если вы нажмете на номер обзора: 5006 (ID: 5006), содержимое всплывающего окна соответствует не 5006, а 5006»? Пожалуйста, отредактируйте свой пост.

3. Небольшое исправление / предложение к моему комментарию выше. На самом деле, я думаю, было бы намного приятнее использовать идентификаторы обзора вместо 1,2,3 … во всплывающих идентификаторах и ссылках.

4. @JakubRusilko У меня есть некоторое представление о том, что вы говорите, но не могли бы вы предоставить какой-нибудь пример того, как это сделать.oing. что нужно было сделать, так это создать идентификатор для всплывающего содержимого, который item.ReviewID и href = #item.ReviewID. Однако это все еще не работает

Ответ №1:

На HTML-странице может быть только один элемент с определенным идентификатором. В вашем случае я бы добавил Model.ReviewId атрибут id вашего всплывающего окна и атрибут href вашего <a> элемента.

 @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="#">amp;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="#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>

Ответ №2:

Мне удалось это выяснить 🙂 Вы можете использовать item.ReviewID в качестве идентификатора div

 {

    //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="#">amp;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>




}