3

MVC 4、ノックアウト、Web API、ブートストラップなどを使用して 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>&copy; 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>

1つ目-ブートストラップ付きのサイドナビゲーションメニューがあり、リンクが選択されるとクラスがアクティブに変更されるため、背景が異なるため、jqueryを使用してこの部分を完成させます。

$(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);});

2番目 - コントローラーを使用したViewコード:

コントローラ：

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>

3 日 - Ajax 呼び出し用の新しいレイアウトを作成して、各ビューのスクリプト セクションを保持できるようにしました。

新しいレイアウト:

@RenderBody()

@RenderSection("scripts", required: false)

4番目 - レイアウトを管理するために _ViewStart ファイルを変更しました:

_ViewStart ファイル:

@{
  Layout = Request.IsAjaxRequest() ? "~/Views/Shared/_Layout.cshtml" : "~/Views/Shared/_BootstrapLayout.cshtml";
}

最後に、すべて正常に動作しますが、私が言ったように、より良い解決策はありますか? または私は悪いいくつかのリソースを使用していますか？

よろしくお願いします、

4

1 に答える 1