1

我有一个包含项目列表的页面，我希望这样当用户单击项目链接时，它会滑出一个 iframe，该 iframe 指向我们 wiki 上的相应页面，该页面将包含一个包含更多详细信息的页面项目。问题是，一个页面可能包含许多项目，所以我不想加载每个 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，所以我必须遍历它，但是 foreach 发生在服务器上，在 javascript 有机会访问它之前。所以当脚本可以访问它时，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 回答