[英]AngularJS - ui-router - MVC 5 - html5mode
I am trying to create a mini SPA with AngularJS and MVC 5 . 我正在尝试使用AngularJS和MVC 5创建一个迷你SPA。 In addition to that, I want to use ui-router plugin for AngularJS instead of ng-route and want to enable html5mode . 除此之外,我想为AngularJS使用ui-router插件而不是ng-route并且想要启用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. 我的问题是,每当我点击一个锚元素时,它刷新页面并向ASP.NET MVC控制器发送请求并将所选视图放在正确的位置,我希望它不重新加载。
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. 如果我将AngularJS路由机制更改为ng-route,那么它可以按照我的意愿工作,不刷新页面,并路由到所选视图。
In MVC 5 RouteConfig.cs file, 在MVC 5 RouteConfig.cs文件中,
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, 在AngularJS的app.js文件中,
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; 在_Layout.cshtml文件中用于锚点;
<a data-ui-sref="dashboard" title="Dashboard">
In same _Layout.cshtml file for view placeholder 在视图占位符的相同_Layout.cshtml文件中
<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 :) 任何想法都赞赏:)
It might help you!! 它可能会帮助你!!
By doing this: 通过做这个:
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. 等等
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.