Rendering tylko części strony

0

Witam,

Chciałbym renderować na swojej stronie tylko content body ( @Renderbody)
Zarówno menu jak górny pasek powinny być zaczytywane tylko raz podczas uruchomienia strony.
Celem końcowym jest optymalizacja działania strony oraz wykorzystanie skryptu javascript do pokolorowania tła na biało aktualnie wczytanego contentu strony. Jak takie coś można osiągnąć ?

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qwe</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

	<!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
	@Scripts.Render("~/bundles/jquery")
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
   <link href="@Url.Content("~/Content/kendo/2015.1.408/kendo.common-material.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2015.1.408/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2015.1.408/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2015.1.408/kendo.material.min.css")" rel="stylesheet" type="text/css" />
	<link href="@Url.Content("~/Content/kendo/2015.1.408/kendo.dataviz.material.min.css")" rel="stylesheet" type="text/css" />
	<script src="@Url.Content("~/Scripts/kendo/2015.1.408/jquery.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo/2015.1.408/jszip.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo/2015.1.408/kendo.all.min.js")"></script>
	<script src="@Url.Content("~/Scripts/kendo/2015.1.408/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
    <link href="@Url.Content("~/Content/style.css")" rel="stylesheet" type="text/css" />

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @* @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    @*<li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>*@
                    <li>@Html.ActionLink("System", "Index", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="leftcontent">

        <div class="search-mini-wrapper">
            <form action="#" class="search-mini">
                <input name="search" type="text" placeholder="Wyszukaj..." />
                <button type="submit">
                    <i class="icon-search"></i>
                </button> 
            </form>
        </div>
        <div class="sidebar-menu" id="main-menu">
            <div class="sidebar-menu-item-wrapper" onclick="show('page1');">
                <i class="icon-inbox"></i>
                @Html.ActionLink("Strona główna", "Index", "Home")
            </div>
            <div class="sidebar-menu-item-wrapper">
                <a href="#" data-target-page="page-stats-and-reports">
                    <i class="icon-inbox"></i>
                    @Html.ActionLink("Str1", "Index", "Home")
                </a>
            </div>
            <div class="sidebar-menu-item-wrapper" onclick="show('page2');">
                <i class="icon-inbox"></i>
                @Html.ActionLink("Str2", "Index", "Home")
            </div>
            <div class="sidebar-menu-item-wrapper">
                <a href="#" data-target-page="page-stats-and-reports">
                    <i class="icon-inbox"></i>
                    @Html.ActionLink("Str3", "Index", "Home")
                </a>
            </div>
        </div>
    </div>
    <div class="rightcontent">
           @RenderBody()
    </div>
     
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

<script>
    $('.sidebar-menu').on('click', '.sidebar-menu-item-wrapper', function () {
        $(this).parent().find('.sidebar-menu-item-wrapper').css('background-color', '');
        $(this).css('background-color', '#ffffff');
    });
    </script>
0

http://www.pzielinski.com/?p=1840 powinno pomóc

0

Nie rozwiązało problemu:
przy renderbody i tak odświeża całą stronę.

Próbuję to obejść przez fragment javascriptu :

    document.getElementById("linkqqq").onclick = function () { loadcontent(); };
    function loadcontent() {
        $("#contentdowczytania").load('@Url.Action("Index","Settings")');
    }

Jednak wtedy ładuje podwójne menu ;(

1 użytkowników online, w tym zalogowanych: 0, gości: 1