如何獲得fancybox與mvc4剃刀中的html動作鏈接

我試圖顯示一個fancybox模態彈出窗口，當一個動態創建的html動作鏈接是從表內單擊。我用剃刀使用MVC4。我已經嘗試了從閱讀帖子在stackoverflow和其他網站上的多件事，但沒有任何工作。我對MVC4和javascript/jquery相當陌生。如何獲得fancybox與mvc4剃刀中的html動作鏈接

我得到的當前錯誤是：當加載搜索頁面時，對象不支持屬性或方法'fancybox'。

_Layout.cshtml頁：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title</title> 
    @*<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />*@ 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/Scripts/js") 
<link rel="stylesheet" href="~/Content/style.css" type="text/css" /> 
    <!-- Add jQuery library --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

<link rel="stylesheet" href="~/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> 
<script type="text/javascript" src="~/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script> 

<link rel="stylesheet" href="~/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> 
<script type="text/javascript" src="~/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> 
<script type="text/javascript" src="~/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script> 

<link rel="stylesheet" href="~/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> 
<script type="text/javascript" src="~/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#divForm").fancybox({ 
     'autoScale': false, 
     'autoDimensions': true, 
     'transitionIn': 'none', 
     'transitionOut': 'none', 
     'hideOnOverlayClick': false, 
     'hideOnContentClick': true, 
     'showCloseButton': true, 
     'type': 'ajax' 
    }); 
}); 
</script> 
</head> 
<div id="body"> 
     @RenderSection("featured", required: false) 
     <section class="content-wrapper main-content clear-fix"> 
      @RenderBody() 
     </section> 
    </div> 
    <footer> 
     <div class="content-wrapper"> 
      <div class="float-left"> 
       <p>&copy; @DateTime.Now.Year - PipelineRx</p> 
      </div> 
     </div> 
    </footer> 

    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body>

搜索控制器

public ActionResult Index() 
{ 
    return View(); 
} 

public ActionResult Popup() 
{ 
    return View(); 
}

Index.cshtml 包含在列

actionlinks

@using (Html.BeginForm("Index", "Search", FormMethod.Get, new { name = "searchForm", id = "searchForm" })) 
{ 
<div> 
    <table id="orderSheetList" class="table-standard"> 
     <thead> 
      <tr> 
       <th>Last Name<input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'LastName','True');" /> 
        <input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'LastName','False');" /> 
       </th> 
       <th>First Name<input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'FirstName','True');" /> 
        <input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'FirstName','False');" /> 
       </th> 
       <th>Received Date Time<input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'ReceivedDateTime','True');" /> 
        <input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'ReceivedDateTime','False');" /> 
       </th> 
       <th>Client Name<input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'ClientFullName','True');" /> 
        <input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'ClientFullName','False');" /> 
       </th> 
       <th>XML</th> 
       <th>Transaction ID<input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'TransactionID','True');" /> 
        <input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'TransactionID','False');" /> 
       </th> 
       <th>ID<input type="image" src='@Url.Content("~/Images/up.png")' onclick="_search(0,'ID','True');" /> 
        <input type="image" src='@Url.Content("~/Images/down.png")' onclick="_search(0,'ID','False');" /> 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      @foreach (item in Model.Orders) 
      { 
      <tr class="clickable"> 
       <td> 
        @Html.Encode(item.LastName)</td> 
       <td> 
        @Html.Encode(item.FirstName)</td> 
       <td> 
        @Html.Encode(item.DateTime)</td> 
       <td> 
        @Html.Encode(item.ClientFullName) 
       </td> 
       <td> 
        @*@Html.Encode(item.XML)*@ 
        @Html.ActionLink("XML", "Popup", "Search", null, new {Class = "fancybox"}) 
       </td> 
       <td> 
        @Html.Encode(item.TransactionID) 
       </td> 
       <td> 
        @Html.Encode(item.ID)</td> 
      </tr> 
      } 
     </tbody> 
    </table> 
</div> 
}

Popup.cshtml 一種用於後面將要修改的頁面的fancybox。

<text> 
     <script type="text/javascript"> 
      $(function() { 
       $.fancybox.open({ "content": "This is a popup" }); 
      }); 
     </script> 
</text> 

<div id="divForm"></div>

謝謝。

來源

2013-08-22 spars

是否在彈出窗口中顯示來自'item.XML'的XML？ – asymptoticFault

是的，一些XML數據存儲在頁面使用的模型中，我想在彈出窗口中顯示它。我還沒有添加用於將XML數據發送到彈出窗口的代碼，因爲我想先彈出窗口。 – spars

好吧，所以基本上你想要做的就是用戶ajax檢索XML，當用戶點擊鏈接，然後在fancybox中顯示返回的XML。我會詳細解釋我的答案。 – asymptoticFault

因此，我可以看到幾個問題。

你Popup動作標記HttpPost但鏈接生成GET請求。
您現在設置的方式您的動作鏈接將重定向瀏覽器Search/Popup這是一個局部視圖。僅展示局部視圖意味着將不存在佈局頁面，並且佈局頁面就是包含fancybox腳本的地方。

你想要做的就是使用ajax來獲取XML，然後將其顯示在fancybox中。

添加到您的Index.cshtml觀點：

<!-- add the ID to the URL --> 
@Html.ActionLink("XML", "Popup", "Search", new { id = item.ID }, new {Class = "fancybox"}) 

<script type="javascript"> 
    $(function() { 
     $('a.fancybox').click(function() { 
      // not sure what the exact syntax is for setting the content 
      // looking at the fancybox options you may be able to specify the ajax 
      // options instead of setting the content manually, something like this 
      // maybe: 
      // ajax: { url: $(this).attr('href') }, 
      $.fancybox.open({ 
       'content': $('<div>').load($(this).attr('href')), 
       'autoScale': false, 
       'autoDimensions': true, 
       'transitionIn': 'none', 
       'transitionOut': 'none', 
       'hideOnOverlayClick': false, 
       'hideOnContentClick': true, 
       'showCloseButton': true 
      }); 
      // to cancel the redirect from clicking the link 
      return false; 
     }); 
    }); 
</script>

更改彈出要採取的行動ID作爲參數，並獲取XML：

// not sure what the type of your ID is 
public ActionResult Popup(int id) 
{ 
    // add code here to fetch the XML for the ID 

    return PartialView(/*pass the XML as to the view here*/); 
}

更改Popup.cshtml對此：

@model string // unless you want the XML to be some more complex type 
@{ 
    Layout = null; 
} 

<div id="divForm">@Model</div>

此外，您可以擺脫表格周圍的表格（除非您打算稍後發佈某些內容）。您還應該使用佈局頁面上的fancybox調用刪除腳本。

來源

2013-08-22 19:38:40 asymptoticFault

謝謝。我已經糾正了這些問題，但是我仍然得到該對象不支持屬性或方法'fancybox'錯誤。 – spars

我已經做出了您所建議的更改，並且這是將數據發送到彈出視圖的一種簡單方法，但我仍然在加載任何頁面時出現錯誤：「對象不支持屬性或方法'fancybox'」。由於這個原因，fancybox從不打開，鏈接只顯示包含xml數據的新頁面。 – spars

我注意到你的佈局頁面上，你正在渲染jquery在最底層。嘗試在依賴它的其他腳本之前將它移到頂部。 – asymptoticFault

如何獲得fancybox與mvc4剃刀中的html動作鏈接

回答

相關問題