从 Kendo UI 窗口转换到 JQuery UI 对话框答案

【问题标题】：Transitioning from Kendo UI Window to JQuery UI Dialog从 Kendo UI 窗口转换到 JQuery UI 对话框
【发布时间】：2017-08-01 00:10:20
【问题描述】：

寻求建议或帮助以删除 Kendo UI Window 代码并将其替换为 JQuery UI Dialog。当我们从 ASP.Net MVC 过渡到 ASP.Net Core 1.0 MVC 站点时，管理层决定取消 Kendo UI。所以我们一直在尝试将可以工作的代码变成一个 JQuery，但它不工作。

这里是 View 和 PartialView 的原始工作代码：

查看

@{
    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>

部分视图作为弹出窗口

<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>

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

最新

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

这里是当前页面 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验证。

【问题讨论】：

Kendo UI 有很多组件，例如 Grid、Scheduler、Charts。 jQuery、jQuery UI 和 Bootstrap 没有这些。请缩小您的问题例如如何使用 Boostrap Modal。
为什么不使用 Telerik 的 Kendo for Asp.Net Core？这不是一个选择吗？
在 Asp.Net Core 中使用 Telerik 的 Kendo UI 不是一种选择。管理层尚未更新 Telerik 许可证以摆脱它。除非它是免费的，否则它不会飞。
@Win 这有助于研究问题所在。这让我看到了最新的部分。
离开一个星期，然后再回来，我现在知道出了什么问题。我忘记了 Select 前面的 # 以及 selC、selD 和 selR。

标签： javascript asp.net asp.net-mvc jquery-ui jquery-ui-dialog

【解决方案1】：

$(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");
});

【讨论】：