Question

我正在努力实施我的ASP.NET MVC应用程序中的https://github.com/jonfazzaro/mvc-spa/tree/master/mvc-spa。

我将突出显示_Layout.cshtml中的代码

 <div id="body">
        @RenderSection("featured", required: false)
        <section id="page" class="content-wrapper main-content clear-fix">
            @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>

    @*@Scripts.Render("~/bundles/jqueryui")*@
    @Scripts.Render("~/js/mvc-spa")
    <script>
        $(function () {
            var routing = new Routing('@Url.Content("~/")', '#page', '');
            routing.init();
        });
    </script>

这里是从git hub再次路由配置

var Routing = function (appRoot, contentSelector, defaultRoute) {

function getUrlFromHash(hash) {
    var url = hash.replace('#/', '');
    if (url === appRoot)
        url = defaultRoute;
    return url;
}

return {
    init: function () {
        var app = Sammy(contentSelector, function () {
            this.get(/\#\/(.*)/, function (context) {
                var url = getUrlFromHash(context.path);
                context.load(url).swap();
            });
        })

        app.run('#/');
    }
};

}

如果我转到/＃/ about或/＃/ contact（如git hub中的示例应用程序），一切看起来都不错，但导航到我的应用页面的＃/（根路径）时，一遍又一遍地调用

发生了什么事？

我问自己的另一个问题是如何处理404错误什么时候去/＃/ nosuchurl

Answer 1

有点晚了，但我希望这对某人有帮助。

我想问题是你将整个索引作为包含布局中所有内容（脚本，css等）的视图加载。

我正在使用Sammy.js和MVC网络应用程序进行测试，这是有效的：

_Layout：

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#/Home/_Index">Home</a></li>
                <li><a href="#/Home/About">About</a></li>
                <li><a href="#/Home/Contact">Contacto</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container body-content" id="page">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<script>
    $(function () {
        var routing = new Routing('@Url.Content("~/")', '#page', '');
        routing.init();
    });
</script>

HomeController中：

public class HomeController : Controller {
    public ActionResult Index() {
        return View();
    }

    public ActionResult _Index() {
        return PartialView();
    }

    public ActionResult About() {
        ViewBag.Message = "Your application description page.";

        return PartialView();
    }

    public ActionResult Contact() {
        ViewBag.Message = "Your contact page.";

        return PartialView();
    }
}

GitHub中的示例附带的路由文件：

var Routing = function (appRoot, contentSelector, defaultRoute) {

function getUrlFromHash(hash) {
    var url = hash.replace('#/', '');
    if (url === appRoot)
        url = defaultRoute;
    return url;
}

return {
    init: function () {
        Sammy(contentSelector, function () {
            this.get(/\#\/(.*)/, function (context) {
                var url = getUrlFromHash(context.path);
                context.load(url).swap();
            });
        }).run('#/');
    }
};}

Sammy.js路由无限循环

1 个答案: