Question

我目前使用Knockout在页面加载后动态加载数据。我正在使用Controller方法，例如：

public JsonResult GetData(int paramId)
{
    return Json(new { Field1: true });
}

然后调用它（在JS中）：

$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: '/Dashboard/GetData',
        data: JSON.stringify({ paramId: valId }),
        dataType: "json",
        error: function (xhr, ajaxOptions, thrownError) {

        },
        success: function (data) {
            var val = data.Field1;
        }
    });

这里，data对象是一个已经可以访问JS的对象。

当我想刷新单个项目时，这种方法很好，但它使初始加载效率相当低 - 需要进行大量调用来初始化页面。在我的ActionResult方法中加载View，我想调用GetData()并以与上面引用的ajax调用中data值匹配的方式返回结果。

我怎样才能实现这样的目标？我假设我需要将调用的结果添加到View的模型中，然后将值赋给View中的JS变量。

类似的东西：

public ActionResult Index() {
    var iModel = new IndexModel();
    iModel.DataResults = GetData();
    return View(iModel);
}

然后在视图中，例如：

var dataHolder = @Model.DataResults;

这不起作用，我只是得到了类型的命名，而不是ajax调用中data变量中存在的实际数据。

我怎样才能做到这一点？

Answer 1

您可以将您的视图模型JSON序列化为javascript变量：

@model MyViewModel
<script type="text/javascript">
    var dataHolder = @Html.Raw(Json.Encode(Model));
    // At this stage you could use the dataHolder variable
    // that will contain all information about your view model
</script>

现在，dataHolder javascript变量将保存您传递给视图的整个视图模型。您将可以访问其所有属性，而无需执行昂贵的AJAX请求。只有当您想在用户进行一些输入后从服务器获取一些新数据时才会创建这些数据，而不是在初始页面加载时。 SPA的全部目的是，您的视图可以在视图模型的形式下提供必要的初始信息，您可以将JSON序列化为一个简单的javascript变量。

在View Model中使用MVC View返回JsonResult数据

1 个答案: