Looking for advice or help to remove Kendo UI Window code and replace it with JQuery UI Dialog. As we transition from ASP.Net MVC to a ASP.Net Core 1.0 MVC site, management has decided to do away with Kendo UI. So we have been trying to take the code that works and make it a JQuery but it is not working.
Here is the original working code for the View and the PartialView:
View
@{
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>
<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>
As we transition we have made the following changes, but they do not see to work, you can click on a button all day long and nothing happens. We have tried Edge, Chrome, Firefox, and the tools are all showing a 200 OK and no errors when we run this.
@*
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>
PartialView for the Pop-Up:
<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>
<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>
I admit that both the View and partialview are incomplete, we were testing one button first to ensure that the code is working before we went to the others, but it does not seem to work.
Lastly here is the referenced layout in the new site:
<!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>© @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>
What we figure is if we hit any of the buttons it should go to the Index from our Characters Controller and display a list of names on the partial view, in a pop-up window. But we can click on the Edit Character button all day long and never get a pop-up. This supposedly has the correct javascript code to open the JQuery UI dialog. The Jquery UI does exist in the wwwroot/lib and is referenced in the layout, and is also in the Bower dependencies. Any thoughts?
Latest
I have been able to take out the Kendo UI code and work with the Jquery Dialog, though it is not completely working correctly. Right now if I hit the Edit Character button, the dialog displays. If I hit any of the other buttons, it does not display.
Here is the current page EdChar View and 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");
});
I have a feeling that the issue is in the script, but I am not sure exactly where. The only thing that comes up in the browser console; which happens in Chrome, Firefox, and Edge; is that it can load the jquery validation unobtrusive.
