将初始 Razor 输出与 Angular 更新相结合

combining initial Razor output with Angular updates

本文关键字：Angular 更新 相结合 输出 Razor      更新时间：2023-09-26

我有ASP。NET5/MVC6 应用程序。用户加载页面，Razor 视图负责数据的输出。例如（这是一个虚构的例子，仅用于说明）：

<div>@Model.Quantity</div>

用户可以更新数量，这是通过Angular $resource服务的POST完成的。服务器上的 HttpPost 更新数据库，并以 JSON 格式返回新数量。我想在不刷新整个页面的情况下更新页面上的值。很明显如何在JQuery中做到这一点：

$("#quantity").html(data)

但如果可能的话，我想留在Angular。所以，我想象这样的事情：

<div ng-controller="inventoryCtrl as vm">
<script>
vm.Model.Quantity = @Model.Quantity
</script>
<div>{{vm.Model.Quantity}}</div>
</div>

然后控制器中的回调函数将更新Model.Quantity

但这行不通...虚拟机未定义。

一定有更好的办法！

但这行不通...虚拟机未定义。

您需要捕获this：

var that = this;

这样，在资源上的 AJAX 请求的then回调中，您可以更新模型：

.then(function(result) {
    that.Model.Quantity = result;
});

更新：

我误解了你的问题。您的初始渲染似乎有问题。这可以很容易地实现，就像这样：

<script>
    var quantity = @Html.Raw(Json.Encode(Model.Quantity));
    // declare the quantity that came from the server as constant value
    app.constant('quantity', quantity);
</script>

可以注入到控制器中：

app.controller('MainCtrl', function (quantity) {
    this.Model.Quantity = quantity;
});

更新：

您也可以将整个对象图存储到一个常量中：

<script>
    var model = @Html.Raw(Json.Encode(Model));
    app.constant('model', model);
</script>
相关文章：