My sideNav is not working on a page using materializeCSS
here is my html:
```html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<meta charset="UTF-8">
<title>Dutch Fork Running | Contact</title>
<!-- CSS -->
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../includes/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="../includes/css/fullcalendar.css" rel="stylesheet" />
<link href="../includes/css/fullcalendar.print.css" rel="stylesheet" media="print" />
<link href="../includes/css/font-awesome.css" rel="stylesheet" />
<!-- Scripts -->
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/materialize.js" async defer></script>
<script src="../includes/js/moment.min.js"></script>
<script src="../includes/js/jquery.min.js"></script>
<script src="../includes/js/fullcalendar.js"></script>
<script src="../includes/js/ical.js"></script>
<script src="../includes/js/ical_events.js"></script>
<script src="../includes/js/ical_fullcalendar.js"></script>
<script src="../includes/js/gcal.js"></script>
<script src="../includes/js/init.js"></script>
<script type="text/javascript">var rootdir = "../";</script>
</head>
<body>
<!-- <div class="navbar-fixed"> -->
<header>
<nav class="green">
<div class="nav-wrapper">
<a href="../#" class="center brand-logo">
<img height="54px" src="../images/cc-arrow-green.png" alt="logo">
</a>
<i class="material-icons">menu</i>
<ul class="side-nav" id="mobile-menu">
<li class="">
<a href="../">
Home
</a>
</li>
<li class="">
<a href="../Calendar">
Calendar
</a>
</li>
<li class="">
<a href="../Records">
Records
</a>
</li>
<li class="">
<a href="../Archives">
Archives
</a>
</li>
<li class="">
<a href="../Handbook">
Handbook
</a>
</li>
<li class="">
<a href="../Join">
Join
</a>
</li>
<li class="">
<a href="../Misc">
Misc Info
</a>
</li>
<li class="">
<a href="../Contact">
Contact
</a>
</li>
<li class="">
<a href="../BoosterClub">
Booster Club
</a>
</li>
<li class="">
<a href="../SFTR">
Silver Fox Trail Run
</a>
</li>
</ul>
</div>
</nav>
</header>
```
It says sideNav function not defined on that page. Works on others, no difference in pasted part between pages.
Here is the traceback:
jQuery.Deferred exception: undefined is not a function (evaluating '$('.button-collapse').sideNav()') (2)
(anonymous function) — init.js:3
j — jquery.min.js:2:58607
(anonymous function) — jquery.min.js:2:88441
undefined
I call it using $('.button-collapse').sideNav();
Resolved: Called at end of materialize javascript file
I resolved this issue by adding $('.button-collapse').sideNav(); to the bottom of the materialize.js file.
Related
My navbar hamburger menu is not opening and I have no clue why? The links show fine on a big screen but the navbar wont open on a smaller screen. I have tried changing the tags in the header and deleting things and refreshing the page to figure out the issue but nothing works. I am new to Bootstrap and Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Megan-Keyes</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<div class = "header-my-name">
<header><h2>Hi</h2></header>
</div>
<button class="navbar-toggler"type="button" data-bs-toggle="collapse"
data-bs-target=#navmenu>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item">
Currency Converter
</li>
<li class="nav-item">
Famous Landmarks
</li>
<li class="nav-item">
Project 3
</li>
<li class="nav-item">
Project 4
</li>
<li class="nav-item">
Project 5
</li>
<li class="nav-item">
Project 6
</li>
<li class="nav-item">
Project 7
</li>
<li class="nav-item">
Project 8
</li>
</ul>
</div>
</div>
</nav>
<!--NavBar Color and text center-->
<section class="bg-dark text-light p-5 text-center">
</section>
<!--My Project Displays-->
<main>
<div id = "currency-converter-project">
<iframe src="Currency-Converter/index.html" name="projectWindow1" width="100%" height="100px"></iframe>
</div>
<div id = "famous-landmarks-project">
<iframe src="Famous-Landmarks/index.html" width="100%" height="500px"></iframe>
</div>
</main>
</body>
</html>
Link bootstrap javascript file <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
I am currently working on a little project, that I cannot get to run properly.
This is my page.html, which I use as a template.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title data-template="config:app-title">App Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta data-template="config:app-meta"/>
<link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
<link rel="stylesheet" type="text/css" href="$app-root/resources/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="$app-root/resources/css/style.css"/>
<script type="text/javascript" src="$app-root/resources/scripts/jquery/jquery-3.4.1.js"/>
<script type="text/javascript" src="$app-root/resources/scripts/bootstrap.min.js"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css"/>
<script type="text/javascript" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</head>
<body id="body">
<div class="container">
<div class="jumbotron">
<h1>Title</h1>
<hr/>
<p>A Digital Edition</p>
</div>
<ul class="nav nav-tabs py-0 my-0" style="text-align:center;">
<li class="nav-item">
<a class="nav-link" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./around.html">Around the World</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./table.html">Content</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./methods.html">Methods?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./aboutme.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./#">What else?</a>
</li>
</ul>
</div>
<div id="content" class="container"/>
<hr class="hr-style"/>
<footer style="text-align:center;">
Contact
</footer>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
setting-name: setting-value
});
});
</script>
</html>
My typical page looks a little like the following:
<div xmlns="http://www.w3.org/1999/xhtml" data-template="templates:surround" data-template-with="templates/page.html" data-template-at="content">
<head>
<title>How it is supposed to look</title>
</head>
<body>
<div class="slider">
<div data-template="app:XMLtoHTML-forAll"/>
</div>
</body>
</div>
And I cannot get any javascript to run (as an example there is slick in it, which I copied from here). All my XML which is transformed to HTML, using xslt, is correctly transformed and displayed. However, I do not get a slider but only the <div> that are created using the xslt.
This happens, no matter where I include the javascript for slick.
I've tried it in the <head> (of page.html, as well as in the specific page), in the <body> at the end, and even after </body>.
When I use exemplary <div>test-content</div> and several similar files, the same happens to them, as there obviously is no JS running, no matter where I put the script!
Any hints for that?
Here's the promised edit:
Source-Map-Fehler: Error: request failed with status 404
Ressourcen-Adresse: http://localhost:8080/exist/apps/BookOfOrders/pages/$app-root/resources/js/bootstrap.min.js
Source-Map-Adresse: bootstrap.min.js.map
Here's the second edit, mentioned in comments:
my file structure:
the errors:
and my
So I have been building a new website recently and experimenting a lot with jQuery.
Unfortunately I seem to be having a massive problem getting my jquery file to actually work in the website.
Here is the html code. As you can see, I have jquery added by CDN and the javascript is in a totally separate file. I added an alert into the primary function just to check if it's even reading what I have put and I am stuck.
<html>
<head>
<!--Browser Data-->
<meta charset="utf-8">
<!--Meta Data -->
<title>website</title>
<meta name="description" content="The Official Page of website">
<meta name="Keywords" content="some website stuff">
<meta name="author" content="me">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS File Locations -->
<link rel="stylesheet" href="css/main.css">
<!-- Javascript File Locations -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Fonts used -->
<link href="https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet">
</head>
<body>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="assets/thegang.png"/>
</body>
</html>
Here is the JQuery.
$(document).ready(function(){
$("button").click(function(){
$("#theGang").fadeIn(3000);
alert("it worked");
});
});
I'm just not sure why it's not working.
By the way the javascript file is in a sub folder called js and called main.js and the html is called index.html
Based on your comments it looks like all you needed to do was remove the event handler for the nonexistent button element. This enables the fadeIn and alert.
$(document).ready(function(){
$("#theGang").fadeIn(3000);
//alert("it worked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- A logo will go here but here is some text for now -->
<H1 ID="Logo">website</H1>
<!-- The menu bar -->
<ul class="menu" ID="Menu_Bar">
<li Class="Menu_Item" ID="Home">
<a Class="Menu_Link" href="index.html">Home</a>
</li>
<li Class="Menu_Item" ID="About_Us">
<a Class="Menu_Link" href="about.html">About Us</a>
</li>
<li Class="Menu_Item" ID="Events">
<a Class="Menu_Link" href="events.html">Events</a>
</li>
<li Class="Menu_Item" ID="Contact">
<a Class="Menu_Link" href="contact.html">Contact Us</a>
</li>
</ul>
<!-- An image of the stuff-->
<img ID="theGang" src="https://image.freepik.com/free-photo/cute-cat-picture_1122-449.jpg" style="display: none;"/>
I'm using AngularJS and Epoch with ng-epoch directive wrapper.
Here is my module file
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies','ng-oboe','ng.epoch'])
.config(function (oboeProvider) {
/* If we were so inclined, we could change the oboe defaults here - headers, etc. */
// oboeProvider.defaults = {};
});
I didn't make any changes in controller. Because I want to show just chart outline without data at page.
Here is my template file:
<div class="row" ng-controller="StatsCtrl">
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-line-chart" title="Cpu">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
<epoch-live-line chart-height="200" chart-data="" chart-stream=""> </epoch-live-line>
</rd-widget-body>
</rd-widget>
</div>
<div class="col-lg-12">
<rd-widget>
<rd-widget-header icon="fa fa-area-chart" title="Memory">
</rd-widget-header>
<rd-widget-body classes="medium no-padding">
</rd-widget-body>
</rd-widget>
</div>
</div>
Also here is my index
<!doctype html>
<html lang="en" ng-app="RDash">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RDash AngularJS</title>
<!-- STYLES -->
<!-- build:css lib/css/main.min.css -->
<link rel="stylesheet" type="text/css" href="components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="components/rdash-ui/dist/css/rdash.min.css">
<link rel="stylesheet" type="text/css" href="components/epoch/epoch.min.css" />
<!-- endbuild -->
<!-- SCRIPTS -->
<!-- build:js lib/js/main.min.js -->
<script type="text/javascript" src="components/angular/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="components/oboe/dist/oboe-browser.min.js"></script>
<script type="text/javascript" src="components/ng-oboe/dist/ng-oboe.js"></script>
<script type="text/javascript" src="components/d3/d3.min.js"></script>
<script type="text/javascript" src="components/epoch/epoch.min.js"></script>
<script type="text/javascript" src="components/ng-epoch/ng-epoch.js"></script>
<!-- endbuild -->
<!-- Custom Scripts -->
<script type="text/javascript" src="js/dashboard.min.js"></script>
</head>
<body ng-controller="MasterCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Home / Dashboard
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
Why I am getting this error? I can't figure out.
TypeError: $element.epoch is not a function
at h.$scope.renderEpoch (http://localhost:4444/lib/js/main.min.js:434:28)
at liveLineFunction (http://localhost:4444/lib/js/main.min.js:504:28)
at http://localhost:4444/lib/js/main.min.js:65:60
at K (http://localhost:4444/lib/js/main.min.js:55:142)
at g (http://localhost:4444/lib/js/main.min.js:47:397)
at http://localhost:4444/lib/js/main.min.js:47:17
at http://localhost:4444/lib/js/main.min.js:48:359
at w (http://localhost:4444/lib/js/main.min.js:52:291)
at za.link (http://localhost:4444/lib/js/main.min.js:206:239)
at K (http://localhost:4444/lib/js/main.min.js:55:142) <div class="epoch ng-scope ng-isolate-scope" chart-height="200" chart-data="" chart-stream="">
As per the preparation section here, you need to load jQuery first and then epoch.js like below.
If you do not already have jQuery and AngularJS included:
<script src="[PATH_TO_BOWER_COMPNENTS]/jquery/dist/jquery.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/angular/angular.min.js"></script>
After you load those two libraries, include:
<script src="[PATH_TO_BOWER_COMPNENTS]/d3/d3.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/epoch/epoch.min.js"></script>
<script src="[PATH_TO_BOWER_COMPNENTS]/ng-epoch/ng-epoch.js"></script>
I am using mvc-5 and using bootstrap and all my links are in _Layout.cshtml now i have a drop down tabs like this http://prntscr.com/75qqpp (using bootstrap) now in my
_Layout.cshtml i have renderbody() which renders all my UI .
What i want to ?
On clicking the tab "Real Time" i get a dropdown list which on futher click to "Tabular" must open replace the current view just below the tabs to a new view .
How i try to do this ?
(1) In home controller i do this :
public ActionResult tabular()
{
return View();
}
(2) Then i create view and in that view i add Layout path like this :
#{
ViewBag.Title = "tabular";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabular</h2>
As a result i have all the tabs but they are not alligned properly it now shows the view like this: http://prntscr.com/75qxaz
I feel like i dont have access to bootstrap here or i am doing anything wrong ?
Could some one please give guidance such that i can have tabular.cshtml view just below the tab in the first link (this tab will be common to all the views obtained)
My full code is:
_Layout.cshtml
<!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>
<!--starts here-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="bootstrap/js/jquery-ui.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="bootstrap/css/jquery.easy-pie-chart.css" rel="stylesheet" media="screen" />
<link href="bootstrap/css/styles.css" rel="stylesheet" />
<link href="/bootstrap/css/DT_bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/jquery.jgrowl.css" rel="stylesheet" />
<link href="bootstrap/css/cssFiles.css" rel="stylesheet" />
<!-- Bootstrap -->
<link href="bootstrap/css/chosen.min.css" rel="stylesheet" />
<link href="bootstrap/css/DT_bootstrap.css" rel="stylesheet" />
<link href="/static/vendors/jGrowl/jquery.jgrowl.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/styles.css" rel="stylesheet" />
<link href="bootstrap/css/datepicker.css" rel="stylesheet" />
<link href="bootstrap/css/uniform.default.css" rel="stylesheet" />
<link href="bootstrap/css/dataTables.tableTools.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-wysihtml5.css" rel="stylesheet" />
<link href="bootstrap/css/datepicker.css" rel="stylesheet" />
<link href="bootstrap/css/uniform.default.css" rel="stylesheet" />
<link href="bootstrap/css/chosen.min.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-wysihtml5.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/dataTables.tableTools.css" />
<!-- <script src="bootstrap/js/bootstrap.min.js"></script> <!--click on main tab disappers-->
<!-- <script src="bootstrap/js/common.js"></script> hover disappears-->
<script src="bootstrap/js/jquery.dataTables.min.js"></script>
<script src="bootstrap/js/jquery.easy-pie-chart.js"></script>
<script src="bootstrap/js/jquery.jgrowl.js"></script>
<script src="bootstrap/js/scripts.js"></script>
<script src="bootstrap/js/DT_bootstrap.js"></script>
<script src="bootstrap/js/jquery-DT-pagination.js"></script>
<script type="text/javascript" src="bootstrap/js/icon-selector.js"></script>
<script src="bootstrap/js/dashboard.js"></script>
<script type="text/javascript" src="bootstrap/js/moment.min.js"></script>
<script type="text/javascript" src="bootstrap/js/moment-timezone-with-data-2010-2020.min.js"></script>
<script src="bootstrap/js/jquery.bootstrap.wizard.min.js"></script>
<script src="bootstrap/js/raphael-min.js"></script>
<script src="bootstrap/js/morris.min.js"></script>
<!--ends here-->
</head>
<body>
<div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-custom navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/dashboard/">Vision Vertex</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Real Time
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="~/Views/Shared/_Layout/">Dashboard</a>
</li>
<li>
<!--onclick="tabularFunction()" -->
#*<a tabindex="-1" href="~/Views/Home/BackgroundViews/tabular.cshtml">Tabular</a>*#
#Html.ActionLink("Tabular", "tabular", "Home")
</li>
<li>
<a tabindex="-1" href="/dashboard/map/">Live Map</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
Utilites<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a tabindex="-1" href="/dashboard/contact-list/">List Contacts</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/contact-registration/">Add Contact</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="/dashboard/notification-list/">List Notification</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/notification-registration/">Add Notification</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="/dashboard/report-list/">List Periodic Report</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/report-registration/">Add Periodic Report</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" href="/dashboard/list-period-alert/">List Periodic Alert</a>
</li>
<li>
<a tabindex="-1" href="/dashboard/add-period-alert/">Add Periodic Alert</a>
</li>
<!--li class="divider"></li>
<li>
<a tabindex="-1" href="#">FAQ</a>
</li-->
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr/>
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
HomeController :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace testLayt.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult tabular()
{
return View();
}
}
}
tabular.cshtml :
#{
ViewBag.Title = "tabular";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>tabular</h2>