如何从 js 函数内部调用 cshtml(razor 页面)中的 c# 函数

How to call c# function in cshtml(razor page) from inside js function

如何从 js 函数内部调用 cshtml(razor 页面)中的 c# 函数

这是cshtml代码

@model TreeWithUnity.Pages.Tree.TreeExampleModel

 <form method="post">
       <input type="checkbox"
               onclick="requestMyAction('@Model.tree_List[0].board_id', this.checked,
        'loader-@Model.tree_List[0].dataName',@Model.tree_List[0]);" />
        <div class="loader" style="display: none;" id="loader-@Model.tree_List[0].dataName">@Model.tree_List[0]
        </div>

    </form>

    @section scripts{
        <script type="text/javascript">
            function requestMyAction(itemId, isChecked, loaderId,tn)
            {
                document.getElementById(loaderId).style.display = "inline-block";
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        document.getElementById(loaderId).style.display = "none";
                        if (this.status === 200) {
                            document.getElementById(loaderId).style.display = "none";
                        }
                    }
                };

                    var url = '@Url.Page("./TreeExample", "MyAction")';
                    xhr.open('POST', url);
                    xhr.setRequestHeader('RequestVerificationToken', '@Xsrf.GetAndStoreTokens(Model.HttpContext).RequestToken');
                    var data = new FormData();
                data.append('itemName', itemId);
                data.append('deploy', isChecked);

                xhr.send(data);
                @UpdateRecursiveData(tn)
}
            }
        </script>
    }


@{
    void UpdateRecursiveData(TreeWithUnity.Model.TreeNode tn)
    {
        
       

        if(tn.deployment)
        {
            <input type="checkbox"
                   onclick="requestMyAction('@tn.board_id', this.checked, 'loader-@tn.dataName');" />
            <div class="loader" style="display: none;" id="loader-@tn.dataName">@tn.dataName</div>
            <br />
            for (int i = 0; i < tn.subTreeNodes.Count; i++)
                RecursiveData(tn.subTreeNodes[i]);
        }
        

    }
}

@UpdateRecursiveData(tn) 不起作用

  1. 它可以在 js c#func 中工作吗?
  2. 我不知道如何实现这个
  3. UpdateRecursiveData 应该晚于 Tree Example 的 MyAction 执行。这可能吗?

如何调用UpdateRecursiveData

 public async Task<IActionResult> OnPostMyAction(string itemName,bool deploy)
        {

            if (TempData["TreeData"] != null)
                tree_List = TempData.Get<List<TreeNode>>("TreeData");
            TreeNode upTree=null; 
            foreach (var item in tree_List)
            {
                if (item.board_id == itemName)
                {
                    upTree = item;
                    item.deployment = deploy;
                }
            }

            if (deploy&&upTree.loadOn==false)
            {
                if(upTree!=null)
                upTree.deployment = true;
               

                IQueryable<tbl_tree> iqueryTree;


                iqueryTree = _context.tbl_tree.Where(x => x.upcode == itemName);
                var datas =await iqueryTree.ToListAsync();

                for (int i = 0; i < datas.Count; i++)
                {
                    TreeNode treeNode = new TreeNode(datas[i].name);
                    treeNode.board_id = datas[i].icd11;

                    tree_List.Add(treeNode);

                }


                TempData.Set("TreeData", tree_List);
            }
            return new OkResult();
        }

首先,你不能将js变量传递给c#函数,你可以尝试使用ajax调用c#处理程序,处理程序returns html代码,然后把html view.Here 某处的代码是一个演示:

<form method="post">
</form>

<div id="data"></div>
@section scripts{
    <script type="text/javascript">

        $(function () {
            $.ajax({
                type: "POST",
                url: '?handler=UpdateRecursiveData',
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                data: {id:1},
                success: function (data) {
                    document.getElementById("data").innerHTML = data;
                },
                error: function (result) {
                    alert("fail");
                }
            })
        })
    </script>
}

处理程序:

public JsonResult OnPostUpdateRecursiveData(int id)
        {
            return new JsonResult("<div>id="+id+"</div>");
        }

结果: