0
私は_Layoutビューにウェブサイトを作成しています。例、jquery、ブートストラップなどのリンクを追加しました。別のビューで "DataTable"ライブラリを使用しますが、それ自体の前にjqueryライブラリが見つかりません。さらに、_layoutビューの最後に@RenderSection("scripts", required: false)を追加しました。私は多くの時間を費やしましたが、それに対する解決策は見つかりませんでした。jqueryスクリプトが別のビューasp.net mvcで読み込まれないのはなぜですか？
私はエラーを得た
Uncaught TypeError: Cannot read property 'style' of undefined
at Ha (jquery.dataTables.min.js:62)
at ha (jquery.dataTables.min.js:48)
at e (jquery.dataTables.min.js:93)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)
at Function.each (jQuery-2.2.0.min.js:2)
at n.fn.init.each (jQuery-2.2.0.min.js:2)
at n.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
at n.fn.init.h.fn.DataTable (jquery.dataTables.min.js:167)
at HTMLDocument.<anonymous> (Index:537)
at i (jQuery-2.2.0.min.js:2)
=================================== =======
@model IEnumerable<Dentistry.Areas.ViewModels.UserViewModel>
@{
ViewBag.Title = "مدیریت کاربران";
}
@*<h2>مدیریت کاربران</h2>*@
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
</head>
<div class="row">
<div class="col-md-6">
@*<a type="button" class="btn btn-success btn-flat btn-md" href="@Url.Action("Create","Users")"><span class="fa fa-plus"></span> افزودن کاربر جدید </a>*@
<a type="button" class="btn btn-success btn-flat btn-md" href="https://stackoverflow.com/users/create/0"><span class="fa fa-plus"></span> افزودن کاربر جدید </a>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">کاربران</h3>
<div class="box-tools">
<div class="input-group input-group-sm" style="width: 150px;">
<input type="text" name="table_search" class="form-control pull-right" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
<!-- /.box-header -->
<div class="box-body table-responsive no-padding tablecontainer">
<table class="table table-striped table-bordered dt-responsive nowrap direction" id="myDatatable">
<thead>
<tr>
<th>UserId</th>
<th>UserName </th>
<th>FirstName </th>
<th>LastName</th>
<th>Gender</th>
<th>Email</th>
<th>IsActive</th>
<th>PhoneNumber</th>
<th>Address</th>
</tr>
</thead>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">ویرایش کاربران</h4>
<div class="modal-body" id="editBody">
</div>
</div>
<div class="modal-footer ">
<a class="btn btn-warning btn-flat btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> ویرایش کاربر</a>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal -->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="delete" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
</div>
</div>
@section scripts{
<script src="~/scripts/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var oTable = $("#myDatatable").DataTable({
"ajax":
{
"url": '/users/GetUsers',
"type": "get",
"datatype": "json"
},
"columns": [
{ "data": "UserId", "autoWidth": true },
{ "data": "UserName", "autoWidth": true },
{ "data": "FirstName", "autoWidth": true },
{ "data": "LastName", "autoWidth": true },
{ "data": "Gender", "autoWidth": true },
{ "data": "Email", "autoWidth": true },
{ "data": "IsActive", "autoWidth": true },
{ "data": "PhoneNumber", "autoWidth": true },
{ "data": "Address", "autoWidth": true },
{
"data": "UserId", "width": "50px", "render": function (data) {
return '<a class="popup" href="https://stackoverflow.com/users/Edit/' + data + '">Edit</a>';
}
},
{
"data": "UserId", "width": "50px", "render": function (data) {
return '<a class="popup" href="https://stackoverflow.com/users/delete/' + data + '">Delete</a>';
}
}
]
})
$('.tablecontainer').on('click', 'a.popup', function (e) {
e.preventDefault();
OpenPopup($(this).attr('href'));
});
function OpenPopup(pageUrl) {
var $pageContent = $('<div/>');
$pageContent.load(pageUrl, function() {
$('#popupForm', $pageContent).removeData('validator');
$('#popupForm', $pageContent).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');
});
$dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
.html($pageContent)
.dialog({
draggable: false,
autoOpen: false,
resizable: false,
model: true,
title: 'Popup Dialog',
height: 550,
width: 600,
close: function() {
$dialog.dialog('destroy').remove();
}
})
$('.popupWindow').on('submit', '#popupForm', function (e) {
var url = $('#popupForm')[0].action;
$.ajax({
type: "POST",
url: url,
data: $('#popupForm').serialize(),
success: function (data) {
if (data.status) {
$dialog.dialog('close');
oTable.ajax.reload();
}
}
})
e.preventDefault();
})
$dialog.dialog('open');
}
});
</script>
}
==================================== =
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>پنل مدیریت - دندان پزشکی</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="~/Areas/Admin/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
@*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">*@
<link rel="stylesheet" href="https://use.fontawesome.com/c7442c63ea.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" />
<!-- Theme style -->
<link rel="stylesheet" href="~/Areas/Admin/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="~/Areas/Admin/dist/css/skins/_all-skins.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="~/Areas/Admin/plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="~/Areas/Admin/plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="~/Areas/Admin/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Date Picker -->
@*<link rel="stylesheet" href="/plugins/datepicker/datepicker3.css">*@
<!-- Daterange picker -->
<link rel="stylesheet" href="~/Areas/Admin/plugins/daterangepicker/daterangepicker-bs3.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="~/Areas/Admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- ./wrapper -->
<!-- jQuery 2.2.0 -->
<script src="~/Areas/Admin/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="~/Areas/Admin/dist/js/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 -->
<script src="~/Areas/Admin/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="~/Areas/Admin/dist/js/raphael-min.js"></script>
@*<script src="/plugins/morris/morris.min.js"></script>*@
<!-- Sparkline -->
<script src="~/Areas/Admin/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="~/Areas/Admin/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="~/Areas/Admin/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="~/Areas/Admin/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="~/Areas/Admin/dist/js/moment.min.js"></script>
@*<script src="~/Areas/Admin/plugins/daterangepicker/daterangepicker.js"></script>*@
<!-- datepicker -->
<script src="~/Areas/Admin/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="~/Areas/Admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="~/Areas/Admin/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="~/Areas/Admin/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="~/Areas/Admin/dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
@*<script src="~/Areas/Admin/dist/js/pages/dashboard.js"></script>*@
<!-- AdminLTE for demo purposes -->
<script src="~/Areas/Admin/dist/js/demo.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>
を示さなければならない、私は、捕捉されない例外TypeErrorこのエラーを得たが：ハで未定義 のプロパティ「スタイル」を読み取ることができません（jquery.dataTables.min .js：62） ha（jquery.dataTables.min.js：48） e（jquery.dataTables.min.js：93） at HTMLTableElement（jquery.dataTables.min.js：93） Function.each（jQuery-2.2.0.min.js：2） at n.fn.init.each（jQuery-2.2.0.min.js： 2） at n.fn.init.m [dataTableとして]（jquery.dataTables.min.js：82） at n.fn.init.h.fn.DataTable（jquery.dataTables.min.js：167） at HTMLDocument （インデックス：537） i（jQuery-2.2.0.min.js：2） –
rayan
@Riseでも、このコードを別のビューに追加するためにlayout.soを継承しました。レイアウト= "〜/エリア/管理者/ビュー/共有/ _AdminLayout.cshtml";私の見解には何の影響もありません。 – rayan
あなたのイメージによると、テーブルに表示されているデータのみで問題が発生した場合、モデルIEnumerableがコントローラからのデータで適切に来ているかどうかチェックしてください。あなたが助けてくれることを願っています。 –