Im luchando con angular para hacer ng-incluir un parcial cshtml vista fuera de ng-view.

aquí está mi vista principal:

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

aquí está mi parcial de inicio de Sesión.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>

estoy usando mvc para volver específicos vistas parciales en las llamadas a la url como esta:

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

básicamente me gustaría creer que ng-include deben llamar a la url que devuelve un html que será inculded en una página. Pero eso no es lo que ha ocurrido, método de Plantilla no se llama en absoluto. Yo podría, por supuesto incluyen a toda la plantilla en la página principal, pero más tarde, después de iniciar sesión quiero cambiar esta plantilla con los registrados en la plantilla de datos del usuario.

Alguna idea de cómo solucionar este problema?

  • Sólo probado con exactamente la misma url, todo funciona, sólo se ve como que ng-include gustaría tener un enlace a una página html directamente en lugar de ir a través de servidores de primera
  • Realmente, todo lo que necesita hacer es utilizar el construido en el ayudante de Html.Partial("_PartialName") – a continuación, puede utilizar {{angularData}} dentro de la parcial, siempre y cuando su angulares controlador tiene los valores de definir en la parte superior de la página. Creo que por la ng-include ruta puede tener complicado para su auto. Recuerde, angular fue construido para el uso de la API de servicios en una sola página. Y MVC Razor si un completo lenguaje que ya tiene todas estas características. La combinación de ellos es un poco de una pica y mezcla. En mi humilde opinión, es innecesario, sino que es lo que es.
InformationsquelleAutor Timsen | 2013-12-27

3 Comentarios

  1. 24

    ng-include evalúa una expresión, asegúrese de que si usted está buscando para cargar una ruta directamente de utilizar dos pares de comillas.

    <div ng-include="'Home/Template/login'"></div>
    • ah, mis estúpidos errores, algún día…. Gracias mucho 🙂
    • realmente error fácil de hacer, pero hace ng-include mucho más potente. Encantados de ayudarle!
  2. 14

    Para llamar a una vista parcial en asp.net mvc5 utilizando angular js, escribir de este modo:

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

    y también recuerde que su controlador método debe devolver de esta manera:

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

    Feliz codificación.

    • La mejor respuesta, muchas gracias.
    • Técnicamente parciales no necesita un controlador para ser representado usando Razor – Lo que realmente hace es llamar a un controlador. Así que si el controlador se llama PartialController? SharedController? No hay duda de que es una forma de utilizar el correcto maquinilla de Afeitar parcial incluyen con NG?
  3. 0

    Cuando se trata con MVC y AngularJS, sólo tienes que seguir cualquier ruta definida(s) {Controller}/{Action}… de patrón, entonces usted debe estar bien.
    Recuerde que usted no está realmente tratando con las páginas URL de aquí, sino de acciones.

    También se puede definir un $routeProvider en un app.js archivo, de una manera similar:

        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' });
    });    
    • Esta respuesta parece ser demasiado amplia para responder a la OP de la pregunta. Por favor proporcione algunos ejemplos basados en los fragmentos de código.

Dejar respuesta

Please enter your comment!
Please enter your name here