MVC中的单页面应用程序

时间:2013-01-21 06:52:22

标签: jquery asp.net-mvc razor asp.net-mvc-4 single-page-application

我是MVC新手.....

我对单页应用程序有一些问题....

通过使用...我想制作这种网页...   http://www.irealities.com/#team

  1. 我尝试过的内容的描述...... ================================================== ==================================
  2. <!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/modernizr")
        </head>
    
                 @**************SCRIPT CODE TO MAKE APPLICATION ONE SCROLL *************@
    
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".contactLink").click(function () {
                if ($("#contactForm").is(":hidden")) {
                    $("#contactForm").slideDown("slow");
                }
                else {
                    $("#contactForm").slideUp("slow");
                }
            });
        });
        function closeForm() {
            $("#messageSent").show("slow");
            setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
        }
    
        $(document).ready(function () {
            function filterPath(string) {
                return string
                  .replace(/^\//, '')
                  .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
                  .replace(/\/$/, '');
            }
            $('a[href*=#]').each(function () {
                if (filterPath(location.pathname) == filterPath(this.pathname)
                && location.hostname == this.hostname
                && this.hash.replace(/#/, '')) {
                    var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
                    var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
                    if ($target) {
                        var targetOffset = $target.offset().top;
                        $(this).click(function () {
                            $('html, body').animate({ scrollTop: targetOffset }, 1000);
                            var d = document.createElement("div");
                            //d.style.height = "101%";
                            d.style.overflow = "hidden";
                            document.body.appendChild(d);
                            window.scrollTo(0, scrollToM);
                            setTimeout(function () {
                                d.parentNode.removeChild(d);
                            }, 10);
                            return false;
                        });
                    }
                }
            });
        });
        </script>
        <body>
          <section id="main">
             @RenderBody()
         </section>
    
    
     <div id="header">
      <table>
       <tr>
         <td><img src="Midasnext.png" alt="Midasnext LOGO" width="400" height="110">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
         <td><div id="nav">        
            <a href="#HOME" class="Circle">HOME</a>
            <a href="#ABOUT" class="Circle">ABOUT</a>
            <a href="#SERVICES" class="Circle">SERVICES</a>
            <a href="#CLIENTS" class="Circle">CLIENTS</a>
            <a href="#CONTACT" class="Circle">CONTACT</a></div>
         </td>
       </tr>
      </table>
     </div>
    
    
    <div id="page-wrap">
    
        <div id="page1">
    
            <a name="HOME"></a>
            <div class="page-padding"></div>
            @*@RenderPage("~/Views/Clients/Index.cshtml")*@
             @*<% Html.RenderPartial("~/Views/Clients/Index.cshtml"); %>*@
            <p>This is what you see on the HOME page.</p>
        </div> <!--END page1-->
    
        <div id="page2">
            <a name="ABOUT"></a>
            <div class="page-padding"></div>
            <p>This is what you would see on the ABOUT page.</p>
        </div> <!--END page2-->
    
        <div id="page3">
            <a name="SERVICES"></a> 
            <div class="page-padding"></div>
            @*@RenderPage("~/Views/Home/Contact.cshtml")*@
            <p>This is what you see on the SERVICES page.</p>
        </div> <!--END page3-->
    
        <div id="page4">
            <a name="CLIENTS"></a>
            <div class="page-padding"></div>
            <p>This is what you would see on the CLIENTS page.</p>
        </div> <!--END page2-->
    
        <div id="page5">
            <a name="CONTACT"></a> 
            <div class="page-padding"></div>
             @*@RenderPage("~/Views/Home/Contact.cshtml")*@
            <p>This is what you see on the Contact page.</p>
        </div> <!--END page3-->
    
    
    </div> <!--END page-wrap-->
        </body>
    
    </html>
    

    =============================================== ==========================================

    2。错误: -

    假设我点击了客户菜单项,然后它在客户页面和页面末尾显示客户端的内容。

    我很困惑,该怎么做以及该怎么做? 请告诉我MVC中的任何解决方案......

0 个答案:

没有答案