为什么不在另一个视图加载jquery脚本asp.net mvc？

我在我的_Layout视图中写了一个网站，我添加了示例，jquery，bootstrap等的必要链接......在另一个视图中，我想使用“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">&times;</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>

picture

来源

2017-07-17 rayan

@上升，我得到这个错误，遗漏的类型错误：在哈无法读取的不确定财产“风格”（jquery.dataTables.min .js：62） at ha（jquery.dataTables.min.js：48） at e（jquery.dataTables.min.js：93） at HTMLTableElement。（jQuery-2.2.0.min.js：2） at n.fn.init.each（jQuery-2.2.0.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）在HTMLDocument处为。（Index：537） at i（jQuery-2.2.0.min.js：2） – rayan

@Rise，但它继承了layout.so，为了确保我在另一个视图中添加了这段代码。 Layout =“〜/ Areas/Admin/Views/Shared/_AdminLayout.cshtml”;但它对我的观点没有任何影响。 – rayan

根据您的图像，如果您遇到问题，只能使用表格中显示的数据，那么请检查Model IEnumerable 是否适合使用来自控制器的数据。希望它可以帮助您 –

找你视图必须继承_Layout
你可以用下面的代码指定视图页面继承：

@{ 
    Layout = "_Layout"; 
    ViewBag.Title = "مدیریت کاربران"; 
}

，或者你可以在View文件夹中创建_ViewStart.cshtml下面的内容：

@{ 
    Layout = "_Layout"; 
}

的尊重是第一种方法，你不能为每个视图页面设置不同的布局，但在第二种方法中，您可以为视图文件夹中的所有视图页面设置布局。

之后，你需要在@RenderBody()了_Layout.cshtml鉴于找你必须表现出

来源

2017-07-17 12:36:10 Masoud

我有_viewStart.cshtml但我有我的table.in事实上，我的表使用ajax请求接收数据我已经使用“datatable”，它需要jQuery库本身之前。我的观点没有问题，我的桌子有问题。 – rayan

请看这张图片i.stack.imgur.com/Td1my.png我的视图被渲染了，但我的桌子有问题。 – rayan

@rayan用jquery1.10 +检查它 – Masoud

为什么不在另一个视图加载jquery脚本asp.net mvc？

回答

相关问题