19

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?

||||||
  • Just tested it with exact same url, everything works, it just looks like that ng-include would like to have a link to an html page directly instead of going through server first – Timsen Dec 27 '13 at 13:51
  • Really, all you need to do is use the built in helper Html.Partial("_PartialName") - You can then use {{angularData}} inside the partial, as long as your angular controller has those valued define in the top page. I think by going down the ng-include route you may have complicated it for your self. Remember, angular was built to use API services on a single page. MVC and Razor if a full featured language that already has all these features. Combining them is a bit of a pick and mix. IMHO, unnecessary but it is what it is. – Piotr Kula Jun 27 '17 at 11:25
24

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>
||||||
  • 2
    really easy mistake to make, but makes ng-include much more powerful. Glad to help! – eddiec Dec 27 '13 at 13:56
15

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.

||||||
  • Technically partials do not need a controller to be rendered using Razor - What this really does is just call a controller. So should the controller be called PartialController? SharedController? Surely there is a way to use the proper Razor partial include with NG? – Piotr Kula Jun 27 '17 at 11:14
0

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' });
});    
||||||
  • This answer seems to be too broad to answer the OP's question. Please provide some examples based on the provided code snippets. – Jeroen Kransen May 25 '14 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.