Model view controller MVC:Can';Don’不要让fancybox工作

Model view controller MVC:Can';Don’不要让fancybox工作,model-view-controller,fancybox,Model View Controller,Fancybox,我正在尝试更新现有的应用程序,并希望使用fancybox显示模式。在其他功能上,我可以显示fancybox,但由于某些原因,无法在特定视图上显示 以下是我的主要观点声明: @Html.ActionLink(Strings.Link_ViewFullList,“OrganizationFullList”,新的{id=1},新的{@class=“fancybox fancybox.ajax”}) 然后是我的“OrganizationFullList”cshtml文件 @model ProjectOr

我正在尝试更新现有的应用程序,并希望使用fancybox显示模式。在其他功能上,我可以显示fancybox,但由于某些原因,无法在特定视图上显示

以下是我的主要观点声明:

@Html.ActionLink(Strings.Link_ViewFullList,“OrganizationFullList”,新的{id=1},新的{@class=“fancybox fancybox.ajax”})

然后是我的“OrganizationFullList”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>
当我点击链接时,它会显示一个新的屏幕,而不是模式。它重定向到此URl:
@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>

我现在可以让fancybox工作了。下一步是保存fancybox中显示的来自的数据。谢谢
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>