您的位置: 首页  >  技术问答  >  Angular路由模板URL是否支持ASP.Net MVC 5项目中的* .cshtml文件？

Angular路由模板URL是否支持ASP.Net MVC 5项目中的* .cshtml文件？

分类: 技术问答 • 2022-05-28 23:43:01
问题描述：

我正在开发一个MVC 5项目。当我在我的视图中使用html页面时，它会加载该页面，但是当我使用.cshtml页面时，它不会加载视图。出现空白页面。

I am working on a MVC 5 project. When I use a html page at my views, it load that page but when I use .cshtml page it is not loading the view. The Blank page appears.

$urlRouterProvider
    .otherwise('/app/dashboard');

$stateProvider            
    .state('app', {
        abstract: true,
        url: '/app',
        templateUrl: 'tpl/app.html'
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'tpl/app_dashboard.html'
    })

请指导我如何使用cshtml文件或最好的方法。

Please guide me how to use cshtml file or the best way to do it.

答

是的，你可以。



为 Yasser's ，但使用ngRoute：

Yes, you can.

Adding a similar answer to Yasser's, but using ngRoute:

1）而不是引用你的部分HTML，您需要将Controller / Action引用到您的ASP.NET MVC应用程序。

1) Instead of referencing your partial HTML, you need to reference a Controller/Action to your ASP.NET MVC app.

.when('/order', {
    templateUrl: '/Order/Create',
    controller: 'ngOrderController' // Angular Controller
})

2）您的ASP.NET MVC将返回.cshtml查看：

2) Your ASP.NET MVC will return a .cshtml view:

public class OrderController : Controller
{
    public ActionResult Create()
    {
        var model = new MyModel();
        model.Test= "xyz";

        return View("MyView", model);
    }
}

3）你的MyView.cshtml会混合使用Razor和Angular 。注意：作为Angular应用程序的一部分，将布局设置为null。

3) Your MyView.cshtml will mix Razor and Angular. Attention: as its a partial for your Angular app, set the layout as null.

@model MyProject.MyModel

@{
   Layout = null;
}

<h1>{{ Test }}</h1> <!-- Angular -->
<h1>Model.Test</h1> <!-- Razor -->

相关推荐