angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面 [英] angularjs with cshtml page only not html pages with web api 2
问题描述
我有asp.净 mvc4 项目.Angularjs 已集成.我已经按照以前的要求构建了 HTML 页面和 WEB API 2.
I'm having asp. net mvc4 project. Angularjs is integrated. I have already built HTML pages and WEB APIs 2 as per previous requirements.
现在出于某种原因，我不得不使用 CSHTML 页面.以前我只有 web api 项目模板，所以我不能使用 cshtml 页面，因为只有 MVC 控制器可以返回部分页面(cshtml)但我只使用 web apis...
Now for some reason i have to go with CSHTML pages. previously I had only web api project template so i couldnt go with cshtml pages as ONLY MVC controller can return partial page(cshtml) but i was using only web apis...
所以改变了整个项目模板，所以现在我可以拥有 mvc 控制器......
So changed whole project template and so now i can have mvc controllers... ...
简而言之，目前我有已经构建的 web apis 和 html 页面的 mvc4 项目.....
In short, currently I have mvc4 project with already built web apis and html pages.....
我只想使用 CSHTML 页面而不是使用 HTML 页面，其余的东西应该保持原样......
I just want to use CSHTML pages instead of using HTML pages rest things should be as they are...
有可能吗?
我可能听起来很傻，但现在需要它.帮助将不胜感激...
I may sound silly but it is need right now. help would be greatly appreciated...
仅限 Web api、cshtml 页面和 angularjs.不是 web api、html 页面和 angularjs.
Web apis, cshtml pages and angularjs only. not web apis, html pages and angularjs.
如果我将 html 页面替换为 cshtml， angular route 会如何受到影响?
If I replace html pages by cshtml, how would angular route get affected?
推荐答案
嗯，这就是我使用它的方式.
Well, this is how I use it.
有这样的index.cshtml
There is index.cshtml like this
@using System.Web.Optimization
@inherits System.Web.Mvc.WebViewPage
@{ Layout = null; }<!DOCTYPE html>
<html data-ng-app="MyProject">
<head>
<title data-ng-controller="TitleCtrl" data-ng-bind="Title">My Project</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
@Styles.Render("~/Content/min/css")
</head>
<body class="body" id="body">
<div class="body" data-ui-view="body"></div>
@Scripts.Render("~/js/angular")
@Scripts.Render("~/js/MyProject")
</body>
</html>
注意:使用 angular UI-Router，这就是为什么 ui-view 在 palce
NOTE: using angular UI-Router, that's why ui-view is in palce
但仍然必须有HomeController:
But still there must be HomeController:
public class HomeController : Controller
{
public ActionResult Index()
{
// below I do some tricks to make app running on
// http://mydomain/app as well as on
// http://mydomain/app/ (see the / at the end)
var root = VirtualPathUtility.ToAbsolute("~/");
var applicationPath = Request.ApplicationPath;
var path = Request.Path;
var hasTraillingSlash = root.Equals(applicationPath
, StringComparison.InvariantCultureIgnoreCase)
|| !applicationPath.Equals(path
, StringComparison.InvariantCultureIgnoreCase);
if (!hasTraillingSlash)
{
return Redirect(root + "#");
}
// my view is not in Views, but in the root of a web project
return View("~/Index.cshtml");
}
}
所以，通过这种方式，我可以使用 Bundle 配置(javascript、css)的强大功能……同时从 http://mydomain/app 或 http://mydomain/开始 angular应用程序/.检查类似的这里
So, this way I can use power of Bundle configureation (javascript, css) ... while starting angular at http://mydomain/app or http://mydomain/app/. Check also similar here
同样在 global.asax 中，我们应该配置 ASP.NET MVC:
Also in global.asax, we should configura ASP.NET MVC:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.IgnoreRoute("fonts*.woff");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new {controller = "Home", action = "Index", id =UrlParameter.Optional}
);
}
而 Web API 应该是:
while web API should be:
const string IdPattern = @"\d+|[A-Za-z]{1,2}";
public static void SetRouting(HttpConfiguration config)
{
// some custom routes
...
// and a default one
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}"
, constraints: new { id = IdPattern }
, defaults: new { id = RouteParameter.Optional }
);
这篇关于angularjs 仅带有 cshtml 页面，而不是带有 web api 2 的 html 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
