Question

我正在与角斗争以使其包含在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。但那不是发生的事情，根本没有调用Template方法。我可以在主页上包含整个模板，但是稍后在登录后我想用登录的用户数据模板替换这个模板。

知道怎么解决这个问题吗？

Answer 1

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

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

Answer 2

要使用mvc5在asp.net angular js中调用部分视图，请按以下方式编写：

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

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

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

快乐的编码。

Answer 3

在处理MVC和AngularJS时，只要您遵循任何已定义的路径{Controller} / {Action} ...模式，那么您应该没问题。请记住，您不再在此处理网页网址，而是采取行动。

你也可以用类似的方式在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' });
});

Angular ng-include cshtml页面

3 个答案: