在视图模型中使用 MVC 视图返回 JsonResult 数据

Return JsonResult Data With MVC View in View Model

本文关键字：视图 返回 JsonResult 数据 MVC 模型      更新时间：2023-09-26

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

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方法中，我想调用GetData()并以与上面引用的 ajax 调用中的data值匹配的方式返回它的结果。

我怎样才能实现这样的事情？ 我假设我需要将调用的结果添加到视图的模型中，然后将值分配给视图中的 JS 变量。

像这样：

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

然后在视图本身中，如下所示：

var dataHolder = @Model.DataResults;

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

我怎样才能做到这一点？

您可以将视图模型 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 的全部目的是，您的视图可以在视图模型的形式下提供尽可能多的初始信息，您可以将该视图模型序列化为简单的 JavaScript 变量。

相关文章：