如何使Fancybox在MVC4剃须刀中使用HTML ActionLink工作

Question

I am trying to show a fancybox modal popup when a dynamically created html actionlink is clicked from within a table. 我试图从表中单击动态创建的html动作链接时显示一个fancybox模式弹出窗口。 I am using MVC4 with razor. 我正在用剃须刀使用MVC4。 I have tried multiple things from reading posts on stackoverflow and other sites, but nothing is working. 我已经通过阅读stackoverflow和其他站点上的帖子尝试了多种方法，但是没有任何效果。 I am fairly new to MVC4 and javascript/jquery. 我是MVC4和javascript / jquery的新手。

The current error I am getting is: object doesn't support property or method 'fancybox' when loading the Search page. 我得到的当前错误是：加载“搜索”页面时，对象不支持属性或方法“ fancybox”。

_Layout.cshtml page: _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>&copy; @DateTime.Now.Year - PipelineRx</p>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>

Search Controller 搜索控制器

public ActionResult Index()
{
    return View();
}

public ActionResult Popup()
{
    return View();
}

Index.cshtml Contains actionlinks in the rows Index.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.cshtml A page for the fancybox which will be modified later. Popup.cshtml fancybox的页面，稍后将对其进行修改。

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

<div id="divForm"></div>

Thanks. 谢谢。

Answer 1

So a couple issues I can see. 所以我看到了几个问题。

Your Popup action is tagged with HttpPost but links generate Get requests. 您的Popup操作用HttpPost标记，但是链接会生成Get请求。
The way you have it set up now your action link will redirect the browser to Search/Popup which is a partial view. 现在，您设置操作的方式将使操作链接将浏览器重定向到部分视图的Search/Popup窗口。 Rending just a partial view means there will be no layout page and the layout page is where you are including the fancybox scripts. 仅渲染部分视图意味着将没有布局页面，并且布局页面是您包含fancybox脚本的位置。

What you want to do is use ajax to fetch the XML and then display it in the fancybox. 您要做的是使用ajax来获取XML，然后将其显示在fancybox中。

Add this to your Index.cshtml view: 将此添加到您的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>

Change your Popup action to take the ID as a parameter and fetch the XML: 更改您的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*/);
}

Change your Popup.cshtml to this: 将您的Popup.cshtml更改为此：

@model string // unless you want the XML to be some more complex type
@{
    Layout = null;
}

<div id="divForm">@Model</div>

Also, you can get rid of the form surrounding the table (unless you are planning on posting something back later on). 另外，您可以摆脱表格周围的表格（除非您打算稍后再发布一些内容）。 You should also remove the script with the fancybox call that is on your layout page. 您还应该使用布局页面上的fancybox调用删除脚本。

如何使Fancybox在MVC4剃须刀中使用HTML ActionLink工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-08-22 19:38:40

如何使Fancybox在MVC4剃须刀中使用HTML ActionLink工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-08-22 19:38:40

解决方案1
0 已采纳 2013-08-22 19:38:40