Question

所以我正在开发这个项目，我在MVC 4 ListView中显示一个列表。我的一个字段有大量数据，所以我没有在表格中显示这些信息，而是制作了一个CSS模式窗口来显示。这是我的HTML片段，带有ListView和可点击的模态视图：

                <table class="srrTable">
                    <tr>

                        <th>
                             Dwelling Id
                        </th>
                        <th>
                             Postal Address Id
                        </th>
                        <th>
                            Insuance Policy Id
                        <th>
                            XML Text
                       </th>
                    </tr>

                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.DwellingIdentifier)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.PostalAddressIdentifier)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.InsurancePolicyIdentifier)
                            </td>
                            <td>
                                <a class="xmllabel" href="#xmlmodal">View</a>
                                <div id="xmlmodal">
                                    <div class="xmlmodal">
                                        <a class="close" href="#">Close</a>
                                        <h2>XMLText</h2>
                                        <p>@Html.DisplayFor(modelItem => item.XMLText)</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    }

                </table>

我在this take上使用了this tutorial来制作模态窗口。

但是，当我单击我的链接以显示XMLText时，它会显示所有行的第一个XMLText，它们应该是不同的。如果我正常显示没有div，则所有XMLTexts都是列的正确元素。我想我不明白为什么这不起作用（因为它是一个隐藏的div？因为链接？）而且只是在寻找一个解释，也许是关于如何让我的XMLText正确显示的一些指导。

对于CSS，我完全按照教程进行操作，请参阅我的链接。我要感谢任何帮助，谢谢！

RE-UPDATE：

执行下面的建议后，我表格中的字段如下所示：

.
.
.
                            <div class="Hidden">@(counter++)</div>
                            <td>
                            <a class="xmllabel" href="#xmlmodal@(counter)">View</a>
                            <div id="xmlmodal@(counter)" class="showhidexmlmodal">
                                <div class="showhidexmlmodal@(counter)">
                                    <a class="close" href="#">Close</a>
                                    <h2>XMLText</h2>
                                    <p>@Html.DisplayFor(modelItem => item.XMLText)</p>
                                </div>
                            </div>
                            </td>
.
.
.

我按照建议添加了.showhidexmlmodal并更新了我的CSS：

a.xmllabel {
  display: block;
  margin: 20px auto;
  width: 50px;
  height: 50px;
  background: #232323;
  color: #fff;
  text-align: center;
  font: 14px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
}

a.xmllabel:hover {
  background: #444;
  cursor: pointer;
}

input#xmltoggle {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

#xmlmodal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    -webkit-transition: opacity 1s ease, z-index 1s ease;
    -moz-transition: opacity 1s ease, z-index 1s ease;
    -ms-transition: opacity 1s ease, z-index 1s ease;
    -o-transition: opacity 1s ease, z-index 1s ease;
    transition: opacity 1s ease, z-index 1s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.showhidexmlmodal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: auto;
  padding: 20px;
  width: 500px;
  height: 200px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7 );

  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);

  -webkit-transition: opacity 1s ease, z-index 1s ease;
  -moz-transition: opacity 1s ease, z-index 1s ease;
  -ms-transition: opacity 1s ease, z-index 1s ease;
  -o-transition: opacity 1s ease, z-index 1s ease;
  transition: opacity 1s ease, z-index 1s ease;
}

.showhidexmlmodal a.close {
    position: absolute;
    display: block;
    top: 7px;
    right: 7px;
    background: #232323;
    color: #fff;
    text-align: center;
    font: 14px/1.5 Helvetica, Verdana, sans-serif;
    text-decoration: none;
    padding: 0 5px;
}

.showhidexmlmodal h2 {
  color: #232323;
  text-transform: uppercase;
  font: 35px/1.5 Helvetica, Verdana, sans-serif;
}

.showhidexmlmodal p {
  color: #444;
  text-align: left;
  font: 13px/1.8 Georgia, Times, sans-serif;
}

.showhidexmlmodal:target, .showhidexmlmodal:target > .xmlmodal {
  opacity: 1;
  z-index: 2;
}

@media all and (max-width: 767px) {
    .xmlmodal {
        width: 300px;
        height: 250px;
    }

        .xmlmodal h2 {
            font: 30px/1.5 Helvetica, Verdana, sans-serif;
            text-transform: uppercase;
        }

    .xmlmodal p {
        font: 12px/1.8 Georgia, Times, sans-serif;
    }
}

此代码现在显示正确的XML文本，但我的黑色封面#xmlmodal未显示。有什么建议吗？

它忽略了与xmlmodal id一起使用的css。

（对新观众说：我对网络编程和div的概念非常陌生）

Answer 1

您可以使用计数器使div的ID唯一。

我没有方便的Visual Studio，但我认为它是这样的：

@{var counter = 0;}
@foreach (var item in Model)
  .
  .
  .
    @{counter++;}
    <a class="xmllabel" href="#xmlmodal@(counter)">View</a>
    <div id="xmlmodal@(counter)" class="showhidexmlmodal">

希望这有帮助！

修改：根据以下评论，我在div添加了id的课程，因此您可以使用CSS查明这些课程。使用#xmlmodal简单替换所有.showhidexmlmodal。（当然，你可以使用你想要的任何类名作为日志，因为它不是CSS中的现有类。）
注意：仅在CSS文件中，而不是在上面示例中的href中！

在循环列表中使用div

RE-UPDATE：

1 个答案: