MVC:无法使fancybox工作

时间:2015-10-02 05:29:22

标签: model-view-controller fancybox

我正在尝试更新现有的应用程序,并希望使用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

1 个答案:

答案 0 :(得分:0)

@ Html.ActionLink会让您重定向到另一个页面。

使用 @Ajax.ActionLink

而不是使用@ Html.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>