Asp.net MVC 實作FancyBox(4)

今天沒廢話

---

先到FancyBox下載套件
將js及css放入如圖

在/App_Start/BundleConfig.cs加入

bundles.Add(new ScriptBundle("~/bundles/fancybox").Include("~/Scripts/fancybox/jquery.fancybox.js"));
bundles.Add(new StyleBundle("~/Content/fancybox").Include("~/Content/fancybox/jquery.fancybox.css"));

View的部份新增兩個一個為主頁面(Index)一個為被呼叫頁面(FancyBox)
加入jQuery參考及FancyBox參考
ActionLink寫法如下

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
@Scripts.Render("~/bundles/fancybox")
@Styles.Render("~/Content/fancybox")

@Html.ActionLink("[新增]", "FancyBox", "Home", null, new { @class = "fancybox fancybox.iframe" })
<script>
    $(function () {
        $('.fancybox').fancybox();
    });
</script>