CODEWITHSUNDEEP
asp.net-mvcangularjsrazor
Timsen
Timsen

Reputation: 4126

Angular ng-include cshtml page

Im fighting with angular to make it ng-include a partial cshtml view outside of ng-view.

here is my main 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>

here is my partial 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 using mvc to return specific partial views on calls to url like this: 

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

basicly i would belive that ng-include should call url which will return html to which will be inculded on a page. But thats not what happend, Template method is not called at all. I could ofcourse include whole template on master page, but later on after login i want to replace this template with logged in user data template.

Any idea how to fix this?

Upvotes: 20

Views: 28199

Answers (3)

tapos ghosh
tapos ghosh

Reputation: 2202

To call partial view in asp.net mvc5 using angular js, write this way:

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

and it also remember your controller method must return this way:

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

Happy coding.

Upvotes: 16

SirXamelot
SirXamelot

Reputation: 11

When dealing with MVC and AngularJS, just as long as you follow any defined route(s) {Controller}/{Action}... pattern, then you should be OK. Remember you're no longer really dealing with pages URL here, but rather actions.

You can also define a $routeProvider in an app.js file, in a similar fashion:

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

Upvotes: 0

eddiec
eddiec

Reputation: 7646

ng-include evaluates an expression, make sure if you're looking to load a path directly you use two sets of quotation marks.

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

Upvotes: 26

Related Questions