I have an ASP.NET MVC application that is using partial views, because of the DevExpress components requirement. When a server condition is true it fires back (via Ajax within MainRibbon.js) and needs to display a modal dialog (residing at the _Layout.cshtml) to the client, but the modal is rendered as part of the main HTML, not as a pop-up. What I am doing wrong here ?
HTML code _Layout.cshtml
@using DevExpress.Web.Mvc
@using DevExpress.Web.Mvc.UI
@{
ViewBag.Title = "Main";
Page.Title = "BatchPrint main page";
Page.Verion = "5.0";
}
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="~/Scripts/CustomScripts/GridView.js" type="text/javascript"></script>
<script src="~/Scripts/CustomScripts/MainRibbon.js" type="text/javascript"></script>
<script src="~/Scripts/CustomScripts/RichEdit.js" type="text/javascript"></script>
<script src="~/Scripts/CustomScripts/download.js" type="text/javascript"></script>
<script src="~/Scripts/CustomScripts/SiteScripts.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-3.7.0.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
.p1 {
font-family: Trenda, "Lucida Console", serif;
font-size: 30px;
}
.newFont * {
font-family: 'Trenda' "Lucida Console", serif;
font-size: 15px;
}
.gap-10 {
width: 100%;
height: 10px;
}
.gap-45 {
width: 100%;
height: 45px;
}
.left {
left: 0px;
padding-left: 75px;
background-color: #DAF7A6;
color: black;
width: 85%;
overflow-x: auto;
font-family: trenda, sans-serif;
vertical-align: middle;
justify-content: center;
/* Actual code */
display: flex;
align-items: center;
}
.right {
right: 0;
padding-left: 15px;
width: 15%;
}
.split {
height: 60px;
position: fixed;
overflow-x: auto;
padding-top: 0px;
vertical-align: middle;
}
#msgModal {
display: none;
}
</style>
<div class="gap-10"></div>
<p class="p1"> BatchPrint </p>
<div class="gap-10"></div>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
</style>
<style>
#footer {
bottom: 60px;
position: fixed;
width: 100%;
}
</style>
@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.GridView })
@Html.DevExpress().GetScripts(new Script { ExtensionSuite = ExtensionSuite.GridView })
@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.RichEdit })
@Html.DevExpress().GetScripts(new Script { ExtensionSuite = ExtensionSuite.RichEdit })
@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.Icons })
@Html.DevExpress().GetStyleSheets(new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout })
@Html.DevExpress().GetScripts(new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout })
</head>
<body>
<table style="table-layout: fixed; width: 100vw">
<tr>
<td style="width: 100%">
@{Html.RenderPartial("PartialMainRibbon");}
<br>
</td>
</tr>
</table>
<table style="table-layout: fixed; vertical-align:top; width: 100vw">
<tr style="vertical-align:top">
<td style="width: 1%">
</td>
<td style="width: 70%">
<div class="gap-45"></div>
<div id="container" class="container">
@{Html.RenderPartial("PartialGridView");}
</div>
</td>
<td style="width: 1%">
</td>
<td style="width: 27%; vertical-align:top">
@{Html.RenderPartial("PartialRichEdit");}
</td>
<td style="width: 1%">
</td>
</tr>
</table>
<footer>
<div id="footer">
<div class="split left" id="status_area">
<div class="centered" color="black" id="message">
<h4></h4>
</div>
</div>
<div class="split right">
<label id="label_for_bar" for="bar" font-family="Trenda, Verdana, Arial, Helvetica, sans-serif" style="display:none">Progress:</label>
<progress id="bar" value="80" max="100" style="width:90%;display:none"></progress>
</div>
</div>
</footer>
@RenderBody()
<!-- Message Modal -->
<div class="modal fade" id="msgModal" role="dialog" aria-hidden="true" data-target="#msgModal">
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Data breach protection active</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="OK">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<img src=https://www.w3schools.com/images/w3schools_green.jpg alt="W3Schools.com" style="width:100px;height:100px;" vertical-align="middle" display="inline-block">
</div>
<div class="col-sm-9">
<span vertical-align="top">We have detected that a large amount of data was downloaded over a certain amount of time. As a safety precaution we are halting further processing here. If you find that this message is incorrect then contact your administrator.</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
</body>
</html>Javascript MainRibbon.js
// Valid callback icons for gridview
var validFunctions = ['View', 'Download', 'View 3D', 'Clear', 'AddLines']
function onCommandExecuted(s, e)
{
var avrDwnldSpeed = 3000; // 3 MB/sec average world download speed (2023)
var minDelayBetweenDwnlds = 1000;
var waitForDownload = false;
ShowMessage("", "normal");
ShowProgress(false);
if (e.item.name == 'View')
{
GridView.UpdateEdit();
// Pass the processing to the grid via Ajax
let typeval = e.item.name;
let jsonval = "";
$.ajax({
type: 'POST',
url: '/Grid/GridPartial',
data: JSON.stringify({ type: typeval, json: jsonval }),
contentType: 'application/json; charset=utf-8',
success: function (response)
{
if (response != null)
{
// Show the modal
$('#msgModal').modal('show');
}
}
});
}