MVC：不能使fancybox工作

Question

我想更新現有的應用程序，並希望顯示模式使用fancybox。在其他功能上，我能夠顯示fancybox，但出於某種原因無法在特定視圖上進行操作。

這是我的主視圖聲明：

@ Html.ActionLink（Strings.Link_ViewFullList 「OrganisationFullList」，新的{ID = 1}，{新@class = 「的fancybox fancybox.ajax」}）

然後這裏是我的「organisationFullList」cshtml文件。

@model ProjectOrganisationModel 
@{ 
    ViewBag.Title = Strings.PageTitles_Organisations; 
} 
<div class="row"> 
    <div class="col-lg-10"> 
       @if (Model.Organisation != null && Model.Organisation.Any()) 
       { 
        <ul class="list-unstyled"> 
         @foreach (var organisation in Model.Organisation) 
         { 
          <li> 
           @Html.RadioButton("organisationList", organisation.Name) 
           @Html.Label(organisation.Name, new { style = "font-weight: normal" }) 
          </li> 
         } 
        </ul> 
       } 
    </div> 
</div> 

這裏是我的控制器代碼：

public ActionResult OrganisationFullList(int id) 
    { 
     var organisationList = new ProjectOrganisationModel(); 
     organisationList.Organisation = GetOrganisations(); 
     return View(organisationList); 
    } 

當我點擊鏈接，它會顯示一個新的屏幕，而不是模式。它重定向到這個URl： https://localhost:44300/project/1/organisationfulllist

Answer 1

@ Html.ActionLink會導致您重定向到另一個頁面。

而不是使用@ Html.ActionLink使用@ Ajax.ActionLink

@Ajax.ActionLink(
    "View Full List Ajax", 
    "OrganisationFullList", //Action 
    "YourController", //Controller 
    new AjaxOptions 
    { 
     HttpMethod = "POST", 
     OnSuccess = "showFancyBox" //call back 
    } 
) 

回調函數：

function showFancyBox(data) { 
    $.fancybox.open({ "content": data }); 
} 

不要忘記包括jquery.unobtrusive，ajax.min.js您需要它使用@Ajax幫手

<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>