当我在表格中点击动态创建的html动作链接时，我试图显示一个fancybox模式弹出窗口。我正在使用带剃须刀的MVC4。我已经尝试过阅读stackoverflow和其他网站上的帖子，但没有任何工作。我是MVC4和javascript / jquery的新手。
我得到的当前错误是：对象在加载搜索页面时不支持属性或方法'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>© @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>
感谢。
答案 0 :(得分：0)
所以我可以看到几个问题。
Popup操作标有HttpPost，但链接会生成获取请求。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调用删除脚本。