Angular ng-include cshtml 页面答案

【问题标题】：Angular ng-include cshtml pageAngular ng-include cshtml 页面
【发布时间】：2014-01-15 02:38:06
【问题描述】：

我正在与 Angular 进行斗争，以使其在 ng-view 之外包含部分 cshtml 视图。

这是我的主要观点：

<div class="container">
    <div class="header">
        <div class="loginView">
            <div ng-include="Home/Template/login"></div>
        </div>
    </div>
</div>

<div class="container">
    <div ng-view></div>
</div>

这是我的部分 Login.cshtml：

<form name="login" ng-controller="LoginCtrl" class="form-inline">
    <div class="form-group"><input type="text" name="loginName" class="form-control input-sm" placeholder="Brugernavn" oninvalid="this.setCustomValidity('Indtast brugernavn')" ng-model="UserData.LoginName" ng-required="true"></div>
    <div class="form-group"><input type="text" name="password" class="form-control input-sm" placeholder="Kodeord" oninvalid="this.setCustomValidity('Indtast kodeord')" ng-model="UserData.Password" ng-required="true"></div>
    <div class="form-group">
        <button class="btn btn-primary btn-sm" ng-click="Login()" ng-disabled="login.password.$error.required || login.loginName.$error.required">Login</button>
    </div>
</form>

我使用 mvc 返回对 url 调用的特定部分视图，如下所示：

   public ActionResult Template(string id)
    {
        switch (id.ToLower())
        {
            case "login":
                return PartialView("~/Views/Account/Partials/Login.cshtml");
            case "register":
                return PartialView("~/Views/Account/Partials/Register.cshtml");
            case "main":
                return PartialView("~/Views/Main/MainPage.cshtml");
            default:
                throw new Exception("template not known");
        }
    }

基本上，我相信 ng-include 应该调用 url ，它将返回 html 到将包含在页面上的内容。但事实并非如此，模板方法根本没有被调用。我当然可以在母版页上包含整个模板，但稍后登录后我想用登录的用户数据模板替换这个模板。

知道如何解决这个问题吗？

【问题讨论】：

刚刚用完全相同的 url 对其进行了测试，一切正常，看起来 ng-include 想要直接链接到 html 页面而不是先通过服务器
真的，您需要做的就是使用内置帮助器Html.Partial("_PartialName") - 然后您可以在部分内部使用{{angularData}}，只要您的角度控制器在首页中定义了这些值.我认为通过 ng-include 路线，您可能会为自己复杂化。请记住，Angular 是为在单个页面上使用 API 服务而构建的。 MVC 和 Razor 是一种已经具备所有这些功能的全功能语言。将它们结合起来有点挑剔。恕我直言，没必要，但它就是这样。

标签： asp.net-mvc angularjs razor

【解决方案1】：

ng-include 评估一个表达式，如果您要直接加载路径，请确保使用两组引号。

<div ng-include="'Home/Template/login'"></div>

【讨论】：

真的很容易犯错误，但让 ng-include 更强大。很高兴为您提供帮助！

【解决方案2】：

在处理 MVC 和 AngularJS 时，只要您遵循任何定义的路线 {Controller}/{Action}... 模式，那么您应该没问题。请记住，您在这里处理的不再是页面 URL，而是操作。

您也可以在 app.js 文件中定义 $routeProvider，以类似的方式：

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/login',
                {
                    controller: 'LoginController',                        
                    templateUrl: 'http://mysite/Account/Login'
                })
             .when('/register',
                {
                    controller: 'RegisterController',                        
                    templateUrl: 'http://mysite/Account/Register'
                })                 
              .when('/main',
                {
                    controller: 'HomeController',                              
                    templateUrl: 'http://mysite/Home/Index'
                })
              .otherwise({ redirectTo: '/main' });
});

【讨论】：

这个答案似乎太宽泛，无法回答 OP 的问题。请根据提供的代码 sn-ps 提供一些示例。

【解决方案3】：

要在asp.net mvc5中使用angular js调用局部视图，这样写：

<ng-include src="'@Url.Action("method_name", "Controller_name")'"></ng-include>

它还记得你的控制器方法必须以这种方式返回：

 return PartialView("~/Views/Angular/TableAdd.cshtml");

编码愉快。

【讨论】：

从技术上讲，partials 不需要使用 Razor 渲染控制器 - 这实际上只是调用控制器。那么控制器应该叫PartialController吗？共享控制器？当然有一种方法可以在 NG 中使用正确的 Razor 部分包含？