Question

我有一个使用服务器端@foreaches的ASP.NET视图，现在已替换为AngularJS。

现在我使用ng-repeat="record in records"，我不再使用@foreach。

使用@record.Id的实际代码现在不适用于{{record.id}}：

<td class="text-nowrap">
    <a asp-controller="Records" asp-action="Edit" asp-route-id="{{record.id}}">Edit</a>
    <a asp-controller="Records" asp-action="Details" asp-route-id="{{record.id}}">View</a>
    <a asp-controller="Records" asp-action="Delete" asp-route-id="{{record.id}}">Delete</a>
</td>

显然，因为@record.Id在服务器端......

现在，我认为解决方案可以设置类似

的解决方案

<a href="/Records/Edit/{{record.id}}"></a>

但是，如果控制器的路线发生变化，它可能无处可寻......有没有办法解决这个问题？

PS。

更多用于更好理解的代码：

<div ng-app="tablesApp" ng-controller="tablesController as tc">
<table>
  <thead>
    <tr>
      <th>@Html.DisplayNameFor(model => model.Name)</th>
      <th>@Html.DisplayNameFor(model => model.Description)</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="record in records">
      <td>{{record.name}}</td>
      <td>{{record.description}}</td>
      <td>
        <a asp-controller="Records" asp-action="Edit" asp-route-id="{{record.id}}">Edit</a>
        <a asp-controller="Records" asp-action="Details" asp-route-id="{{record.id}}">View</a>
        <a asp-controller="Records" asp-action="Delete" asp-route-id="{{record.id}}">Delete</a>
      </td>
    </tr>
  </tbody>
</table>
</div>

JS控制器：

$http.get("/api/Records")
    .then(function (response) {
        tc.records = response.data;
    }));

Answer 1

如果你在剃须刀视图中使用foreach（显然你这样做），那么你就不能使用角度语法{{record.id}}你必须使用@record.id

但是如果你在AngularJs中获得记录，作为数组/列表，那么你必须改变你的html并使用ng-repeat

- 编辑

很抱歉再次看到您的代码，您使用了asp-action和asp-controller等它们是来自核心版本的TAG HELPERS，换句话说，它们将在服务器端呈现，您将在浏览器中获得的实际上是锚点链接，如

<a href="/Records/Edit/{{record.id}}" >Edit</a>

如你所知，AngularJs是客户端，所以它不会渲染。您可以使用@Url.Action，也可以删除asp-route-id，然后使用自定义指令添加ID。

Answer 2

实际上，使用硬编码路线的选项要好一点

<a href="@Url.Action(action: "Edit", controller: "Records")/{{record.id}}" ></a>

然而，这个应该具有{ActionRoute}/{id}固定结构......

将ASP.NET控制器路由与AngularJS对象ID相结合

2 个答案: