如何使用 JS 函数在我的视图中显示 ViewBag 的值？答案

【问题标题】：How to display value of a ViewBag in my view with a JS function?如何使用 JS 函数在我的视图中显示 ViewBag 的值？
【发布时间】：2013-11-13 14:05:36
【问题描述】：

我想使用 Javascript 在我的视图中显示来自 ViewBag 的数据。这是我的代码。

查看

<span id='test'></span>

Javascript

function myFunction()
{
    $('#test').text('@ViewBag.Test');
}

当myFunction() 被调用时，我得到文本@ViewBag.Test，但不是他的值。我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery asp.net-mvc viewbag

【解决方案1】：

您需要将带有@ViewBag.Test 值的JavaScript 放在由Razor 视图引擎解释的页面中。我的猜测是，目前情况并非如此。

如果您想将您的 javascript 代码库与视图分开（这是完全合理的），您可以使用全局变量：

// in the view:
var testText = '@ViewBag.Test';

// in external js
function myFunction() {
    $('#test').text(window.testText);
}

或者，您可以使用data-* 属性：

<span id='test' data-text="@ViewBag.Test"></span>

// in external js
function myFunction() {
    $('#test').text(function() {
        return $(this).data('text');
    });
}

【讨论】：

感谢您提供这些详细信息。
没问题，很高兴为您提供帮助

【解决方案2】：

理想情况下，您应该做的是使用视图模型将数据传递给视图。有一个属性来存储您要传递的值。例如。让我们考虑一个显示客户详细信息的页面，并且您想在 javascript 变量中获取姓氏。

你的 GET 操作方法

public ActionResult View(int id)
{
  var vm=new CustomerViewModel(); 
  vm.LastName="Scott"; // You may read this from any where(DAL/Session etc)
  return View(vm);
}

在你的视图中，它是你的视图模型的强类型。

@model CustomerViewModel
<div>    
   Some Html content goes here
</div>
<script type="text/javascript">      
   var lastName="@Model.LastName";
   //Now you can use lastName variable
</script>

编辑： （根据问题编辑）要显示某些事件的内容（例如：某些按钮单击），最初将值存储在某处，然后读取它并根据需要将其设置在任何您想要的位置。

@model CustomerViewModel
<div>    
    <span id="content"></span>
    @Html.HiddenFor(s=>s.LastName)
    <input type="button" id="btnShow" value="Show content" />
</div>
<script type="text/javascript">  
   $(function(){

      $("btnShow").click(function(e){
         $("#content").html($("#LastName").val());
      });

   }); 

</script>

【讨论】：

【解决方案3】：

首先确保您的ViewBag.Test 确实有一个值，然后使用div 标签而不是span 并添加以下代码：

<script type="text/javascript">
    $(document).ready(function () {
        StartRead();
    });

    function StartRead() {
        document.getElementById("test").innerHTML = '@ViewBag.Test';
    }
</script>

【讨论】：