1

動的に作成された 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>&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