javascript - JS 関数を使用してビューに ViewBag の値を表示する方法は?

Question

ViewBag のデータを View に Javascript で表示したいと考えています。これが私のコードです。

意見

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

Javascript

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

がmyFunction()呼び出されると、テキストを取得します@ViewBag.Testが、値は取得しません。どうすればこれを修正できますか?

Answer 1

@ViewBag.TestRazor ビュー エンジンによって解釈されるページに値を受け取る JavaScript を配置する必要があります。私の推測では、現時点ではそうではありません。

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、値が取得されていることを確認してから、 adivの代わりにタグを使用しspanて、次のコードを追加します。

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

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