加載iframe上點擊動態生成的URL從ASP.NET MVC模型

我有一個項目列表的頁面，我希望它，以便當用戶點擊一個項目鏈接時，它滑出一個iframe指向我們wiki上的相應頁面將有一個包含該項目更詳細信息的頁面。問題是，一個頁面可能包含許多項目，所以我不想加載每一個iframe。我只想加載需要滑出的iframe，因爲它們被滑出。加載iframe上點擊動態生成的URL從ASP.NET MVC模型

這是我的觀點的精簡版本，到目前爲止（這是一個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？

來源

2013-03-08 Maltor

我想出了一個非常優雅的解決方案。只需將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-11 15:33:34 Maltor

加載iframe上點擊動態生成的URL從ASP.NET MVC模型

回答

相關問題