1

当从表中单击动态创建的 html 动作链接时，我试图显示一个花式框模式弹出窗口。我正在使用带有剃须刀的 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>&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();
}

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 稍后将修改的fancybox 页面。

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

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

谢谢。

4

1 回答 1

0

所以我可以看到几个问题。

  1. 您的Popup操作带有标记，HttpPost但链接会生成 Get 请求。
  2. 您现在设置它的方式，您的操作链接会将浏览器重定向到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>

更改您的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 调用删除脚本。

于 2013-08-22T19:38:40.703 回答