Solved

ASP.NET MVC 4 Jquery Slide View

Posted on 2016-07-25
3
209 Views
Last Modified: 2016-07-27
I had this question after viewing Transitions in mvc.

I was able to get some of the jQuery Slide to work, but it is not quite what I'm looking for

I have some parts of the view that render.  

Here is what I did:

  • Create a sample Intranet MVC 4 project with VS2012



ss1
  • Add PageScripts section to the about.cshtml

@section PageScripts{
    
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".makeitslide").show("slide", 1000);
            });
    </script>
}

Open in new window


  • Add DIV around the html in the about.cshtml

<div class="makeitslide">
(All page html in here)
</div>

Open in new window


  • Add RenderSection PageScripts to the _Layout.cshtml

@RenderSection("PageScripts",false)

Open in new window


  • Move jquery reference in _layout.cshtml

This line of code was generated at the bottom, I had to move it to the top so that it was available when the about.cshtml was called.

 @Scripts.Render("~/bundles/jquery")

Open in new window


Attached is a short swf video to demonstrate the about page slide in.  

The question is how to make everything slide in?  Notice that only part of the page content slides in.  The rest just renders after the initial item slides in.
2016-07-25_1414.swf
0
Comment
Question by:Jeff Darling
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
Prakash Samariya earned 500 total points
ID: 41729432
I guess, you want to slide all the content pages, right? If yes then,

Put below code into _layout.cshtml in header section
 
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".makeitslide").show("slide", 1000);
            });
    </script>

Open in new window

In body there is container div like
 <div class="container body-content"> 

Open in new window

add css class to container div like
<div class="container body-content makeitslide">

Open in new window

your content pages should be simple html code.

This will work!
1
 
LVL 12

Author Comment

by:Jeff Darling
ID: 41729522
That is one idea.  It would mean that all layouts would slide.  

I tried it, but now I'm having trouble getting the javascript to fire.  

_layout.cshtml


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @section PageScripts{
        <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $(".makeitslide").show("slide", 1000);
                alert("fired!");
            });
        </script>
    }
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">

        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix makeitslide">
            @RenderBody()
        </section>

    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>



</body>
</html>

Open in new window

0
 
LVL 12

Author Comment

by:Jeff Darling
ID: 41731889
I got this working, but, I had to remove @section PageScripts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")

        <script type="text/javascript">
            $(document).ready(function () {
                $(".makeitslide").show("slide", 1000);
                //alert("hello");
            });
        </script>
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
            </div>
            <div class="float-right">
                <section id="login">
                </section>
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
     

        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix makeitslide">
            @RenderBody()
        </section>

    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>


    @RenderSection("Scripts", required: false) 
</body>
</html>

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
The viewer will learn how to dynamically set the form action using jQuery.

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question