我下载并购买了https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0模板,但是我无法在我的mvc 5项目中正常使用它。
我使用下载中包含的“blankpage.html”示例创建了我的布局页面。
布局页面工作正常,但是当我添加renderbody调用并尝试通过我的模板显示页面时。 renderbody调用,不断添加额外的不需要的div。
看起来像
<div id="main" role="main">
TEXTADDED
</div>
并在该附加div标签之后添加页面中的文本。
尽管使用模板的页面只包含一个单词。换句话说,我使用布局的页面包含文本“test”。但是renderbody生成:
<div id="main" role="main">
</div>
TEXTADDED
你有什么线索吗?这是我的布局页面
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
@*@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")*@
<title> SmartAdmin </title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Use the correct meta names below for your web application
Ref: http://davidbcalhoun.com/2010/viewport-metatag
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Basic Styles -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/font-awesome.min.css">
<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-production.css">
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-skins.css">
<!-- SmartAdmin RTL Support is under construction
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/smartadmin-rtl.css"> -->
<!-- We recommend you use "your_style.css" to override SmartAdmin
specific styles this will also ensure you retrain your customization with each SmartAdmin update.
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/your_style.css"> -->
<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
<link rel="stylesheet" type="text/css" media="screen" href="~/Areas/Admin/Template/css/demo.css">
<!-- FAVICONS -->
<link rel="shortcut icon" href="~/Areas/Admin/Template/img/favicon/favicon.ico" type="image/x-icon">
<link rel="icon" href="~/Areas/Admin/Template/img/favicon/favicon.ico" type="image/x-icon">
<!-- GOOGLE FONT -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
</head>
<body class="">
<!-- possible classes: minified, fixed-ribbon, fixed-header, fixed-width-->
<!-- HEADER -->
<header id="header">
<div id="logo-group">
<!-- PLACE YOUR LOGO HERE -->
<span id="logo"> <img src="~/Areas/Admin/Template/img/logo-white2.png" alt="SmartAdmin"> </span>
<!-- END LOGO PLACEHOLDER -->
</div>
<!-- pulled right: nav area -->
<div class="pull-right">
<!-- collapse menu button -->
<div id="hide-menu" class="btn-header pull-right">
<span> <a href="javascript:void(0);" title="Collapse Menu"><i class="fa fa-reorder"></i></a> </span>
</div>
<!-- end collapse menu -->
<!-- logout button -->
<div id="logout" class="btn-header transparent pull-right">
<span> <a href="login.html" title="Sign Out"><i class="fa fa-sign-out"></i></a> </span>
</div>
<!-- end logout button -->
@Html.Partial("_LoginPartial")
</div>
<!-- end pulled right: nav area -->
</header>
<!-- END HEADER -->
<!-- Left panel : Navigation area -->
<!-- Note: This width of the aside area can be adjusted through LESS variables -->
<aside id="left-panel">
<!-- User info -->
<div class="login-info">
<span>
<!-- User image size is adjusted inside CSS, it should stay as it -->
<a href="javascript:void(0);" id="show-shortcut">
<img src="~/Areas/Admin/Template/img/avatars/sunny.png" alt="me" class="online" />
<span>
john.doe
</span>
<i class="fa fa-angle-down"></i>
</a>
</span>
</div>
<!-- end user info -->
<!-- NAVIGATION : This navigation is also responsive
To make this navigation dynamic please make sure to link the node
(the reference to the nav > ul) after page load. Or the navigation
will not initialize.
-->
<nav>
<!-- NOTE: Notice the gaps after each icon usage <i></i>..
Please note that these links work a bit different than
traditional hre="" links. See documentation for details.
-->
<ul>
<li class="active">
<a href="~/admin/" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Dashboard</span></a>
</li>
<li class="active">
<a href="~/admin/electricitycounterPart/" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">ElAvtal</span></a>
</li>
<li class="active">
<a href="~/admin/alarmcounterpart/" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">LarmAvtal</span></a>
</li>
<li class="active">
<a href="~/admin/realestatecounterpart/" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">MäklarAvtal</span></a>
</li>
</ul>
</nav>
<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i> </span>
</aside>
<!-- END NAVIGATION -->
<!-- MAIN PANEL -->
<div id="main" role="main">
<!-- MAIN CONTENT -->
<div id="content">
@RenderBody()
</div>
<!-- END MAIN CONTENT -->
</div>
<!-- END MAIN PANEL -->
<!--================================================== -->
<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
<script data-pace-options='{ "restartOnRequestAfter": true }' src="~/Areas/Admin/js/plugin/pace/pace.min.js"></script>
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="~/Areas/Admin/js/libs/jquery-2.0.2.min.js"><\/script>');
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="~/Areas/Admin/js/libs/jquery-ui-1.10.3.min.js"><\/script>');
}
</script>
<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
<script src="~/Areas/Admin/js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->
<!-- BOOTSTRAP JS -->
<script src="~/Areas/Admin/js/bootstrap/bootstrap.min.js"></script>
<!-- CUSTOM NOTIFICATION -->
<script src="~/Areas/Admin/js/notification/SmartNotification.min.js"></script>
<!-- JARVIS WIDGETS -->
<script src="~/Areas/Admin/js/smartwidgets/jarvis.widget.min.js"></script>
<!-- EASY PIE CHARTS -->
<script src="~/Areas/Admin/js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>
<!-- SPARKLINES -->
<script src="~/Areas/Admin/js/plugin/sparkline/jquery.sparkline.min.js"></script>
<!-- JQUERY VALIDATE -->
<script src="~/Areas/Admin/js/plugin/jquery-validate/jquery.validate.min.js"></script>
<!-- JQUERY MASKED INPUT -->
<script src="~/Areas/Admin/js/plugin/masked-input/jquery.maskedinput.min.js"></script>
<!-- JQUERY SELECT2 INPUT -->
<script src="~/Areas/Admin/js/plugin/select2/select2.min.js"></script>
<!-- JQUERY UI + Bootstrap Slider -->
<script src="~/Areas/Admin/js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- browser msie issue fix -->
<script src="~/Areas/Admin/js/plugin/msie-fix/jquery.mb.browser.min.js"></script>
<!-- FastClick: For mobile devices -->
<script src="~/Areas/Admin/js/plugin/fastclick/fastclick.js"></script>
<!--[if IE 7]>
<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>
<![endif]-->
<!-- Demo purpose only -->
<script src="~/Areas/Admin/js/demo.js"></script>
<!-- MAIN APP JS FILE -->
<script src="~/Areas/Admin/js/app.js"></script>
<!-- PAGE RELATED PLUGIN(S)
<script src="..."></script>-->
<script type="text/javascript">
// DO NOT REMOVE : GLOBAL FUNCTIONS!
$(document).ready(function () {
pageSetUp();
})
</script>
@*@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)*@
<!-- Your GOOGLE ANALYTICS CODE Below -->
</body>
</html>
答案 0 :(得分:3)
我认为您使用的是Visual Studio 2013?安装Web Essentials插件然后启动应用程序,然后缩小浏览器窗口 - 使用inspect功能将鼠标悬停在浏览器中的div上 - 它应突出显示正在呈现div的Visual Studio中的代码。
答案 1 :(得分:2)
你可以在这里找到一个很棒的SmartAdmin集成到MVC .NET教程:
http://myorange.ca/supportforum/question/how-to-integrate-smartadmin-1-4-x-into-asp-net-mvc-5