CODEWITHSUNDEEP
htmlasp.net-mvctwitter-bootstrapscrollspy
Ron
Ron

Reputation: 1894

Scrollspy Implementation With MVC 4

I have a web application based on MVC 4 framework with Bootstrap(twitter) and i want to make one of my pages a one page navigation with a scrollspy:

I have a fixed navbar at the top throughout my site and in one page of the site i want i addition a side bar ("nav nav-pills nav-stacked pull-left") with a scrollspy.

col-md-3 = on the left that will be storing my sidebar

col-md-9 = on the right that will be storing my context

I try different things and nothing seem to work, one thing that i notice is that i need to add to the body tag:

<body data-spy="scroll" data-target="#side-nav">

but in MVC the body tag is on the "_layout" and i don't want to touch this shared partial view.

What can i do ? maybe someone has implement this feature in MVC and could give me a small example of it ?

This is my code : 

@{
    ViewBag.Title = "Designer";
}

    <div class="row">


    <div class="col-md-3">
        @* Index *@
        <div class="nav-pills pull-left affix navspy">
            <div id="side-nav">
                <ul class="nav">
                    <li><a href="#general">General</a></li>
                    <li><a href="#words">Words</a></li>
                    <li><a href="#filetype">File Type</a></li>
                    <li><a href="#routes">Routes</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-9">

    <div id="general">
        @* Section Gereral *@
        <h2 class="page-header">Gereral</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div class="active" id="words">
        @* Section Words *@
        <h2 class="page-header">Words</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div id="filetype">
        @* Section File Type *@
        <h2 class="page-header">File Type</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div id="routes">
        @* Section Routes *@
        <h2 class="page-header">Routes</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

</div>

</div>

<script>
    $(document).ready(function () {
        $('body').attr("data-spy", "scroll");
        $('body').attr("data-target", "#side-nav");

    });
</script>

What i'm missing here ?

Upvotes: 0

Views: 1015

Answers (1)

ɐsɹǝʌ ǝɔıʌ
ɐsɹǝʌ ǝɔıʌ

Reputation: 4512

You can use javascript to add attributes dynamically to the <body> tag.

Add this script just to the page where the scrollspy is. When it is loaded inside the _Layout, the attributes will be added to the <body> tag.

yourPage.cshtml

@{
    ViewBag.Title = "Designer";
}

@section scripts
{
    <script>
            $(document).ready(function(){        
                $( 'body' ).attr("data-spy","scroll");
                $( 'body' ).attr("data-target","#side-nav");  

            });
    </script>
}

[...]

Shared \ _Layout.cshtml

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    [...]

        @RenderBody()       

    [...]

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", false)
</body>
</html>

Upvotes: 0

Related Questions