MVC:无法使fancybox工作 [英] MVC: Can't make fancybox work
问题描述
我正在尝试更新现有的应用程序,并希望使用fancybox显示模式.在其他功能上,我能够显示fancybox,但由于某些原因无法在特定视图上显示.
I am trying to update an existing application and wants to display modal using fancybox. On other functionalities, I was able to display the fancybox but for some reason cannot do it on a particular view.
这是我的主视图声明:
@ Html.ActionLink(Strings.Link_ViewFullList,"OrganisationFullList",新的{id = 1},新的{@class ="fancybox fancybox.ajax"})
然后这是我的"organisationFullList" cshtml文件.
Then here is my "organisationFullList" cshtml file.
@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
When I click on the link, it displays a new screen instead of the modal. It redirects to this URl: https://localhost:44300/project/1/organisationfulllist
推荐答案
@ Html.ActionLink使您重定向到另一个页面.
@Html.ActionLink causes you to redirect to another page.
不是使用@ Html.ActionLink,而是使用 @ Ajax.ActionLink
Rather than using @Html.ActionLink use @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 助手
Dont forget to include jquery.unobtrusive-ajax.min.js you need it to use @Ajax helpers
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
这篇关于MVC:无法使fancybox工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!