CODEWITHSUNDEEP
asp.net-mvcmodel-view-controllerasp.net-mvc-5single-page-applicationsammy.js
user3877350
user3877350

Reputation: 5

Sammy.js routing endless loop

I'm trying to implement https://github.com/jonfazzaro/mvc-spa/tree/master/mvc-spa in my ASP.NET MVC application.

I will just highlight code from _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>

here is routing config again from 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('#/');
    }
};

}

If I go to /#/about or /#/contact (as in example app from git hub) everything looks fine but when navigate to #/ (root-path) of my app page has being called over and over again

What is going on?

Another question I ask my self is how to handle 404 error when going to /#/nosuchurl

Upvotes: 0

Views: 767

Answers (1)

Lester
Lester

Reputation: 750

A little bit late, but I hope this is helpgul for someone.

I guess the problem is that you're loading the entire Index as a view with all the content (scripts, css, etc) from the layout.

I was testing with Sammy.js and MVC web app too and this is working:

The _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();
    }
}

And the Routing file that comes with the sample in 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('#/');
    }
};}

Upvotes: 1

Related Questions