What is the interaction between _Layout.cshtml and my ViewFile.cshtml?
up vote
0
down vote
favorite
In the _Layout.cshtml there are references to jQuery, and bootstrap.min.js.
Yet in my ViewFile page, I cannot get DataTables to work unless I include the reference to jQuery, and data tables. This is in Visual Studio 2017 for Mac. I'm trying to get a paged table, that responds to browser resize, has column sorting, search function, nice looking buttons for first, next, etc. with the page size selector on the upper left and the search window on the upper right. I keep getting different combinations, and when it looks right, there are no column sort buttons, etc. Here is what is in the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Maestro</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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>
<nav 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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile" class="navbar-brand">Maestro</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile">LogFiles</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2018 - Maestro</p>
</footer>
</div>
<environment include="Development">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
And at the top of my ViewFile.cshtml:
@
ViewData["Title"] = "View";
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
table is defined as:
<table id="table_id" class="table table-condensed table-striped table-hover" width="100%" cellspacing="0">
and below the table is:
<script>$(document).ready(function ()
$('#table_id').dataTable(
"pagingType": "full_numbers",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"scrollY" : "400px",
"paging": true,
"ordering": true,
"info": true,
"searching": true,
"processing": true, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"columnDefs":
[
"targets": [0],
"visible": false,
"searchable": false
],
"columns": [
"data": "DateTime", "name": "DateTime", "autoWidth": true ,
"data": "Msecs", "name": "Msecs", "autoWidth": true ,
"data": "Thread", "name": "Thread", "autoWidth": true ,
"data": "Level", "name": "Level", "autoWidth": true ,
"data": "Logger", "name": "Logger", "autoWidth": true ,
"data": "Host", "name": "Host", "autoWidth": true ,
"data": "MsgType", "name": "MsgType", "autoWidth": true ,
"data": "Message", "name": "Message", "autoWidth": true
]
);
);</script>
> Is there some interaction between the js and css files in the
> _Layout.cshtml and the ones at the top of the ViewFile.cshtml?
>
> What would be THE set of js and css files to include to get what I
> want? I can't find images of what a set does.
jquery asp.net-mvc datatables
asked Nov 11 at 17:04
John Wooten
179111
add a comment |
up vote
0
down vote
favorite
In the _Layout.cshtml there are references to jQuery, and bootstrap.min.js.
Yet in my ViewFile page, I cannot get DataTables to work unless I include the reference to jQuery, and data tables. This is in Visual Studio 2017 for Mac. I'm trying to get a paged table, that responds to browser resize, has column sorting, search function, nice looking buttons for first, next, etc. with the page size selector on the upper left and the search window on the upper right. I keep getting different combinations, and when it looks right, there are no column sort buttons, etc. Here is what is in the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Maestro</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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>
<nav 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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile" class="navbar-brand">Maestro</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile">LogFiles</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2018 - Maestro</p>
</footer>
</div>
<environment include="Development">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
And at the top of my ViewFile.cshtml:
@
ViewData["Title"] = "View";
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
table is defined as:
<table id="table_id" class="table table-condensed table-striped table-hover" width="100%" cellspacing="0">
and below the table is:
<script>$(document).ready(function ()
$('#table_id').dataTable(
"pagingType": "full_numbers",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"scrollY" : "400px",
"paging": true,
"ordering": true,
"info": true,
"searching": true,
"processing": true, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"columnDefs":
[
"targets": [0],
"visible": false,
"searchable": false
],
"columns": [
"data": "DateTime", "name": "DateTime", "autoWidth": true ,
"data": "Msecs", "name": "Msecs", "autoWidth": true ,
"data": "Thread", "name": "Thread", "autoWidth": true ,
"data": "Level", "name": "Level", "autoWidth": true ,
"data": "Logger", "name": "Logger", "autoWidth": true ,
"data": "Host", "name": "Host", "autoWidth": true ,
"data": "MsgType", "name": "MsgType", "autoWidth": true ,
"data": "Message", "name": "Message", "autoWidth": true
]
);
);</script>
> Is there some interaction between the js and css files in the
> _Layout.cshtml and the ones at the top of the ViewFile.cshtml?
>
> What would be THE set of js and css files to include to get what I
> want? I can't find images of what a set does.
jquery asp.net-mvc datatables
asked Nov 11 at 17:04
John Wooten
179111
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
In the _Layout.cshtml there are references to jQuery, and bootstrap.min.js.
Yet in my ViewFile page, I cannot get DataTables to work unless I include the reference to jQuery, and data tables. This is in Visual Studio 2017 for Mac. I'm trying to get a paged table, that responds to browser resize, has column sorting, search function, nice looking buttons for first, next, etc. with the page size selector on the upper left and the search window on the upper right. I keep getting different combinations, and when it looks right, there are no column sort buttons, etc. Here is what is in the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Maestro</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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>
<nav 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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile" class="navbar-brand">Maestro</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile">LogFiles</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2018 - Maestro</p>
</footer>
</div>
<environment include="Development">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
And at the top of my ViewFile.cshtml:
@
ViewData["Title"] = "View";
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
table is defined as:
<table id="table_id" class="table table-condensed table-striped table-hover" width="100%" cellspacing="0">
and below the table is:
<script>$(document).ready(function ()
$('#table_id').dataTable(
"pagingType": "full_numbers",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"scrollY" : "400px",
"paging": true,
"ordering": true,
"info": true,
"searching": true,
"processing": true, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"columnDefs":
[
"targets": [0],
"visible": false,
"searchable": false
],
"columns": [
"data": "DateTime", "name": "DateTime", "autoWidth": true ,
"data": "Msecs", "name": "Msecs", "autoWidth": true ,
"data": "Thread", "name": "Thread", "autoWidth": true ,
"data": "Level", "name": "Level", "autoWidth": true ,
"data": "Logger", "name": "Logger", "autoWidth": true ,
"data": "Host", "name": "Host", "autoWidth": true ,
"data": "MsgType", "name": "MsgType", "autoWidth": true ,
"data": "Message", "name": "Message", "autoWidth": true
]
);
);</script>
> Is there some interaction between the js and css files in the
> _Layout.cshtml and the ones at the top of the ViewFile.cshtml?
>
> What would be THE set of js and css files to include to get what I
> want? I can't find images of what a set does.
jquery asp.net-mvc datatables
asked Nov 11 at 17:04
John Wooten
179111
In the _Layout.cshtml there are references to jQuery, and bootstrap.min.js.
Yet in my ViewFile page, I cannot get DataTables to work unless I include the reference to jQuery, and data tables. This is in Visual Studio 2017 for Mac. I'm trying to get a paged table, that responds to browser resize, has column sorting, search function, nice looking buttons for first, next, etc. with the page size selector on the upper left and the search window on the upper right. I keep getting different combinations, and when it looks right, there are no column sort buttons, etc. Here is what is in the _Layout.cshtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Maestro</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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>
<nav 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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile" class="navbar-brand">Maestro</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a asp-area="" asp-controller="LogFileViewer" asp-action="SelectFile">LogFiles</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© 2018 - Maestro</p>
</footer>
</div>
<environment include="Development">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/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"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
@RenderSection("Scripts", required: false)
</body>
</html>
And at the top of my ViewFile.cshtml:
@
ViewData["Title"] = "View";
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
table is defined as:
<table id="table_id" class="table table-condensed table-striped table-hover" width="100%" cellspacing="0">
and below the table is:
<script>$(document).ready(function ()
$('#table_id').dataTable(
"pagingType": "full_numbers",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"scrollY" : "400px",
"paging": true,
"ordering": true,
"info": true,
"searching": true,
"processing": true, // for show progress bar
"serverSide": false, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"columnDefs":
[
"targets": [0],
"visible": false,
"searchable": false
],
"columns": [
"data": "DateTime", "name": "DateTime", "autoWidth": true ,
"data": "Msecs", "name": "Msecs", "autoWidth": true ,
"data": "Thread", "name": "Thread", "autoWidth": true ,
"data": "Level", "name": "Level", "autoWidth": true ,
"data": "Logger", "name": "Logger", "autoWidth": true ,
"data": "Host", "name": "Host", "autoWidth": true ,
"data": "MsgType", "name": "MsgType", "autoWidth": true ,
"data": "Message", "name": "Message", "autoWidth": true
]
);
);</script>
> Is there some interaction between the js and css files in the
> _Layout.cshtml and the ones at the top of the ViewFile.cshtml?
>
> What would be THE set of js and css files to include to get what I
> want? I can't find images of what a set does.
jquery asp.net-mvc datatables
jquery asp.net-mvc datatables
asked Nov 11 at 17:04
John Wooten
179111
asked Nov 11 at 17:04
John Wooten
179111
asked Nov 11 at 17:04
John Wooten
179111
asked Nov 11 at 17:04
John Wooten
179111
asked Nov 11 at 17:04
John Wooten
179111
179111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
Declare your datatable javascript code in @section scripts in ViewFile.cshtml
@section scripts
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
And place your other javascript code (for datatable initialization) inside the section
answered Nov 12 at 13:21
Aquib Iqbal
2147
Thanks! This really helped. The column sort buttons appeared when I followed your advice. I'm not sure what the scripts in _Layout.cshtml actually do, but the above fixed my problem.
– John Wooten
Nov 12 at 20:12
While rendering the ViewFile.cshtml with _Layout.cshtml, your javascript will appear before the jquery script.. (after@RenderBody()you are declaring jquery and other javascript files). For this reason it doesn't work. To resolve this we have sections, what ever you declare/write javascript code inside the section it will come in the place of@RenderSection("Scripts", required: false)
– Aquib Iqbal
Nov 13 at 5:30
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Declare your datatable javascript code in @section scripts in ViewFile.cshtml
@section scripts
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
And place your other javascript code (for datatable initialization) inside the section
answered Nov 12 at 13:21
Aquib Iqbal
2147
Thanks! This really helped. The column sort buttons appeared when I followed your advice. I'm not sure what the scripts in _Layout.cshtml actually do, but the above fixed my problem.
– John Wooten
Nov 12 at 20:12
While rendering the ViewFile.cshtml with _Layout.cshtml, your javascript will appear before the jquery script.. (after@RenderBody()you are declaring jquery and other javascript files). For this reason it doesn't work. To resolve this we have sections, what ever you declare/write javascript code inside the section it will come in the place of@RenderSection("Scripts", required: false)
– Aquib Iqbal
Nov 13 at 5:30
add a comment |
up vote
1
down vote
accepted
Declare your datatable javascript code in @section scripts in ViewFile.cshtml
@section scripts
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
And place your other javascript code (for datatable initialization) inside the section
answered Nov 12 at 13:21
Aquib Iqbal
2147
Thanks! This really helped. The column sort buttons appeared when I followed your advice. I'm not sure what the scripts in _Layout.cshtml actually do, but the above fixed my problem.
– John Wooten
Nov 12 at 20:12
While rendering the ViewFile.cshtml with _Layout.cshtml, your javascript will appear before the jquery script.. (after@RenderBody()you are declaring jquery and other javascript files). For this reason it doesn't work. To resolve this we have sections, what ever you declare/write javascript code inside the section it will come in the place of@RenderSection("Scripts", required: false)
– Aquib Iqbal
Nov 13 at 5:30
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Declare your datatable javascript code in @section scripts in ViewFile.cshtml
@section scripts
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
And place your other javascript code (for datatable initialization) inside the section
answered Nov 12 at 13:21
Aquib Iqbal
2147
Declare your datatable javascript code in @section scripts in ViewFile.cshtml
@section scripts
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
And place your other javascript code (for datatable initialization) inside the section
answered Nov 12 at 13:21
Aquib Iqbal
2147
answered Nov 12 at 13:21
Aquib Iqbal
2147
answered Nov 12 at 13:21
Aquib Iqbal
2147
answered Nov 12 at 13:21
Aquib Iqbal
2147
2147
Thanks! This really helped. The column sort buttons appeared when I followed your advice. I'm not sure what the scripts in _Layout.cshtml actually do, but the above fixed my problem.
– John Wooten
Nov 12 at 20:12
While rendering the ViewFile.cshtml with _Layout.cshtml, your javascript will appear before the jquery script.. (after@RenderBody()you are declaring jquery and other javascript files). For this reason it doesn't work. To resolve this we have sections, what ever you declare/write javascript code inside the section it will come in the place of@RenderSection("Scripts", required: false)
– Aquib Iqbal
Nov 13 at 5:30
add a comment |
Thanks! This really helped. The column sort buttons appeared when I followed your advice. I'm not sure what the scripts in _Layout.cshtml actually do, but the above fixed my problem.
– John Wooten
Nov 12 at 20:12
While rendering the ViewFile.cshtml with _Layout.cshtml, your javascript will appear before the jquery script.. (after@RenderBody()you are declaring jquery and other javascript files). For this reason it doesn't work. To resolve this we have sections, what ever you declare/write javascript code inside the section it will come in the place of@RenderSection("Scripts", required: false)
– Aquib Iqbal
Nov 13 at 5:30
Thanks! This really helped. The column sort buttons appeared when I followed your advice. I'm not sure what the scripts in _Layout.cshtml actually do, but the above fixed my problem.
– John Wooten
Nov 12 at 20:12
Thanks! This really helped. The column sort buttons appeared when I followed your advice. I'm not sure what the scripts in _Layout.cshtml actually do, but the above fixed my problem.
– John Wooten
Nov 12 at 20:12
While rendering the ViewFile.cshtml with _Layout.cshtml, your javascript will appear before the jquery script.. (after
@RenderBody() you are declaring jquery and other javascript files). For this reason it doesn't work. To resolve this we have sections, what ever you declare/write javascript code inside the section it will come in the place of @RenderSection("Scripts", required: false)– Aquib Iqbal
Nov 13 at 5:30
While rendering the ViewFile.cshtml with _Layout.cshtml, your javascript will appear before the jquery script.. (after
@RenderBody() you are declaring jquery and other javascript files). For this reason it doesn't work. To resolve this we have sections, what ever you declare/write javascript code inside the section it will come in the place of @RenderSection("Scripts", required: false)– Aquib Iqbal
Nov 13 at 5:30
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53251091%2fwhat-is-the-interaction-between-layout-cshtml-and-my-viewfile-cshtml%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
