0

だから私は現在、MVC 4 ListView でリストを表示するこのプロジェクトに取り組んでいます。私のフィールドの 1 つに大量のデータがあるため、この情報をテーブルに表示する代わりに、表示する CSS モーダル ウィンドウを作成しました。ListView とクリック可能なモーダル ビューを使用した HTML のスニペットを次に示します。

                <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>

このチュートリアルのこのテイクを使用して、モーダル ウィンドウを作成しました。

ただし、リンクをクリックして XMLText を表示すると、すべての行の最初の XMLText が異なるはずのときに表示されます。div なしでこれを通常どおり表示していた場合、すべての XMLTexts が列の正しい要素です。なぜこれが機能しないのか理解できないと思います (リンクのせいで隠し div になっているためですか?) 説明と、XMLText を適切に表示する方法についてのガイダンスを探していました。

CSSに関しては、チュートリアルに正確に従ったので、私のリンクを参照してください。助けていただければ幸いです、ありがとう！

再更新:

私のテーブルのフィールドの下の提案を実装すると、次のようになります。

.
.
.
                            <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 を無視します。

（新しい視聴者への免責事項：私はWebプログラミングとdivsの概念に非常に慣れていません）

4

1 に答える 1

0

カウンターを使用して、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 の既存のクラスではないためです。)
注:href上記の例の sではなく、CSS ファイルでのみ使用してください。

于 2013-07-23T19:34:16.227 に答える