asp.net MVC 应用程序中的 AngularJS "ng-view" - 路由



我目前正在开发一个Web应用程序,该应用程序使用 asp.net 与MVC和AngularJS。问题是,要在cshtml站点中获取带有"ng-view"的angularjs。 我以前没有使用过angularjs和mvc,所以我希望你能帮助我:-(

那是我的问题:

  • Angularjs 与 litle test {{1+2}} 一起工作,
  • 但它没有向我显示来自其他 CSHTML 站点的路由。

Profile.cshtml

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

对于进一步的问题:没有正文和html标签,因为我在_layout.cshtml中定义了它。在这个站点中,我还在 BundleConfig.cs 中集成了 angularjs 脚本。Angularjs 仍然使用 {{1+2}} 测试在 Profile.cshmtl 上运行。

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>

应用程序.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 未实现。

首页控制器.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();
}
}
}

这一切都在没有 mvc 的普通 asp.net 应用程序中工作。我认为问题可能出在 mvc 路由中,因为它不允许 angularjs 路由。

编辑:这个问题已经解决了(它取决于与mvc视图的错误集成(,但ng-view仍然没有显示任何内容。注意:我正在使用角度 1.5.9。对于更高的版本,ng-view 在没有 mvc 控制器的情况下无法工作。

那么有什么建议可以解决这个问题吗?

编辑 09.07.18在这里,您可以在浏览器控制台中看到输出。

Image_ng视图&ng-控制器

ng-view被注释并且不显示任何内容。上面的元素显示一条消息,其中包含

$scope。消息 ="测试它是否有效">

这是一个测试,如果控制器工作。

当我从"tableController"中确定{{employeeList}}的范围时,它也可以工作。 但不是ng视图! Image_ng控制器

下面是 ng-view 的一个工作示例:

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

根据您的问题,angualrJs 将无法与 MVC 控制器一起使用。 所以更好的方法是将 angular 与 webAPI 控制器一起使用 asp.net。您需要摆脱 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 文件。

最新更新