up vote 6 down vote favorite
2

I am trying to create a mini SPA with AngularJS and MVC 5. In addition to that, I want to use ui-router plugin for AngularJS instead of ng-route and want to enable html5mode.

My problem is, whenever I click on an anchor element, it refreshes the page and sends request to ASP.NET MVC controller and puts the selected view in the right place, I want it not to reload.

If I change AngularJS routing mechanism to ng-route, then it works as I wanted, does not refreshes the page, and routes to the selected view.

In MVC 5 RouteConfig.cs file,

        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "SpaUI",
            url: "{SpaUI}/{*catchall}",
            defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
        );

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "SpaUI", action = "Index", id = UrlParameter.Optional }
        );

In app.js file for AngularJS,

app.config(['$stateProvider', '$provide', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $provide, $locationProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/Dashboard');

    $stateProvider
    .state("dashboard", {
        url: "/Dashboard",
        templateUrl: "AngularViews/dashboard.html"
    })

    .state("test", {
        url: "/Test",
        templateUrl: "AngularViews/test.html"
    });

    $locationProvider.html5Mode(true);
 }]);

In _Layout.cshtml file for anchors;

 <a data-ui-sref="dashboard" title="Dashboard">

In same _Layout.cshtml file for view placeholder

 <div id="content" data-ui-view="" class="view-animate"></div>

How can I make all of these things play together without reloading the page? Any ideas are appreciated :)

share|improve this question
up vote 0 down vote

It might help you!!

By doing this:

  • Remove the "app" route complexity, and use the standard route.
  • Add the rewrite rule.
  • Remove the base href from the layout.

For example look like this.

public static class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.LowercaseUrls = true;
        routes.MapRoute("Default", "{controller}/{action}/{id}", new
        {
            controller = "Home",
            action = "Index",
            id = UrlParameter.Optional
        }).RouteHandler = new DashRouteHandler();
    }
}

and 

public class DashRouteHandler : MvcRouteHandler
{
    /// <summary>
    ///     Custom route handler that removes any dashes from the route before handling it.
    /// </summary>
    /// <param name="requestContext">The context of the given (current) request.</param>
    /// <returns></returns>
    protected override IHttpHandler GetHttpHandler(RequestContext requestContext)
    {
        var routeValues = requestContext.RouteData.Values;

        routeValues["action"] = routeValues["action"].UnDash();
        routeValues["controller"] = routeValues["controller"].UnDash();

        return base.GetHttpHandler(requestContext);
    }
}

etc.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.