Я пытаюсь создать приложение MVC с помощью Angular. Мое приложение имеет общий верхний и нижний колонтитулы. Поэтому я добавил его в _layout.cshtml. В приложении есть несколько статических страниц. Следовательно, я хочу загрузить это с помощью маршрутизации Angular.
Вот мой _layout.cshtml
<!DOCTYPE html>
<html data-ng-app="HappyHut">
<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")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse #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>
@Html.ActionLink("Happy Hut", "Main", "Home", new { area = "" }, new { @class = "navbar-brand page-scroll" })
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="/ContactUs">Contact Us</a></li>
<li><a href="/AboutUs">About Us</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
<li><a href="/Test">Test</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content" data-ng-view>
@RenderBody()
<hr />
<footer>
footer data
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/Angular")
</body>
</html>
В целях тестирования я вставил некоторые тестовые данные html в main.cshtml.
и вот мой файл js.
var HappyHut = angular.module("HappyHut", ['ngRoute']);
HappyHut.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('!').html5Mode({
enabled: true,
requireBase: false
});
$routeProvider
.when('/ContactUs', {
templateUrl: 'Home/Contact'
})
.when('/AboutUs', {
templateUrl: 'Home/About'
})
.when('/Test', {
templateUrl: 'Home/Test'
});
}]);
Здесь test.cshtml похож на
@{
//Layout = null;
}
Hi Test
Когда я загружаю Main.cshtml, страница загружается, но часть тела скрывается. Если я нажму Test, он загрузится. Однако, если я добавлю Layout = null, произойдет то же самое, что и в Main.cshtml, и откроется всплывающее окно с надписью
страница не запускается из-за долго работающего скрипта
в консоли он регистрирует ошибку ниже более одного раза для вышеуказанной проблемы
пытался загрузить angular более одного раза
. Теперь я не хочу копировать верхний и нижний колонтитулы на всех страницах.
Может ли кто-нибудь сказать мне, как сделать так, чтобы содержимое главной страницы отображалось или все страницы, которые будут созданы с использованием _layout.cshtml?
