Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
643 views
in Technique[技术] by (71.8m points)

asp.net mvc - angularjs with cshtml page only not html pages with 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.

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...

So changed whole project template and so now i can have mvc controllers... ...

In short, currently I have mvc4 project with already built web apis and html pages.....

I just want to use CSHTML pages instead of using HTML pages rest things should be as they are...

Is it possible?

I may sound silly but it is need right now. help would be greatly appreciated...

Web apis, cshtml pages and angularjs only. not web apis, html pages and angularjs.

If I replace html pages by cshtml, how would angular route get affected?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Well, this is how I use it.

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>

NOTE: using angular UI-Router, that's why ui-view is in palce

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");
    }
}

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

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}
    );
}

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 }
    );

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...