加载文档后在 JS 函数中渲染 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 是运行在服务器上的 ASP.NET MVC 框架用来生成一些 HTML 模板的视图引擎。

但是，您可以使用 Json.Encode 方法将数据对象转换为 JavaScript 对象表示法 (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'),
    )
})