ドキュメントを読み込んだ後、JS fuctionのRazorコードをレンダリングする

Question

$("body").on("click", "#ActionButton", function (e) { 
      //set current select index 
      currentBook = $(this).attr("data-bookId"); 
      //set title 

      $("#BookAction .modal-title").text('@Model[currentBook].BookName'); 
      //get list of current book forms 
      @{List<XLEZ.Models.DataModels.FormModel> CurrentFormsList = Model[currentBook].FormList;} 


      swap('FillNewData', true);// collapse fill new data list if expanded 
      $("#FillNewData").empty(); 
      @for (int k = 0; k < CurrentFormsList.Count; k++) 
      {<text> 
      var html = "<li onClick=\"SubmitForm('@CurrentFormsList[k].FormLink','@CurrentFormsList[k].FormHideExtraValue','@Model[currentBook].FormActionLink')\" class=\"list-group-item bg-grey-300\" > @Html.Raw(CurrentFormsList[k].FormName) </li>"; 
      $(html).appendTo("#FillNewData");</text> 
      } 

     }); 

私は上記のコードを使用して、モデルのデータを使用してフォームを送信しています。問題は、ページが読み込まれてユーザーが選択を行った後に、私がやりたいことです。しかし、剃刀コードは文書が準備される前にレンダリングされます。このボタンをクリックすると、モデルの0インデックスのデータがこのスクリプトに読み込まれます。とにかくこの機能でモデルをループすることはできますか？

Answer 1

JavaScript変数をRazor変数に渡す/変換することはできません。 Razor変数はRazorエンジンによって処理されますここで、としてJavaScriptはクライアント側で実行されるクライアント側の言語です。

Razorは、HTMLテンプレートを生成するためにサーバー上で実行されているASP.NET MVCフレームワークで使用されるビューエンジンです。

ただし、Json.Encodeメソッドを使用すると、データオブジェクトをJavaScript Object Notation（JSON）形式の文字列に変換できます。次に、それを使用して操作を実行します。

//Convert Model to JSON 
var model = @Html.Raw(Json.Encode(Model)); 

$("body").on("click", "#ActionButton", function (e) { 
    //set current select index 
    currentBook = $(this).attr("data-bookId"); 
    //set title 

    $("#BookAction .modal-title").text(model[currentBook].BookName); 

    //get list of current book forms 
    var currentFormsList = model[currentBook].FormList; 

    // collapse fill new data list if expanded 
    swap('FillNewData', true); 
    $("#FillNewData").empty(); 

    for (int k = 0; k < currentFormsList.length; k++) 
    { 
     //Create link 
     $('<li />') 
      .addClass("SubmitForm list-group-item bg-grey-300") 
      .data('FormLink', currentFormsList[k].FormLink) 
      .data('FormHideExtraValue', currentFormsList[k].FormHideExtraValue) 
      .data('FormActionLink', model[currentBook].FormActionLink) 
      .html(currentFormsList[k].FormName) 
      .appendTo("#FillNewData"); 
    } 
}); 

$("#FillNewData").on('click', 'li.SubmitForm', function(){ 
    SubmitForm(
     $(this).data('FormLink'), 
     $(this).data('FormHideExtraValue'), 
     $(this).data('FormActionLink'), 
    ) 
})