Question

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

<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

但这不起作用...... vm未定义。

一定有更好的方法！

Answer 1

但这不起作用...... vm未定义。

您需要捕获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>

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

1 个答案: