Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

ASP.NET MVC 4 Jquery Slide View

Posted on 2016-07-25
3
Medium Priority
?
580 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
Prakash Samariya earned 2000 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 13

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 13

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

618 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