Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

ASP.NET MVC 4 Jquery Slide View

Posted on 2016-07-25
3
Medium Priority
?
620 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 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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

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 article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses
Course of the Month20 days, 18 hours left to enroll

810 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