Loading iframe on click with dynamically generated URL from ASP.NET MVC Model

Question

I have page with a list of projects, and I would like it so that when the user clicks on a project link, it slides out an iframe that points to the corresponding page on our wiki that will have a page with more detailed info for that project. The problem is, a page may contain many projects, so I don't want to load every single iframe. I only want to load the iframes that need to be slided out, as they are slid out.

This is a stripped-down version of my view so far (it's a 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>
}

As you can see my Model is an IEnumerable so I have to iterate through it, but the foreach occurs on the server, before the javascript has any chance to access it. So by the time the script can access it, wikiUrl always only corresponds to the final project's URL.

So I guess my question is, how do I make it so the javascript is able to get each item in the Model's Project_Name, so that I can generate and assign the correct URL to the correct iframe?

Answer 1

I figured out a pretty elegant solution. Simply binding the wikiUrl to a custom data attribute allows the javascript to easily just point the value to the src attribute later.

The working code now reads:

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