【发布时间】：2020-03-30 20:30:08
【问题描述】：
当我单击“评论”链接时，会打开一个模式弹出窗口并显示内容，因此它会执行应有的操作。
转到我的问题： 在第一种情况下，它发生了我想要的，但其他一些代码没有实现。在这种情况下，我将“@section”放在 Index.cshtml 中，并且模式弹出窗口以一些样式呈现在页面中间（这是我想要的），但 @section 上方的数据表和 yadcf 代码没有似乎被执行（例如，数据表过滤器不存在）。我在名为“Wanted Modal Popup”的 jpeg 中展示了这个场景。
另一方面，在第二种情况下，如果我将@section 放在“ViewAll”视图中，数据表可以正常工作，模态弹出窗口也会出现，但它确实像第一种情况那样出现。我在名为“Unwanted Modal Popup”的 jpeg 中展示了第二种情况。
我想将代码留在 ViewAll 视图中（第二种情况），因为这是与模式弹出窗口相关的代码。另外，当我这样做时，会出现附加错误。我查看了错误，似乎可能有一些不兼容？如果是这样，为什么它会在索引页面上工作呢？
你能帮忙吗？我花了很多时间试图解决这个问题，但没有成功。
布局查看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" />
</head>
<body>
<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>
@Html.ActionLink("Helpdesk Support", "Index", "Tickets", null, new { @class = "navbar-brand" })
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Nicola's Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/Scripts.js"></script>
@RenderSection("scripts", required: false)
@RenderSection("scriptsKnowledge", required: false)
@RenderSection("modalComments", required: false)
</body>
</html>
INDEX.CSHTML 查看代码：
@{
ViewBag.Title = "Index";
}
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#firstTab">View All</a></li>
<li><a data-toggle="tab" href="#secondTab">Add New</a></li>
<li><a data-toggle="tab" href="#thirdTab">Knowledge</a></li>
<li><a data-toggle="tab" href="#fourthTab">IT Tasks</a></li>
</ul>
<div class="tab-content">
<div id="firstTab" class="tab-pane fade in active">@Html.Action("ViewAll")</div>
<div id="secondTab" class="tab-pane fade in">@Html.Action("AddOrEdit")</div>
<div id="thirdTab" class="tab-pane fade in">@Html.Action("ViewAllKnowledge")</div>
<div id="fourthTab" class="tab-pane fade in">@Html.Action("ViewAllTasks")</div>
</div>
@*jQuery Datatable CSS*@
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> @*for the visual style of the datepicker of the dtLastUpdated column*@
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css"> @*For column reorder functionality*@
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css"> @*For column reorder functionality*@
@section scripts
{
@Scripts.Render("~/bundles/jqueryval")
@*jQuery Datatable JS*@
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script>
function activatejQueryTable() {
var table = $('#ticketTable').DataTable({
rowReorder: { selector: 'tr' },
colReorder: true,
"stateSave": true,
"stateDuration": 0,
"autoWidth": false,
"columnDefs": [
{ "width": "40px", "targets": 0, "visible": true },
{ "width": "150px", "targets": 1, "visible": true }, //dtLastUpdated
{ "width": "250px", "targets": 2, "visible": true }, //vcSubject
{ "width": "150px", "targets": 3, "visible": true }, //vcFrom
{ "width": "53px", "targets": 4, "visible": true }, //vcPriority
{ "width": "90px", "targets": 5, "visible": true }, //vcAssignedTo
{ "width": "53px", "targets": 6, "visible": true }, //vcStatus
{ "width": "90px", "targets": 7, "visible": true }, //vcRequestType
{ "width": "90px", "targets": 8, "visible": true }, //vcLocation
{ "width": "90px", "targets": 9, "visible": true }, //vcCategory
{ "width": "90px", "targets": 10, "visible": true }, //dtAnticipatedCompletion
{ "width": "50px", "targets": 11, "visible": true } //edit and delete buttons
],
//Create the dropdowns
responsive: true,
"bAutoWidth": false,
initComplete: function () {
this.api().columns([4, 5, 6, 7, 8, 9]).every(function () { //this is to put a dropdown just for some columns
var column = this;
var select = $('<select class="myDropdown"><option value=""></option></select>')
.appendTo($("#filters").find("th").eq(column.index()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
})
.on('click', function (e) {
e.stopPropagation(); //this event handler catches the click and then prevents propagation. Without this, the sort of the column happens every time you click on the dropdown
});
column.data().unique().sort().each(function (d, j) {
$(select).append('<option value="' + d + '">' + d + '</option>')
});
});
}
//End of create dropdowns
});
//Datepicker for dtLastUpdated column, which has id="datepicker" and class="datepicker"
$(".datepicker").datepicker({
maxDate: 0,
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
onClose: function (selectedDate) {
table.draw();
}
}).on("input change", function () {
filterGlobal();
});
}
//});
//Also part of Datepicker for dtLastUpdated column
function filterGlobal() {
$('#ticketTable').DataTable().search(
$(".datepicker").val()
).draw();
}
$(function () {
activatejQueryTable();
});
</script>
}
@section scriptsKnowledge
{
<script src="~/DataTables/datatables.js"></script>
@*<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js" integrity="sha256-nX2mPo5tTUWsDUalF2TgsIn8mKkjzrkc/XMHbfpRfF0=" crossorigin="anonymous"></script>*@
<script src="~/Yadcf/jquery.dataTables.yadcf.js"></script>
<script>
function yadcfTable() {
var oTable;
oTable = $('#knowledgeTable').DataTable({
stateSave: true
});
yadcf.init(oTable, [
{ column_number: 0 }]);
}
$(function () {
yadcfTable();
});
</script>
}
@section modalComments
{
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showComments() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View Details"
});
$("#ticketTable .details").click(function () {
var ticketNum = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "POST",
url: "/Tickets/ViewComments",
data: '{ticketNum: "' + ticketNum + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
};
$(function () {
showComments();
});
</script>
}
VIEWALL.CSHTML 查看代码：
@model IEnumerable<HelpDeskSupport.Models.Ticket>
@{
ViewBag.Title = "ViewAll";
//Layout = null;
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section modalComments
{
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function showComments() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View Details"
});
$("#ticketTable .details").click(function () {
var ticketNum = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "POST",
url: "/Tickets/ViewComments",
data: '{ticketNum: "' + ticketNum + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
};
$(function () {
showComments();
});
</script>
}
@*<head>*@
@*<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>*@
@*@Scripts.Render("~/bundles/jquery")*@
@*<script src="~/Scripts/jquery-3.4.1.js"></script>*@
@*<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>*@
@*<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />*@
@*<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View Details"
});
$("#ticketTable .details").click(function () {
var ticketNum = $(this).closest("tr").find("td").eq(0).html();
$.ajax({
type: "POST",
url: "/Tickets/ViewComments",
data: '{ticketNum: "' + ticketNum + '" }',
contentType: "application/json; charset=utf-8",
dataType: "html",
success: function (response) {
$('#dialog').html(response);
$('#dialog').dialog('open');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>*@
@*</head>*@
@*<input type="submit" value="Clear Filters" id="filterBtn" class="bg-info" onclick="cleanFilters()">*@
<button type="button" onclick="cleanFilters()" value="Clear Filters" id="filterBtn" class="btn btn-primary btn-sm">Clear Filters / Reset</button>
@*jQuery Datatable (and could also be for ThemeRoller*@
<table class="display table table-striped table-bordered" id="ticketTable" style="width:100%">
<thead>
<tr id="filters">
<th>
@Html.DisplayNameFor(model => model.iNumber)
</th>
<th>
@Html.DisplayNameFor(model => model.dtLastUpdated)
<input type="text" id="datepicker" class="datepicker"> @*readonly="readonly"*@
</th>
<th>
@Html.DisplayNameFor(model => model.vcSubject)
</th>
<th>
@Html.DisplayNameFor(model => model.vcFrom)
</th>
<th>
@Html.DisplayNameFor(model => model.vcPriority)
</th>
<th>
@Html.DisplayNameFor(model => model.vcAssignedTo)
</th>
@*<th>
@Html.DisplayNameFor(model => model.dtAssignedDate)
</th>*@
<th>
@Html.DisplayNameFor(model => model.vcStatus)
</th>
<th>
@Html.DisplayNameFor(model => model.vcRequestType)
</th>
@*<th>
@Html.DisplayNameFor(model => model.vcBody)
</th>
<th>
@Html.DisplayNameFor(model => model.dtDateSubmitted)
</th>*@
<th>
@Html.DisplayNameFor(model => model.vcLocation)
</th>
<th>
@Html.DisplayNameFor(model => model.vcCategory)
</th>
<th>
@Html.DisplayNameFor(model => model.dtAnticipatedCompletion)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.iNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.dtLastUpdated)
</td>
<td>
@Html.DisplayFor(modelItem => item.vcSubject)
</td>
<td>
@Html.DisplayFor(modelItem => item.vcFrom)
</td>
<td>
@Html.DisplayFor(modelItem => item.vcPriority)
</td>
<td>
@Html.DisplayFor(modelItem => item.vcAssignedTo)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.dtAssignedDate)
</td>*@
<td>
@Html.DisplayFor(modelItem => item.vcStatus)
</td>
<td>
@Html.DisplayFor(modelItem => item.vcRequestType)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.vcBody)
</td>
<td>
@Html.DisplayFor(modelItem => item.dtDateSubmitted)
</td>*@
<td>
@Html.DisplayFor(modelItem => item.vcLocation)
</td>
<td>
@Html.DisplayFor(modelItem => item.vcCategory)
</td>
<td>
@Html.DisplayFor(modelItem => item.dtAnticipatedCompletion)
</td>
<td>
<a class="btn btn-primary btn-sm" onclick="Edit('@Url.Action("EditOneRecord", "Tickets", new { id = item.iNumber })')"><i class="fa fa-pencil fa-lg"></i></a>
<a class="btn btn-danger btn-sm" onclick="Delete('@Url.Action("Delete", "Tickets", new { id = item.iNumber })')"><i class="fa fa-trash fa-lg"></i></a>
<a class="details" href="javascript:;">Comments</a>
</td>
</tr>
}
</tbody>
</table>
<div id="dialog" style="display: none">
</div>
【问题讨论】：
标签： javascript jquery html ajax asp.net-mvc