Question

我有一个产品列表和一个来自服务器的客户对象。我想在javascript上检索该信息。

  <!-- Customer object -->
  <input type="hidden" id="customer" value="@ViewBag.Customer">

  <!-- List of products -->
  <input type="hidden" id="products" value="@Model">

现在在我的JavaScript中，我有这个。

console.log(document.getElementById("customer").value);

那不起作用，我没有得到对象值。我想知道我如何达到期望的结果吗？

源代码...

<!-- Customer object -->
  <input type="hidden" id="customer" value="Namespace.Models.Customer">

  <!-- List of products -->
  <input type="hidden" id="products" value="System.Collections.Generic.List`1[Namespace.Models.Product]">

这是我的服务器端代码。

public async Task<IActionResult> Order(int customerId)
    {
        ViewBag.Customer = await customerRepository.Details(customerId);
        var product = await productRepository.GetAll();

        return View(products);
    }

Answer 1

根据评论，您似乎想要读取javascript中的整个模型对象，则可以使用javascript serializor从模型中创建一个json字符串。

以下是使用

的示例

<script>
    var model = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
    console.log(model);       
</script>

变量model将包含一个js对象（字典样式），该对象代表剃刀视图的模型对象。

由于我们正在执行C＃扩展/方法（Html.Raw，SerializeObject），因此上述代码必须在razor视图中，而不是在外部javascript文件中（通过全局变量）。只要将js对象设置为全局变量后，您仍然可以访问外部js文件中的对象

Answer 2

您需要进行一些调整才能获得所需的结果：

通过在.cshtml文件顶部指定模型来严格绑定MVC视图

@model List<StackOverflow.Models.Product>

修改您的JavaScript代码，以将客户详细信息和产品列表解析为有效的JSON数据类型

 var customerDetails = @Html.Raw(@Json.Encode(ViewBag.Customer));

 // Read products list by directly referencing Model as view is strongly-typed
 var productsList = @Html.Raw(Json.Encode(Model));

console.log("First Product Name:  " + productsList[0].Name);

此外，我认为不需要隐藏的HTML元素来存储来自服务器或任何其他来源的任何信息。这样会增加页面大小，从而导致性能下降。

除了将数据发送到ViewBag之外，您还可以简单地创建一个ViewModel并将CustomerDetails和ProductsList作为属性，然后直接解析模型，如上所示。

.NET MVC如何在Javascript中检索模型？

2 个答案: