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

Question

寻找建议或帮助删除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>

PartialView as Pop-up 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>

Pop-Up的PartialView：

<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 Dialog，尽管它没有完全正常工作。现在，如果我点击编辑字符按钮，则会显示对话框。如果我按下任何其他按钮，则不会显示。

这是当前页面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验证不引人注意。

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