如何让fancybox与mvc4剃须刀中的html动作链接一起工作

How to get fancybox working with html actionlink in mvc4 razor

本文关键字：html 链接 工作 一起 fancybox 剃须刀 mvc4      更新时间：2023-09-26

当从表中单击动态创建的html操作链接时，我试图显示一个fancybox模式弹出窗口。我用的是带剃须刀的MVC4。我从stackoverflow和其他网站上的帖子中尝试了很多东西，但都不起作用。我对MVC4和javascript/jquery还相当陌生。

我当前得到的错误是：加载搜索页面时，对象不支持属性或方法"fancybox"。

_Layout.chtml页面：

<!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>&copy; @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();
}

索引.cshtml包含行中的操作链接

@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.cshtmlfancybox的页面，稍后将进行修改。

<text>
        <script type="text/javascript">
            $(function () {
                $.fancybox.open({ "content": "This is a popup" });
            });
        </script>
</text>
<div id="divForm"></div>

谢谢。

所以我可以看到一些问题。

  1. 您的Popup操作标记为HttpPost，但链接会生成Get请求
  2. 按照你现在设置的方式，你的操作链接会将浏览器重定向到Search/Popup，这是一个局部视图。只重定部分视图意味着将没有布局页面，而布局页面是包含fancybox脚本的地方

您想要做的是使用ajax获取XML，然后将其显示在fancybox中。

将其添加到索引中。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>

更改Popup操作以将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调用的脚本。

相关文章：