从 Kendo UI Window 过渡到 JQuery UI 对话框

Transitioning from Kendo UI Window to JQuery UI Dialog

寻求建议或帮助以删除 Kendo UI Window 代码并将其替换为 JQuery UI 对话框。当我们从 ASP.Net MVC 过渡到 ASP.Net Core 1.0 MVC 站点时，管理层决定取消 Kendo UI。因此，我们一直在尝试采用有效的代码并使其成为 JQuery 但它不起作用。

这是视图和分部视图的原始工作代码：

查看

@{
    Layout = "~/Views/Shared/_MenuLayout.cshtml";
    @(Html.Kendo().Window()
                .Name("Select")
                .Title("Select a Character")
                .Content("Loading information.....")
                .LoadContentFrom("Index", "Characters")
                .Modal(true)
                .HtmlAttributes(new { style = "background:grey" })
                .Visible(false)
                .Width(500)
                .AutoFocus(true))
}

<div class="col-md-3">
    <input id="hfselectedid" type="hidden" value="" />
    <div class="col-md-2"></div>
    <div class="col-md-1">
        <span id="selE" class="btn btn-default">Edit Character</span>
        <script>
            $(document).ready(function () {
                $("#selE").click(function () {
                    //.bind("click", function () {
                    $("#Select").data("kendoWindow").center().open();
                    $("#hfselectedid").val("selE");
                });
            });
        </script>
        <span id="selC" class="btn btn-default">Edit Craft</span>
        <script>
            $(document).ready(function () {
                $("#selC").click(function () {
                    $("#Select").data("kendoWindow").center().open();
                    $("#hfselectedid").val("selC");
                });
            });
        </script>
        </div>
</div>
<div class="col-md-2">
        <div class="col-md-offset-1">
            @Html.ActionLink("Return to Main Menu", "Menu", null, new { @class = "btn btn-default" })
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="col-md-2"></div>
</div>
<div class="col-md-3">
    <input id="hfselectedid" type="hidden" value="" />
    <div class="col-md-pull-1">
        <span id="selD" class="btn btn-default">Delete Character</span>
        <script>
            $(document).ready(function () {
                $("#selD").click(function () {
                    //.bind("click", function () {
                    $("#Select").data("kendoWindow").center().open();
                    $("#hfselectedid").val("selD");
                });
            });
        </script>
        <span id="selR" class="btn btn-default">Edit Reputation</span>
        <script>
            $(document).ready(function () {
                $("#selR").click(function () {
                    $("#Select").data("kendoWindow").center().open();
                    $("#hfselectedid").val("selR");
                });
            });
        </script>
      </div>
    <div class="col-md-2"></div>
</div>

PartialView 作为弹出窗口 Window

<div class="form-group" style="font-family:'Times New Roman', Times, serif;">
    @Html.Label("Character Name:", htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-9">
        @Html.DropDownList("Char_ID", Model.CharacterFullName, "Select a Character", htmlAttributes: new { @class = "form-control" })
    </div>
</div>
<div class="form-group" style="font-family:'Times New Roman', Times, serif">
    <div class="col-md-offset-1 col-md-11">
        <a id="SelChar" class="btn btn-default">Select</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <script>
            $('#SelChar').click(function (e)
            {
                e.preventDefault();
                //retrieve value from hidden field
                var sid = $("#hfselectedid").val();

                if (sid == "selC")
                {
                    ($("#Select"))
                    {
                        window.top.location.replace = '@Url.Action("Edit", "CharacterCrafts")' + '?id=' + $('#Char_ID').val();
                    }
                } else if (sid == "selD")
                {
                    ($("#Select"))
                    {
                        window.top.location.replace = '@Url.Action("Delete", "Characters")' + '?id=' + $('#Char_ID').val();
                    }
                } else if (sid == "selE")
                {
                    ($("#Select"))
                    {
                        window.top.location.replace = '@Url.Action("Edit", "Characters")' + '?id=' + $('#Char_ID').val();
                    }
                } else if (sid == "selR")
                {
                    ($("#Select"))
                    {
                        window.top.location.replace = '@Url.Action("Edit", "CharacterReputations")' + '?id=' + $('#Char_ID').val();
                    }
                }                                        
                $("#Select").data("kendoWindow").close();
            });
        </script>
        <a id="SelClose" class="btn btn-danger">Cancel</a>
        <script>
            $('#SelClose').click(function ()
            {
                $("#Select").data("kendoWindow").close();
            });
        </script>
    </div>
</div>

在我们进行转换时，我们进行了以下更改，但它们并没有起作用，您可以整天点击一个按钮，但什么也没有发生。我们已经尝试过 Edge、Chrome、Firefox，当我们 运行 时，这些工具都显示 200 OK 并且没有错误。

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = "~/Views/Shared/_MenuLayout.cshtml";    
}

<div class="col-md-3">
    <input id="hfselectedid" type="hidden" value="" />
    <div class="col-md-2"></div>
    <div class="col-md-1">
        <span id="selE" class="btn btn-default">Edit Character</span>
        <span id="selC" class="btn btn-default">Edit Craft</span>
    </div>
</div>
<div>
    <div class="col-md-2"></div>
    <div class="col-md-2">
        <div class="col-md-offset-1">
            <a asp-controller="Menu", asp-action="Menu", null, class="btn btn-default">Return to Main Menu</a>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="col-md-2"></div>
</div>
<div class="col-md-3">
    <input id="hfselectedid" type="hidden" value="" />
    <div class="col-md-pull-1">
        <span id="selD" class="btn btn-default">Delete Character</span>
        <span id="selR" class="btn btn-default">Edit Reputation</span>        
    </div>
    <div class="col-md-2"></div>
</div>
@*<div id="Select" title="Select a Character" style="overflow:hidden;"></div>*@
<script type="text/javascript">
    $(function () {
        $("#Select").dialog({
            autoOpen: false,
            title: "Select a Character",
            modal: true,
            width: 500,
            open: function (event, ui) {
                $(this).load('/Characters/Index');
            },
            close: function (event, ui) {
                $(this).dialog('close');
            }
        }).css("backgroundColor","grey");
    });

    $("#selE").click(function () {
        $("#Select").dialog('open');
        $("#hfselectedid").val("selE");
    });

    $("selC").click(function () {
        $("Select").data().center().open();
        $("#hfselectedid").val("selC");
    });

    $("selD").click(function () {
        $("Select").data().center().open();
        $("#hfselectedid").val("selD");
    });

    $("selR").click(function () {
        $("Select").data().center().open();
        $("#hfselectedid").val("selR");
    });
</script>

弹出窗口的部分视图：

<div class="form-group" style="font-family:'Times New Roman', Times, serif;">
    <label class="control-label col-md-3">Character Name:</label>
    <div class="col-md-9">
        <select class="form-control" asp-for="Char_ID", asp-items="Model.CharacterFullName">
            <option>Select a Character</option>
        </select>
    </div>
</div>
<div class="form-group" style="font-family:'Times New Roman', Times, serif">
    <div class="col-md-offset-1 col-md-11">
        <a id="SelChar" class="btn btn-default">Select</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a id="SelClose" class="btn btn-danger">Cancel</a>
        <script>
                $('#SelChar').click(function (e)
                {
                    e.preventDefault();
                    //retrieve value from hidden field
                    var sid = $("#hfselectedid").val();

                    if (sid == "selC")
                    {
                        ($("#Select"))
                        {
                            var url = '@Url.Action("Edit", "CharacterCrafts")' + '?id=' + $('#Char_ID').val();
                            @*window.top.location.replace = '@Url.Action("Edit", "CharacterCrafts")' + '?id=' + $('#Char_ID').val();*@
                        }
                    } else if (sid == "selD")
                    {
                        ($("#Select"))
                        {
                            @*window.top.location.replace = '@Url.Action("Delete", "Characters")' + '?id=' + $('#Char_ID').val();*@
                        }
                    } else if (sid == "selE")
                    {
                        ($("#Select"))
                        {
                            @*window.top.location.replace = '@Url.Action("Edit", "Characters")' + '?id=' + $('#Char_ID').val();*@
                        }
                    } else if (sid == "selR")
                    {
                        ($("#Select"))
                        {
                            @*window.top.location.replace = '@Url.Action("Edit", "CharacterReputations")' + '?id=' + $('#Char_ID').val();*@
                        }
                    }
                    $('#Select').load(url)
                    //$("#Select").data("kendoWindow").close();
                });
        </script>
        <script>
                $('#SelClose').click(function ()
                {
                    //$("#Select").data("kendoWindow").close();
                });
        </script>
    </div>
</div>

我承认 View 和 partialview 都不完整，我们先测试一个按钮以确保代码正常工作，然后再去其他按钮，但它似乎不起作用。

最后是新站点中引用的布局：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title </title>
    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body style="font-family:'Times New Roman', Times, serif; background-color:gray">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year</p>
        </footer>
    </div>


    <environment names="Development">
        @*<script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>*@
        <script asp-src-include="~/lib/**/*.js"></script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment names="Staging,Production">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
        </script>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>
    @RenderSection("scripts", required: false)
</body>
</html>

我们认为，如果我们点击任何按钮，它应该从我们的角色控制器转到索引，并在弹出窗口 window 的局部视图中显示名称列表。但是我们可以整天点击“编辑角色”按钮，而永远不会弹出窗口。这应该有正确的 javascript 代码来打开 JQuery UI 对话框。 Jquery UI 确实存在于 wwwroot/lib 中并且在布局中被引用，并且也在 Bower 依赖项中。 有什么想法吗？

最新

我已经能够取出 Kendo UI 代码并使用 Jquery 对话框，尽管它不能完全正常工作。现在，如果我点击“编辑角色”按钮，就会显示对话框。如果我点击任何其他按钮，它不会显示。

这是当前页面 EdChar View 和 site.js。 EdChar.cshtml:

@{
    ViewBag.Title = "LOTRO Character DB Edit";
    Layout = "~/Views/Shared/_MenuLayout.cshtml";
}

<h2 style="font-family:'Times New Roman', Times, serif; color:white; text-align:center">Lord of The Rings Online Character Database Edit Menu</h2>

<div class="col-md-3">
    <input id="hfselectedid" type="hidden" value="" />
    <div class="col-md-2"></div>
    <div class="col-md-1">
        <span id="selE" class="btn btn-default">Edit Character</span>        
        <span id="selC" class="btn btn-default">Edit Craft</span>        
    </div>
</div>
<div class="col-md-6">
    <div class="col-md-2"></div>
    <div class="col-md-2">
        <div class="col-md-offset-1">
            <a asp-controller="Menu", asp-action="Menu", null, class="btn btn-default">Return to Main Menu</a>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="col-md-2"></div>
</div>
<div class="col-md-3">
    <input id="hfselectedid" type="hidden" value="" />
    <div class="col-md-pull-1">
        <span id="selD" class="btn btn-default">Delete Character</span>
        <span id="selR" class="btn btn-default">Edit Reputation</span>
    </div>
    <div class="col-md-2"></div>
</div>
<div id="Select" title="Select a Character" style="overflow:hidden;"></div>

site.js

$(function () {
    $("#Select").dialog({
        autoOpen: false,
        title: "Select a Character",
        modal: true,
        width: 500,
        open: function (event, ui) {
            $(this).load('/Characters/Index');
        },
        close: function (event, ui) {
            $(this).dialog('close');
        }
    }).css("backgroundColor", "grey");
});

$("#selE").click(function () {
    $("#Select").dialog('open');
    $("#hfselectedid").val("selE");
});

$("selC").click(function () {
    $("Select").dialog('open');
    $("#hfselectedid").val("selC");
});

$("selD").click(function () {
    $("Select").dialog('open');
    $("#hfselectedid").val("selD");
});

$("selR").click(function () {
    $("Select").dialog('open');
    $("#hfselectedid").val("selR");
});

我感觉问题出在脚本中，但我不确定确切位置。浏览器控制台中唯一出现的东西；这发生在 Chrome、Firefox 和 Edge 中；是它可以不显眼地加载 jquery 验证。

$(function () {
    $("#Select").dialog({
        autoOpen: false,
        title: "Select a Character",
        modal: true,
        width: 500,
        open: function (event, ui) {
            $(this).load('/Characters/Index');
        },
        close: function (event, ui) {
            $(this).dialog('close');
        }
    }).css("backgroundColor", "grey");
});

$("#selE").click(function () {
    $("#Select").dialog('open');
    $("#hfselectedid").val("selE");
});

$("#selC").click(function () {
    $("#Select").dialog('open');
    $("#hfselectedid").val("selC");
});

$("#selD").click(function () {
    $("#Select").dialog('open');
    $("#hfselectedid").val("selD");
});

$("#selR").click(function () {
    $("#Select").dialog('open');
    $("#hfselectedid").val("selR");
});