1

プロジェクトのリストが記載されたページがあります。ユーザーがプロジェクトのリンクをクリックすると、ウィキの対応するページを指すiframeがスライドして表示され、その詳細情報が記載されたページが表示されます。事業。問題は、ページに多くのプロジェクトが含まれている可能性があるため、すべてのiframeをロードしたくないということです。スライドアウトする必要があるiframeのみをロードしたいので、スライドアウトします。

これは、これまでの私のビューの簡略版です（PartialViewです）。

@model IEnumerable<IT_Project_Manager.Models.ItProject>

<script type="text/javascript">
    $(function () {
        $("body").on("click", "#project-header", function () {
            var elem = $("~ #details", this);
            if (!$("> iframe", elem).attr("src")) {
                elem.slideDown(200);
                changeSrc(elem);
            }
            else elem.slideToggle(200);
        });
    });
</script>

@foreach (var item in Model)
{
    string wikiUrl = "https:/wiki-url/" + string.Join("+", item.Project_Name.Split(' '));

    <text>
    <script type="text/javascript">
        function changeSrc(elem) {
            $("> iframe", elem).attr("src", "@wikiUrl")
        }
    </script>
    </text>

    <div class="project">
        <div class="well well-small>
        <h4 id="project-header">
            <a>
                @Html.DisplayFor(model => item.Project_Name) 
                (@Html.DisplayFor(model => item.Program))
            </a>
        </h4>
        <p>@Html.DisplayFor(model => item.Description)</p>
        <div id="details" class="cell hide">
            <iframe seamless="seamless" height="400px"></iframe>
        </div>
        </div>
    </div>
}

ご覧のとおり、私のモデルはIEnumerableであるため、反復処理する必要がありますが、JavaScriptがアクセスする前に、foreachがサーバー上で発生します。したがって、スクリプトがスクリプトにアクセスできるようになるまでに、wikiUrlは常に最終的なプロジェクトのURLにのみ対応します。

だから私の質問は、javascriptがモデルのProject_Nameの各アイテムを取得できるようにして、正しいURLを生成して正しいiframeに割り当てることができるようにするにはどうすればよいですか？

4

1 に答える 1

1

私はかなりエレガントな解決策を見つけました。wikiUrlをカスタムデータ属性にバインドするだけで、JavaScriptは後で値をsrc属性に簡単にポイントできます。

動作するコードは次のようになります。

@model IEnumerable<IT_Project_Manager.Models.ItProject>

<script type="text/javascript">
    $(function () {
        $("body").on("click", "#project-header", function () {
            var wrapper = $("~ #details", this);
            var frame = $("> iframe", wrapper);
            if (!frame.attr("src")) {
                frame.attr("src", frame.attr("data-hidden-src"));
                wrapper.slideDown(200);
            }
            else wrapper.slideToggle(200);
        });
    });
</script>

@foreach(var item in Model)
{
    string wikiUrl = "https://wiki-url/" + string.Join("+", item.Project_Name.Split(' '));

    <div class="project">
        <div class="well well-small">
        <h4 id="project-header">
            <a>
                @Html.DisplayFor(model => item.Project_Name) 
                (@Html.DisplayFor(model => item.Program))
            </a>
        </h4>
        <p>@Html.DisplayFor(model => item.Description)</p>
        <div id="details" class="cell hide">
            <iframe seamless="seamless" height="400px" data-hidden-src="@wikiUrl"></iframe>
        </div>
        </div>
    </div>
}
于 2013-03-11T15:33:34.723 に答える