web-dev-qa-db-ja.com

Angular ng-include cshtml page

angularと戦って、ng-viewの外に部分的なcshtmlビューをng-includeするようにします。

これが私の主な見解です：

<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がページに埋め込まれるhtmlを返すurlを呼び出す必要があることを信じています。しかし、それは何が起こったのかではなく、テンプレートメソッドはまったく呼び出されません。もちろん、マスターページにテンプレート全体を含めることもできますが、後でログインした後、このテンプレートをログインしているユーザーデータテンプレートに置き換えます。

これを修正する方法はありますか？

asp.net-mvcangularjsrazor
19
Timsen

ng-includeは式を評価します。パスを直接ロードする場合は、2組の引用符を使用してください。

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

Asp.netで部分ビューを呼び出すmvc5を使用してangular js、次のように書きます：

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

また、コントローラーメソッドがこのように返す必要があることも覚えています。

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

ハッピーコーディング。

14
tapos ghosh

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