Angular ng-include cshtml 页面

Question

我正在与Angular作斗争，想要让它在ng-view之外使用ng-include来包含一个部分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。但实际情况并非如此，模板方法根本没有被调用。当然，我可以在主页面上包含整个模板，但稍后在登录后，我希望用已登录用户数据模板替换这个模板。

有什么解决办法吗？

- Timsen

---

刚刚用完全相同的URL进行了测试，一切正常，只是看起来ng-include更喜欢直接链接到HTML页面，而不是先通过服务器。 - Timsen

实际上，你只需要使用内置的帮助程序 Html.Partial("_PartialName") - 然后在局部视图中使用 {{angularData}}，只要你的 Angular 控制器在顶部页面中定义了这些值。我认为通过 ng-include 的方式可能会让你自己复杂化了。请记住，Angular 是为单页应用程序使用 API 服务而构建的。MVC 和 Razor 是一个功能齐全的语言，已经具备了所有这些功能。将它们结合起来有点像挑选和混搭。在我看来，这是不必要的，但事实就是这样。 - Piotr Kula

Answer 1

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

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

- eddiec

---

非常容易犯的错误，但会让ng-include变得更加强大。很高兴能够帮助！ - eddiec

Answer 2

在asp.net mvc5中使用angular js调用部分视图，需要这样编写代码:

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

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

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

愉快的编码。

- tapos ghosh

---

从技术上讲，使用Razor渲染局部视图不需要控制器 - 实际上这只是调用了一个控制器。所以这个控制器应该被称为PartialController吗？SharedController？当然有一种方法可以在NG中使用正确的Razor部分包含方式。 - Piotr Kula

Answer 3

当处理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' });
});    

- SirXamelot

---

这个回答似乎太笼统了，无法回答提问者的问题。请根据提供的代码片段提供一些示例。 - Jeroen Kransen