我正在用 MVC 4、knout、web api、bootstrap 等构建一个 SPA。我想知道是否有更好的解决方案,或者我在以下情况下做错了什么:
MainLayout 仅适用于正文:
<body>
<div class="container-fluid">
<div class="row-fluid">
top Menu Here
</div>
<div class="row-fluid">
<div class="span2">
Left Menu Here with links like:
@Ajax.ActionLink("Management and Configuration", "Index", "Environments", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "ContentPanel" })</li>
<div id="footer">
<p>© Copyright 2012</p>
</div>
</div>
<div class="span10">
<section>
<div id="alerts"></div>
<div id="ContentPanel">
@this.RenderBody()
</div>
</section>
</div>
</div>
</div>
@Scripts.Render("~/js")
@Scripts.Render("~/js/jqueryui")
@Scripts.Render("~/js/jqueryval")
@Scripts.Render("~/js/knockout")
@Scripts.Render("~/js/modernizr")
@Scripts.Render("~/js/app")
@Scripts.Render("~/js/widgets")
@RenderSection("Scripts", required: false)
</body>
1st - I have a Side Nav Menu with bootstrap and when a link is selected the class change to active so the background will be different so i use jquery to acomplish this part.
$(document).ready(function() {
$('#mainMenu > li').click(function (e) {
//e.preventDefault();
$('#mainMenu> li').removeClass('active');
$(this).addClass('active');
});
//BTW i want some slide effect for the views incoming,
//correct me if this is not the correct way to do it
$("#ContentPanel").effect("slide", {}, 700);});
2nd - 使用控制器查看代码:
控制器:
public ActionResult Index()
{
return View();
}
看法:
@{
ViewBag.Title = "Environments";
}
@section Scripts {
Script Templates Here
Scripts for Knockout Viewmodel and Actions Here (i will move to another file)
}
<div class="span3" data-bind="block : $root.isLoading">
All the HTML Content Here
</div>
3th - 我为 Ajax 调用创建了一个新的布局,这样我就可以为每个视图保留脚本部分。
新版面:
@RenderBody()
@RenderSection("scripts", required: false)
4th - 我更改了 _ViewStart 文件来管理布局:
_ViewStart 文件:
@{
Layout = Request.IsAjaxRequest() ? "~/Views/Shared/_Layout.cshtml" : "~/Views/Shared/_BootstrapLayout.cshtml";
}
最后,一切正常,但就像我说的,有没有更好的解决方案?还是我使用了一些不好的资源?
此致,