angularjs "ng-view" в приложении asp.net mvc - маршрутизация - PullRequest
0 голосов
/ 06 июля 2018

Я сейчас работаю над веб-приложением, которое использует asp.net с mvc и angularjs. Проблема в том, чтобы получить angularjs с "ng-view" на cshtml-сайте. Я не работал с angularjs и mvc раньше, поэтому я надеюсь, что вы мне поможете :-)

Вот моя проблема:

  • Angularjs работает с небольшим тестом {{1 + 2}},
  • но он не отображал мне маршрутизацию с других сайтов cshtml.

Profile.cshtml

{{1+2}}
<div ng-view></div>

Для дальнейших вопросов: нет тега body oder html, потому что я определил его в _layout.cshtml. На этом сайте я также интегрировал скрипт angularjs через BundleConfig.cs. Angularjs по-прежнему работает с Profile.cshmtl с помощью теста {{1 + 2}}.

В Profile.cshtml должен отображаться сайт _PProfiles.cshtml со следующим кодом:

<input type="text" ng-model="profileFilter" placeholder="Suchen..." />
    <table>
        <thead>
            <tr>
                <th colspan="4">Employee Table</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employeeList | filter: searchFilter">
                <td><a href="#/_PProfiles/{{employee.Identifier}}">{{employee.firstName}} {{employee.lastName}}</a></td>
                <td>{{employee.emailAdress}}</td>
                <td>{{employee.Org1}}</td>
                <td>{{employee.Org2}}</td>
                <td>{{employee.Org3}}</td>
            </tr>
        </tbody>
    </table>

И app.js (скрипт angularjs) должен маршрутизировать это: (есть также дополнительная веб-страница, которая должна отображаться, когда я что-то набрал во входном теге -> searchFilter)

(function () {
    'use strict';

    angular.module('Headcount', [
    'Headcount.controller',
    'Headcount.service',
    'ngRoute'
    ]).

    config(['$routeProvider', function ($routeProvider) {

        $routeProvider.

          when("/_PProfiles", {
              templateUrl: "/Home/_PProfiles.cshtml",
              controller: "tableController"
          }).
          when("/_PProfiles/:id", {
              templateUrl: "/Home/_PEmployees.cshtml", 
              controller: "employeeController"
          }).
          otherwise({ redirectTo: '/Profiles' });
    }]);

})();

Сайт Profile.cshtml реализован в Home: Controller и отображается при запуске приложения. Другой сайт _PProfile.cshtml не реализован.

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace myApplikation.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Profile()
        {
            ViewBag.Message = "Your profile page.";
            return View();
        }

        public ActionResult Departments()
        {
            ViewBag.Message = "Your departments page.";

            return View();
        }

    }
}

Это все работает в обычном приложении asp.net без mvc. Я думаю, что проблема может быть в маршрутизации mvc, потому что она не позволяет angularjs маршрутизировать.

РЕДАКТИРОВАТЬ: Эта проблема решена (это зависит от ложной интеграции с представлением mvc), но ng-view по-прежнему ничего не отображает. Примечание: Я работаю с угловой 1.5.9. В более высоких версиях ng-view не работает без контроллера mvc.

Так есть ли предложения по решению этой проблемы?

Редактировать 09.07.18 Здесь вы можете увидеть вывод в консоли браузера.

* 1 042 * Image_ng вид & нг-контроллер * +1044 *

ng-view комментируется и ничего не отображает. Элемент выше отображает сообщение с

$ scope.Message = "Проверить, работает ли"

Это был тест, если контроллер работает.

И когда я удаляю {{employeeList}} из "tableController", это также работает. Но не нг-вид!

Image_ng-контроллер

1 Ответ

0 голосов
/ 08 июля 2018

Вот рабочий пример ng-view:

https://next.plnkr.co/plunk/Pp0ACPzJwc9x85XwPAVU

По вашему вопросу angualrJs не будет работать с контроллером MVC. Поэтому лучше использовать Angular с контроллером asp.net webApi. Вам нужно избавиться от контроллера ASP.net MVC, маршрутизации ASP.net MVC и представлений ASP.net MVC (т.е. файлов .cshtml).

https://www.codeproject.com/Articles/826307/AngularJS-With-MVC-Web-API: это поможет вам организовать ваше угловое приложение.

Я предлагаю вам сначала конвертировать .cshtml файлы в .html. Храните в папке приложения и загрузите исходный файл в index.html. Просто используйте угловую маршрутизацию, которая позаботится о рендеринге ваших HTML-файлов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...