Angular ng-include cshtml-страница

Im сражается с angular, чтобы сделать его ng-include частичным представлением cshtml вне ng-view.

вот мой основной взгляд:

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

im, используя mvc, чтобы возвращать определенные частичные представления при вызовах, подобных этому:

   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 вообще не называется. Я мог бы, конечно, включать весь шаблон на главной странице, но позже после входа в систему я хочу заменить этот шаблон зарегистрированным шаблоном пользовательских данных.

Любая идея, как это исправить?

Ответы

Ответ 1

ng-include оценивает выражение, убедитесь, что вы хотите загрузить путь напрямую, используя два набора кавычек.

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

Ответ 2

Чтобы вызвать частичное представление в asp.net mvc5 с помощью angular js, напишите следующим образом:

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

а также помните, что ваш метод контроллера должен возвращаться следующим образом:

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

Счастливое кодирование.

Ответ 3

При работе с MVC и AngularJS, до тех пор, пока вы выполняете какой-либо определенный маршрут {Controller}/{Action}..., тогда вы должны быть в порядке. Помните, что вы больше не имеете ссылки на URL-адрес страницы, а скорее на действия.

Вы также можете определить $routeProvider в файле app.js аналогичным образом:

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