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

Question

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

看法

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

Javascript

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

当myFunction()被调用时，我得到了文本@ViewBag.Test，但没有得到他的值。我怎样才能解决这个问题 ？

Answer 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');
    });
}

Answer 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>

Answer 3

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

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

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